How I made this blog

Welcome to 2022, where there's more ways than ever to make a blog.

It seems like not so long ago, when it came to having a custom blog, Wordpress was the only game in town.

Not so anymore - there are static site generators like Jekyll and Gatsby, headless CMS engines like Contentful and Prismic, platforms like Ghost and Wordpress, and of course hosted solutions like Medium, Substack, and Wix.

While I can't quite answer what you should choose for your own blog, I can explain why I chose a combination of Next.js and MDX for my blog, and you can decide whether it makes sense for you.

🚧 Note: there's not a ton of coding required on this journey, but if you're not comfortable using the command line, you'll probably want to stick to a hosted solution.

Static Generation

One of the things I was looking for was the ability for the blog to be generated statically. This means that when I update the blog (or make any styling changes), HTML is generated once, and that's what's uploaded and being shown to you, the end user.

That means there are no databases, backends, or Javascript between you and this sweet, sweet content, giving it the highest possible performance. It also means that hosting this site is incredibly cheap - in this case it's free thanks to Vercel's "Hobby" tier.

Another benefit of static generation is that once the blog is generated, it's quite resilient, as static HTML files can be propagated and cached across the Internet rather than relying on one or a small number of backend servers.

A downside to this approach is that there's a small amount of complexity up front that you (or one of your engineer friends) will have to deal with. If you have any experience with git and Javascript, however, it should be a breeze.

Next.js

Within the realm of statically generated blogs, there are plenty of options, of which I considered the most popular ones: Jekyll - the "OG" static site generator written in Ruby with tons of plugins and templates. There's also Hugo, written in Go. Gatsby - a Javascript-based static site generator built on plugins and GraphQL, and Next.js - a React-based server-side rendering framework.

In the end, I chose Next.js for a few reasons:

1. It's React-based - if you're familiar with React, you'll feel right at home. My last company used React extensively so it was a very familiar environment, and it's nice that customizing the look and feel of the blog ends up being identical to building a web app rather than dealing with weird template languages.

2. No plugins to deal with. Gatsby is also JS / React-based, but Next.js feels more like writing simple Javascript rather than being a full-featured system with plugins to manage.

3. Deploying on Vercel is a snap - which means CI/CD is one less thing I have to deal with. I have no idea how long a free tier is sustainable for that company, but while it's here it's incredibly convenient. I simply git push and the blog updates.

MDX

The actual blog articles are written in a format called MDX, which is a combination of Markdown and JSX. It provides a nice balance of easy writing (via Markdown) with the ability to add React components if a more complex situation is needed. These files are simply stored in the repository alongside the blog and used to generate these article pages at compile-time.

Here's what the MDX for this article looks like:

export const meta = {
  author: 'Tim Su',
  date: '2022-09-09',
  title: 'How I made this blog',
  description:
    'Welcome to 2022, where there’s more ways than ever to make a blog.',
}

export default (props) => <ArticleLayout meta={meta} {...props} />

<Image src={blogging} />

## Welcome to 2022, where there's more ways than ever to make a blog.

It seems like not so long ago, when it came to having a custom blog,
Wordpress was the only game in town.

...

If there will be multiple editors and writing Markdown in a text editor seems distasteful, it's better to use a headless CMS like Contentful, a web app that provides a content-creation UI but is unopinionated about how that content is displayed. Next.js or Gatsby can pull articles from there and render them.

Tailwind

The styling for the site is powered by Tailwind CSS, a library that I've really enjoyed using.

As I'm not great in designing things from scratch, I based the styling of the blog on their Spotlight UI, which I think looks pretty slick.

Wrapping Up

These days, there are a lot of options every step of the way, but I've found that for someone comfortable with Javascript, the combination described above has been a great balance of power and ease-of-use. Hopefully this helps you on your blogging journey. Bonne journée!