Rebuilding the blog: this time from scratch

A retrospective

I've just about lost count of how many times I've rebuilt my personal blog. It's more than a few. I think Jekyll deserves a lot of credit for trailblazing in the static site space; it wasn't right for me. Before Docker, figuring out how to get my Ruby environment right just to update a post was a nightmare. So, I moved on. I fiddled with a few Python options for a while (namely Pelican), but none of that made it to production. The most recent incarnation was Ghost. Ghost is pretty great, but ended up being too restrictive for me. So, I set out in search of something that fit me better.

What I want

I've been building web applications since the early 2000s with a wild array of technologies. For the last 3 years, I and others have been building Oscar with React, and I've never felt more productive and empowered than I have been with what amounts to a pretty standard stack of React built with Webpack with JS transformed by Babel. That's what I'm used to, that's what I want.

I also want a bit of flexibility. I'm very familiar with Webpack and its internals, and I want to leverage its power. I also want to use things like styled-components to manage my CSS; I have absolutely no desire to manage global selectors ever again.

I'm the only author on my blog, and I'm technical, so I don't need to worry about non-technical authors writing content or deploying things. That means I don't want an admin application that needs to run on a server somewhere and stay ahead of security updates, nor do I want a WYSIWYG editor that I'll never use.

Finally, I want everything to be fully static for SEO, performance, and ease of maintenance, but I want to be able to add interactivity with React components that reconcile with pre-rendered HTML.

React-based options

I looked at Gatsby when it first came on the scene. It was rough at the time and I had a lot of objections. Its production story wasn't great (it didn't allow adding hashes to your production bundles to facilitate caching) and it was a bit too opinionated on how to structure things. Phenomic seemed cool off the bat, but there was a lot in there that I didn't want, either.

I ended up building something somewhat custom, but surprisingly minimal, with plain-old create-react-app, which does a lot of the work for you as far as setting up a bog-standard React application.

What I ended up with

On top of create-react-app, all I needed were a few components to add in the remaining functionality I wanted.

Rendering Markdown

I like writing in Markdown, but I want to tie together Markdown and React, so I use markdown-component-loader to render all of the blog posts as Markdown. With some glue code, I can map rendered Markdown tags (such as <p>, <h1>, etc.) to layout components I've created and styled with styled-components, so no need for global CSS. I also leave the door open for rendering React components in Markdown, which I plan to leverage to add photo carousels, etc.

I use Webpack's require context to create the index of all blog posts, and leverage code splitting to load a tiny bundle for each blog as the pages load.

Static rendering

I'm using react-snap to effectively pre-render everything into static HTML files. So far, zero complaints. I even get preloading support out of the box. I'm really happy with the performance of the site this way. Like, really happy.

Deploying and hosting

Oh my God, I'm in love with Netlify. It's such a well thought-out product, and the free tier is amazing. I mean, I get it: as a developer, I'd use this for a commercial project in a heartbeat. In about 15 minutes (probably less), I had the following working:

• Automatic builds and deploys on commit to master
• DNS setup to leverage their CDN
• Custom headers to tweak the cache control settings (Webpack generates hashed file names, so I want immutable, generated JS to be cached for a very long time)
• SSL via LetsEncrypt

All from a very slick, very clean UI with ample documentation. And it's free. Free! Highly recommended.

What's next

I'm not a designer. I'm not thrilled with the design of this site yet. But, I'm happier than I've ever been with the structure, and I'm well-equipped to iterate on the design in the future. Other than that, I'm pretty happy with what I have.