6 min read
As a Developer, there is always one little-discussed and unfortunate truth we don’t often talk about: our own website often gets delegated to the bottom of the priority list.
This is the position I found myself in until very recently. I built my personal portfolio website in 2019, having built and rebuilt it a couple of times since 2017. But I never had the free time to rebuild it and have it reflect my current capabilities until the tail-end of 2022 when I was at last able to find some time to do so.
When evaluating my options for the re-build, I found the best approach was a Static Site Generator, something I had never used before. My Static Site Generator of choice was Gatsby as it has an integration with WordPress’s GraphQL API.
I chose the Static Site Generator approach because my portfolio site was going to have content that wouldn’t be updated very regularly, and I wanted it to run fast and smoothly, as I wanted its main purpose to be a place for my blog to live.
So when I joined Studio 24 in the beginning of 2023, I was tasked with researching other Static Site Generators that we could use for future projects where the use of one would be the best approach.
But, I’m getting ahead of myself.
What is a Static Site Generator?
A Static Site Generator is defined by Cloudflare as “a tool that generates a full static HTML website based on raw data and a set of templates”.
In practice, this manifests as using a tool such as Gatsby or Eleventy to write templates for how content should be displayed in templating languages such as Nunjucks (a templating language similar to Symfony’s Twig in PHP) or React’s JSX. This templating language then gets interpreted by your tool of choice and translates it all into normal HTML which gets served to the client-side (the bit you can see as an end-user).
You can think of a templating language as the foundations of a building, the pillars and rafters that keep your house standing and the segmented areas that make it so you have individual rooms inside that house.
What about the content?
When a site is built with a Static Site Generator, there are usually a couple of options you could have for where your content lives.
Your content could live in the same root directory as your template files, which you could write in a language like Markdown (using .md files). To use a metaphor, if you think of your project as a plot of land, your root directory is an apartment building, and each folder in that root directory is a floor in your apartment building, with each file having its own apartment.
When you build your project, your templating language has a phone book of everyone in that apartment building, and when it needs to display certain content, it flips through the phone book, finds the right floor number (the folder), calls the apartment number (the file) and asks to speak to the right person living in that apartment (the contents of the file).
Alternatively, your content could be hosted somewhere else, like in a WordPress site or a CraftCMS site, in which case your template is provided with the endpoint (address of the plot of land) and can use the phonebook for the apartment building on that plot of land to get the right content in the same way it does in the previous example. This is known as a headless approach.
Okay, but why would I use one?
That’s a great question! There are many reasons why, in certain cases, a Static Site Generator is a better option to use. Some of these include:
- As a Static Site Generator doesn’t use a server to get its content, it’s less vulnerable to cyber attacks that target servers.
- Generally speaking, a Static Site Generator doesn’t employ the use of APIs to fetch content or pieces of functionality, meaning the browser can display the built files straight away without having to wait on the response of an API call. (Note this isn’t applicable to the headless approach)
- The use of Version Control means that if something goes wrong on a site, both the content and template files of a site are rolled back to a previous version, meaning there are no conflicts that would take a site down if the content and templates didn’t match up.
Why you may not want to use one
Although there are many benefits to using a Static Site Generator, they’re not a one-size-fits-all solution to any project.
For example if you’re building an e-commerce site, you would likely need to implement more complex functionality, such as the user having their own account on your site, having a list of things they’ve collected in their cart, and having a way to make a payment to you for the products they want to buy.
This kind of functionality often requires calling external APIs (like using Stripe or a similar service for payments) or entries in a database which is difficult to do securely on a statically generated site, as well as the fact that you need to rebuild and redeploy a static site for updates to show.
Conclusion
As Static Site Generators are being worked on and developed, they’re becoming a more and more attractive and convenient option for developers and customers alike when they want a website with simple / rarely changing content. I for one look forward to diving deeper into using them and finding the best ways to use them.
If you want to start using a Static Site Generator yourself, some of my recommendations are as follows:
- Eleventy is a great alternative to using a CMS for your content, as its use of Markdown and Nunjucks templating together make content entry a breeze.
- Gatsby is a great option if you’re either already a React developer or are thinking about learning React. It also has a fantastic built in Image Optimisation tool that makes serving accessible, sharp and low-file-size images easy.
- VuePress although I haven’t looked into it personally, it looks like a Vue developer would feel at home in this SSG.
Each of these has clear and easy to follow docs that make getting started with them easy.