Gatsby, Netlify, and the Modern Web

For a long time, since I first switched from Ghost to Jekyll, this blog has been as minimal as possible in setup, and has had a noticeable lack of JavaScript. I’ve also always self-hosted it, usually on a VPS from Linode or DigitalOcean, even long before the Jekyll switch, as far back as it being on WordPress when I was still in High School.

It’s 2020 though, and the Web is different now. What started as a much-needed full redesign turned into a complete re-platform, including a new CMS, a rewrite of the entire HTML/CSS stack, and a move to hosting everything on a CDN. I debated for a while whether I should stick with Jekyll and just rebuild the HTML and move to Netlify for the TTFB advantage, but after messing with Gatsby for a while I decided it was worth actually switching.

I’ve been wanting to move from Ruby to something Node-based since I’ve had npm dependencies (at least since the Tailwind CSS redesign, and I think even before that), and Gatsby has a lot to like about it. I’ve been loosely following its growth along with Netlify as a combined platform since CSS Tricks started regularly blogging about it. One of the biggest things that appealed to me is that despite using React for all of the userland code, the resulting pages are super fast and work without JavaScript enabled thanks to SSR and some heavy optimizations on the framework end.

While developing, the site hot-reloads everything and uses loads of heavy JS, but the final production builds are very lean. I do plan on trying to optimize the final production JS that’s shipped in some way as it’s still painfully slow on TTI with low-end devices and slow networks. That’s not really an issue since “interactive” just means the JS isn’t ready, so everything but the search is unaffected, but it still bugs me 🙃.

Migrating the content over from Jekyll was fairly painless. By default, the Gatsby blog starter template expects posts to be an index.md file in a directory with that post’s slug as the name, so I just created directories for everything from Jekyll’s _posts directory, and moved the .md files to the newly-created directories. One nice advantage of this new structure is that related content like images for a post can be stored in the directory alongside the actual post content, making it really easy to know what is associated with what, so I moved over the images I used to embed separately too. Gatsby also does some nice optimizations to images with the <picture> element when you serve them locally too, so it’ll send the best-optimized image for the browser without me having to manually create a bunch of versions in the repository.

As for the design of the site, I’d really felt like my old Tailwind CSS-based design had been really lacking since the previews of Tailwind UI started showing up, so I knew I’d have to incorporate some of those elements in a full redesign once it was out. I’m using their top bar with some slight modification, as well as the excellent new Tailwind Typography plugin to style all of the prose content across the site.

There’s a teeny bit of custom non-Tailwind CSS to handle things like the desktop Safari overscroll and to style the search widget, but other than that this is built entirely using Tailwind’s utility classes. I have to say, I love it. Utility classes are so the way to go, using Bootstrap feels like I’m still living in 2010 now. I can definitely see where large components in a clean way can get messy with a utility-first framework, but if you’re using JS components where you’re not having to unnecessarily duplicate them in your source, it works so nicely I can never go back.

Since I’ve moved to a supported platform, I’ve also switched to hosting this blog on Netlify! They have a super-fast global CDN, and a very generous free tier, and handle all of the builds on their end, so publishing new content is as simple as pushing to GitHub, and they handle recompiling the site, pushing the new content to Algolia, generating the optimized images, and pushing the production-ready files to the edge nodes. It builds in 1-2 minutes, and they handle cache invalidation seamlessly so it all just works.

Another thing that’s neat about using Netlify is that I can use the Netlify CMS! This blog’s content is a Git repo full of Markdown files, and Netlify can connect to my GitHub account via the API and give me a nice editor at the /admin/ URL to write posts on, which is where I’m writing this! It uses GitHub’s OAuth to authenticate me (and anyone else I invite I guess, though guest posts through pull requests would be fun!), then just lets me blog as if it was a typical CMS!

This iteration of my blog is also the first time I’ve had a search since leaving WordPress. (At least I don’t think my Ghost blog had one but I honestly don’t remember much other than hating it.) This site’s search uses Algolia, which is an excellent SAAS option that focuses on speed and simplicity. Gatsby has a first-party plugin that handles indexing the content automatically, and Algolia has an official React component that’s easy to implement and customize, so 90% of the time implementing that was just tweaking the styling until I had it to a point where I was happy with it.

The last thing I wanted to get really figured out before I launched the redesign was the About page. I’ve always had a hard time just talking about myself, and I really wanted to write something more long-form. I didn’t achieve that goal, but I wrote enough to more or less replace what I had there on my old blog, so I decided to just launch as-is and update it later. I plan on slowly adding content to it over time, with the hope that it will eventually be a good way to learn a bit more about me than just that I build websites 😜.

One thing from the old blog that’s still missing is the dark theme. This is something I’ve been debating implementing here, either using the prefers-color-scheme media query like before, or with proper toggle UI. Honestly though I’m not sure it’s actually all that useful. In most cases, reading white text on a dark background is much harder than reading black text on a white background. There is an accessibility benefit for those who do benefit from the difference in contrast that change can have with their environment, even if that’s just fully-sighted people in a very dark room. I’m sure I’ll implement it eventually…

I’m sure I’ll make more little changes over time, but building this has been super fun, and a great reminder of just how much I prefer Vue over React 😁