Make Your Own Blog - Part 1
By Matt Kinnersley - 20 January 2021
Starting a blog is a great way to get your thoughts down on paper and out into the world. It helps to consolidate ideas, document learning and gives you the ability to share it all with others. You can begin easily with a website builder like Squarespace or Wix, but for me it's been much more rewarding building it myself from scratch. It's more flexible and every pixel can be customised to your liking. If you've ever been frustrated with drag and drop, building blocks, preset wrangling style of designing that never quite lives up to your ideal vision, then having a go at coding it yourself might be your best bet. It could also save you some money too.
In this first part, I am going to go over what tools and services I used and why I picked them. If you are unfamiliar with any of these, I highly recommend you read this part before you jump straight in. If you'd like to dive into the code, you can skip to the next part where I will go into the implementation details. Now, let's take a look at the first tool we are going to use.
NextJS is a framework that focuses on performance and search engine optimisation (SEO). Making a React app with Create React App (CRA) is great for getting you started quickly with client-side rendering (CSR), but one of the major pitfalls of CSR is SEO (lots of acronyms, I know, there's more to come).
So how does NextJS help us with this? Firstly, it gives us automatic static site generation and server-side rendering (SSR) out the box. Having our HTML pre-rendered with static site generation allows us to have all our content ready and available for bots to index on initial render, as opposed to an empty container with client-side rendering.
Tailwind provides a number of CSS classes that correspond to specific utilities, for example
mb to add
margin-bottom. Once you have used Tailwind a few times, it becomes very efficient for designing your app. If this is your first time using it, I have found it actually takes some time getting used to. My recommendation is you install the Tailwind CSS IntelliSense VSCode extension and keep the docs open in a tab during development.
Being able to notify readers whenever you upload a new post is a great way to keep people engaged in your content. Mailchimp is a service that allows you to have users sign up to an audience and then receive emails from your campaigns. They have some very helpful templates that make it easy to automatically send confirmation emails when a user joins your email list too. We will create a new audience in Mailchimp and build a custom form with React Hook Form to submit the readers email address to our API.
The company that created NextJS is Vercel. They also provide hosting of React apps and more specifically, have great support for NextJS apps naturally. Using Vercel as the hosting provider for the blog was a no-brainer. Deploying your NextJS app to Vercel is incredibly easy, especially when you are using serverless functions in your app like we will with our mailchimp API route. They also provide Preview Deployments meaning when you push a branch other than master to GitHub, it will deploy a test version of your app to a temporary location to preview your changes. This feature is perfect for when you want to publish a new post to your blog but want to preview it before it goes live.
If your blog starts gaining some attention, it can be extremely helpful to track which posts are (and are not) popular with your readers. Google provides a free service for this in the form of Google Analytics. Recently, Google released Google Analytics 4, which is what I use on this blog. I will show you how you can integrate this with your NextJS application and how to record events when users interact with your blog.