Static site generators

The range of options that we find nowadays to create static sites is endless. I remember back when I started as a developer and set up my personal website and blog using Jekyll. I was not familiar with HTML & CSS but the amount of themes out there was so large that I could pick my favorite, customize it, and get a beautiful website where I could dump my thoughts and learnings.

Things have have changed a lot since then. Every programming language has its own static site generator, including Swift. Each tries to take advantage of the programming language they are developed with. For instance, the Swift static site generator that people starts to talk about seem to have a strongly typed API. That’s awesome! But like anything in software, it’s all tradeoffs.

In years iterating my website, which is now built using Gatsby by the way, I have learned what are the most important traits that make the experience of developing web a joy: instant feedback, composability and extendability.

• Instant feedback: This means getting the changes instantly reflected in the web browser without having to wait for a transpiler or compiler to do some heavy-lifting work. CMD + S and CMD + Tab are your best friends. This can make a huge difference in the productivity of a developer because the process laying out a web page, is very iterative. Gatsby is by far doing an excellent job here. It detects when certain files that impact the site have changed, and reloads the content automatically without losing the currently loaded context.
• Composability: Large sites are broken down into smaller composable pieces, components. A component is a combination of a layout (HTML), styles (CSS), and some interactivity (JS). Frameworks like VueJS or React make defining atomic components easy and they integrate seamlessly with bundling tools such as a Webpack, which is one of the building blocks of Gatsby. The Javascript community is years away from any tool that is being built in not-so-web-oriented programming languages like Rust, or Swift. BabelJS, WebpackJS, or Emotion are good examples of tools and frameworks without which building web nowadays would be an inconvenient task.
• Extendability: And last, and not for that least important, have different options for extending your website functionality easily. In case of Gatsby, there are many hooks you can subscribe to to override any step in the generation logic, themes to include functionality that other developers have packaged and distributed as NPM packages, and React components and libraries that can be easily imported and used.

I’m glad to have chosen Gatsby as a framework for my personal website because it provides the aforementioned traits and more. I can package a functionality that I’ve built for this website, like the journal section that I call micro-blogging, use a library like Theme-UI to make the blog themable, use Gatsby plugins like this one that makes the website offline and more resistant to slow connections, or add React components to a markdown file using MDX.

It’s great to see though that there are people pushing the boundaries of static site generators to other programming languages like Swift. And it’s also great to have types and APIs that you are already familiar to. However, the value that it brings having a compiler that ensures that I wrote a <h1> where it should be a </h1>, compared the value that you get when you use a framework like Gatsby that can leverage years of development for the web, is not worth it, at least for me.

Hope you have a wonderful week 👋! If you notice some oddness on the website, it’s because I’m overhauling it a bit.