Since the early days of the internet, people have set up personal blogs for everything imaginable. From food to fringe conspiracy theories, the internet has always been home to—well—anything we disgruntled humans decide to put here. But it's the '20s now, the decade of crypto and dawn of the new age of paper straws that apparently don't work. So why, out of all the ways I could be spending my time, would I be starting a blog? After all, they've been around for longer than I have.

I've always wanted to build a following and to have a platform to share the things I care about. What better a way than the internet? I'm writing a blog in 2020—and heck—I'll also post about my experiences trying to code the darn thing. Since most blogs are still the run-of-the-mill WordPress or Medium variety, you might find this column interesting if you're thinking about joining the elite group of writer who can also roll up their sleeves and code—or is it the other way around?

The Basics

This section might seem pretty basic if you've already got some experience writing code with JavaScript and React. Feel free to skip it if you're comfortable with your IDE and setting up a create-react-app project, but I'd like to make this series appeal to as many people as possible, so I'll be providing some of these prerequisite building blocks along with the juicy stuff about CMS management and Git LFS.

When I initially sat down to work on this project, the first step was to register a domain and get DNS set up. Since I've had my tyweb.us domain for some years now, I decided to code up a quick portfolio site as a create-react-app project, host the repo on GitHub, point my DNS records at the Netlify servers and get cracking. I'll cover each of these things in a bit of detail so you can set up the same sort of things for your own site if you'd like.

First, the domain. This was an easy one for me, because I've had my domain since around 2015. You can register new domains for pretty cheap on sites like Google Domains, which I like for its simplicity. And—well—it's made by Google so they won't be going anywhere anytime soon.

Next, you'll want to set up a GitHub account and initialize the repository you'd like to use. Once you've gotten signed up, use the "+" sign in the upper-right to create your repository. Then you'll want to make sure you've installed NodeJS so you can use create-react-app to bootstrap your site. Change to your projects directory and then run this command, substituting <your-site> for the name of your new project:

npx create-react-app <your-site>

Once that command finishes up, you should be able to get change into your new project directory. The first time, you should run yarn to make sure everything's ready to go. Now you'll be able to open the project in a code editor such as Visual Studio Code and get cracking. Go ahead and run yarn start from the built-in VSCode terminal, which should open up a new browser window.

If you get to the point where you see the slowly-rotating React logo, congrats! You've just set up a create-react-app project you can edit locally. If you haven't done anything like this before, it's a pretty significant accomplishment.

Git Setup

Git is going to be an important part of our blogging workflow. This little section should get you up and running with your project so you can track changes and later deploy everything to Netlify. You'll use the GitHub repo we created in the first section to push your changes and host your blog.

If you're new to git, you'll want to read through something like this article to follow along. We'll want to initialize our project directory (the one created by create-react-app) as a GitHub repo and add GitHub as a remote tracking server for the repo. Once you've pushed your first commit to the master branch, you should be able to see your files on the GitHub web interface.

Netlify and Your Domain

The next step is where we'll be tying things together and seeing a tangible result for the first time. We'll be deploying your new site onto the internet and setting up your domain to point at the Netlify servers where your site will live. Head over to the Netlify signup process and create your account.

Once you've signed up, follow the promots to link your GitHub account and grant permissions. Then you can select your newly-created repository from the list in order to start the deployment process. For create-react-app projects, the defaults should suffice for this step as well.

Go through the site settings and enable things you'd like to have on your site. Things like analytics and lossless image compression can be found by clicking through the Netlify dashboard. One thing you'll definitely want for later is to enable the basic Netlify identity feature so you can set up your blog's login system later.

Once you see the initial deploy succeed, you should be able to click the button and visit the first version of your live website. If you look at the address bar, it should say something strange like ungrateful-radio-11235813.netlify.com. This is the default Netlify-generated site name, and you'll want to swap that out with your actual domain.

Go back to Settings and find the section for domain management. Go through the steps for linking up your domain and DNS records. Once everything's all set, things might take around a half hour to propagate through the DNS system. Take a break and pat yourself on the back, because in many ways the hardest parts are over. In the next post, I'll dig into the meat and potatoes and by the end we'll have written our first blog post.

Until then, you can mess around with your new React-powered website. Whenever you push code to your repo, your site should automatically update after a few minutes when the Netlify deploy succeeds. You'll want to start learning React at this point if you haven't already, because you'll be using it to build your website and make it look the way you want. Don't hesitate to leave a comment if you run into any problems and I'd be more than happy to help get it resolved!