Gatsby

Introduction

So I when I started this blog I wanted something simple to get started which let me focus on writing content. GitHub pages worked well with Jekyll for writing in Markdown so that’s what I used.

In the last six months I thought about doing some cooler things on this site than just writing content and when I heard about Gatsby I decided to check it out when I have some free time. And since I’m currently on vacation that was the perfect time to tinker with it. So let’s get started.

What was the process like

When you start a new Gatsby project you get the default template of a simple two-page website, which is a good start. So for a new static page you create a new file in the src/pages directory where the filename corresponds with the URL: about.js becomes yourwebsite.com/about.

Blog Posts

You could create a new static page for every blog post you write but there’s a better way. We create a blog post template and let Gatsby create a new page for every entry .md file in a directory you specify. You can read more about how this works here .

Gotchas

One thing I ran into is that (as far as I know) you have to explicitly add the path entry in the markdown file’s frontmatter which might take some time if you have a lot of files. Jekyll was able to create it from the file name.

Also styled-components somehow worked in dev mode without installing the gatsby-plugin-styled-components plugin but not in a production build. Check your site (gatsby build && gatsby serve) before you publish it.

Hosting

I moved from GitHub Pages to Netlify with the same private GitHub repo. The process is exactly the same: You push to master and Netlify takes care of the build and publish just as GitHub Pages did before. No complains.

Convert the code base to TypeScript.
Play with MDX .
Add a dark mode.
Add a Table of Content to blog posts.
Convert the site to a Progressive Web App.
Build some sweet React things.

Conclusion

10/10, would do again 👌.

Setting everything up took a bit more time than I expected. Mainly because I wanted to do everything by hand. If you don’t want to write your own CSS and pages you can just pick a Gatsby Starter that you like and be ready in no time.

Now the site is blazing fast and I can use it as a big React playground.