Static Site Generators

Static site generators render content into HTML files, just like dynamic site generators. The difference is that with a dynamic site generator, the HTTP server rendering the website generates the HTML anytime there is a request. With a static site generator create the HTML files at build time, when the site is deployed, and there is generating of HTML when an HTTP request is received, it simply sends the HTML file that was statically generated during build time. This has several advantages:

SPEED: It’s faster! This is why I got into static site generators. I love fast websites. Possibly because I am on a 1.4Mbps (and sometimes slower) connection, I really appreciate it when things load fast and notice when they don’t. There is no database and no HTML files needed to be generated at request time, just an HTML file ready to be delivered to your browser.
SECURITY: It’s simple, there are less moving parts such as databases. Less attack vectors means a smaller attack surface.
RESOURCES: Because the HTML files are only generated once at build time, and not each time an HTTP request is made, the server does not use as much CPU and RAM creating the HTML files to send. It uses so few resources that you can now host personal static websites for free on services like Netlify. They will let you use a URL such as “myname.netlify.app” or let you redirect it a domain name that you own. For free. How awesome is that? I have around 30 practice sites deployed through Netlify. Because it just has to generate the HTML once at build time it is extremely cheap for them to host.
CMS: It’s really easy to hook up a headless CMS of your choice to source content from. Contentful, Forestry, Netlify, WordPress and many others offer headless CMS’s so you are not limited here at all. Here I can have a CMS set up to for user friendly content editing that sends changes to a linked GitHub/GitLab repo, and those changes are detected and the site rebuild to incorporate them.
VERSION CONTROL: With a lot of CMS’s anyone with access can login and make changes. Sometimes these mess things up. Reverting back to the old version is often not easy. Using a static site generator with GitHub/GitLab etc makes things much easier. For example, I have my VS code editor linked to my projects GitHub repo. When I push changes to my repo I have Netlify setup to detect the change and trigger a new build of my website from that repo. So I can edit something, push it to my GitHub, and have it show up on my live website a few minutes later. It is easy to see where the change came from, the CMS or a team member pushing code.

Choices

There are a shocking amount of static site generators. You can take a look at some of them at staticgen. Now which should you pick? When making my choice I wanted one that was at least somewhat popular, and was in a familiar language. Popularity is important especially if you are new, it means there will be a larger community and more support. If you have a problem, someone has likely had it before and you can find find the answer somewhere on the GitHub repo or stackoverflow. If it is a newer static site generator it might not have the best documentation, and less of a database of past problems to search through. The language was important, since I wanted something useful. Hugo, Next.js, Jekyll, Gatsby, and Nuxt where some of the ones I considered. I ended up using Jekyll while working with an existing project, but made Gatsby my choice for longer term use.

Gatsby

I picked Gatsby because it used React, had a large community, excellent documentation, and was growing fast. They had recently received 15 million in funding, and six months later ended up with another 28 million. To me this meant it was probably going to stick around for awhile, since none of the others had that much funding. I did not want to learn something and have it slowly fade away over the next year because not enough people were maintaining the project. Gatsby had a full time development team and the funding to pay them. React was a bonus, since I had already picked it over Angular and Vue.

Big Changes

Before Gatsby I had been creating either static HTML/CSS/JS sites with no generator, or using React to create apps. Initially it is confusing using Gatsby since there are suddenly a ton of files instead of just a few HTML, JS, and SASS ones. The advantages are worth it though! For example, I am writing this post through the admin panel using Netlify CMS. It’s in a text editor using that converts it to Markdown. When I submit, it will get sent to my GitHub repo for this site as a Markdown file and placed into the content directory. The site is hosted on Netlfiy, which will since a change on the repo and trigger a rebuild of the site using it. In Gatsby I have it configured to create a brand new page for each Markdown file in the /content folder. This blog post will get converted from Markdown to HTML and a brand new page will be generated for it using a template I created and the title. No more creating it by hand, it is all automatic. I can never go back!