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:
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.
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.
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.
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.
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.