I needed a new project, and what better choice than to redo my blog/portfolio during this period of time (2020 amIright?!). I’m a little late to the party with React, but better late than never and my old blog was still stuck on the WordPress hype of a decade ago. WP still has it’s place, I know, but I want to look forward not back here.

Just a caveat here, I’m assuming a certain level of knowledge. This isn’t a how to for beginners (sorry!), but feel free to use Google to fill in the gaps…

Right, let’s get stuck in.

How to…

Alright - a few things you’ll need first.

• A GitHub account
• A Vercel account (free for personal use)
• A code editor - I use Visual Studio Code because it’s just lovely.

So now you’ll want to clone this awesome simple blog template by James K Nelson which contains everything you need to get started. It also has a thorough readme which pretty much explains all.

Now once you’re all set there and you have a local version and your own GitHub repo, you’ll need to setup the deployment through Vercel (there are many, many alternatives that I’m sure work just as well, but I used this one and can recommend it for ease and simplicity!).

Simply click on the “Import” button. It has a lovely step by step that walks you through everything, and once you’re deployed it will display a list of domains to access your new blog.

Congratulations! You’re now the proud owner of a new blog. Use the power wisely.

Oh, and it’s super easy to connect it to a custom domain if you want to buy one or already own one. Again, nice and easy step by step.

Reading for later

Some things that might help on this journey (I’m putting this here for my benefit, really):

To brush up on React’s fundamentals, check out the React (without the buzzwords) and Asynchronous JavaScript courses.

Also some handy terminal commands I’m dumping here: npm start for a local development version and npm run build to create an optimised production build.

The lowdown

And a little explanation about your new blog from the creator of the template (cheers James!), again, mostly for my benefit:

“This template is designed with a JAMstack architecture. This means that the blog is statically rendered for the fastest possible load time, but once loaded, it turns into a single page app — ensuring navigation is silky smooth.”

“It follows a convention-over-configuation philosophy. It should work out of the box with minimal effort for most people’s needs, but can also be configured where required.”

“Finally, an effort has been made to prefer explicit code over concise code, and simplicity over complexity. Magic is avoided wherever possible, even if this means more code is required for the desired result.”

The tools

• React renders the UI
• MDX converts markdown into React components
• Navi handles routing and creates static HTML files for each route
• create-react-app builds the app’s assets and provides the dev server