Building my personal site in Gatsby
July 01, 2020
I chose to build the site with the Static Site Generator Gatsby which looking back probably seemed like an odd choice without web development experience. This article reflects on what the experience was like.
These are the main reasons I chose Gatsby:
Listening to the Syntax podcast one day they were discussing Static Site Generators (SSG). Tools that help generate static HTML. At first it seemed a bit strange, almost primitive. Generate static HTML in this era of ubiquitous web apps? But the more I thought about it the more it made sense. After all, what more is a blog other than static content?
With a Static Site Generator pages are built in advance and don't originate in a back-end at request time.
The appeal of this approach is there are fewer moving parts. No back-end configuration, no database, and less security to consider (famous last words).
What stands out when you encounter a Gatsby site is how fast it feels. There's a real 'snap' to the page loading. It's a refreshing alternative to the modern web experience.
Gatsby does a bunch of cool things like pre-fetch data and predicts where the next page request will come from. It's hard to believe that website can be that fast.
However, what really caught my attention was the ability to store content as Markdown and have Gatsby turn it into pages.
I liked this for a couple of reasons. Firstly you can store your posts as an .md file in your project and secondly if you're developing with git you can use it to version control your content—a kind of rudimentary form of content management.
As someone without web dev experience when they began I found the development experience to be pretty smooth. There were moments of frustration of course (why are there 50 different ways to define a Component?!) but on the whole it was a positive experience.
The process I followed was based on the official tutorial. Here are some of the highlights:
Gatsby seemed a little vague at first but it quickly became intuitive. Gatsby's approach is something like this:
- You have data you want to put into a site e.g. in text files or a database, etc.
- via plugins, Gatsby provides the means to ingest your data into its GraphQL database
- from there you can query and combine your data with HTML using React components
- then you take those components and combine them into a static site.
Once I understood this process development became relatively straightforward.
I really liked working in React.
This approach feels very natural if you're familiar with a programming language like Python where you compose an application from packages, modules, and classes. In fact, a React component feels very much like a class representing a part of a site and knows how to render itself as HTML.
Extending the site and adding new features was simple with Gatsby's massive plugin library. It's not an exaggeration to say there are thousands of plugins. If I wanted to add a feature to the site I always ended up with a plugin.
As well as the plugins that went with the offical tutorial I also used:
- gatsby-remark-prismjs - code block formatting using prismjs
- gatsby-remark-autolink-headers - automatically adds links to header tags
- gatsby-plugin-sass - enables the use of SASS for CSS styling and management
The Gatsby documentation was a super useful resource throughout and is a credit to the project.
You don't really need a lot of web development experience to get the most out of the docs and the official tutorial is based around building a blog that was perfect for this project.
I'm reluctant to say that you should know XYZ before using Gatsby but there are a few things that, had I known them, would've made development easier:
- How modern web projects are built
Overall I'm delighted with how the site turned out.
I put this site together in just over a month working on it for a couple hours each evening. Two weeks of that was learning how to set everything up in Gatsby while the remainder was spent in HTML and CSS. The actual challenge has been figuring out the modern web development ecosystem.
I've managed to create a 'set and forget' platform where new content is as simple as creating a Markdown file and running a site build. Now I just need to get writing...
If you're considering a personal site definitely take a look at Gatsby!