I'm a big fan of static site generators. Although it's not always straightforward to make something the way you want, nothing beats the feeling of knowing I don't have an application server or database to keep up and worry about. No Wordpress to be patched, no API to develop, just plain HTML over the wire.
On top of that, being able to write stuff inside my code editor (VS Code with Vim bindings) make the experience a lot better. Can't remember how many times I typed :wq when saving a document in Google Docs or sending a message in Slack: old habits die hard. 🙃
When I started to build this blog, I played a little bit with Gatsby. The initial plan was to have it setup with Netlify, board the JAMstack hype train and have fun along the way. Gatsby relies on React, and it's a great framework, but I didn't want to have a Javascript dependency on this website.
After researching and trying out a few options, I ended up with the current setup:
- Zola as the static site generator
- Tailwind CSS for the front-end
- Cloudflare Pages for hosting
Why I picked Zola and Tailwind CSS
I had used Jekyll and Hugo in the past, but a few reasons made me settle with Zola:
- Zola is built with Rust, and I came across Zola because of it. I have a special interest in the language, and I was very keen to use a tool made with it.
- Zola is a very simple SSG. It didn't take me long to have a quick read on the documentation and understand how it worked. It was easy to get started and build something that I felt happy with.
Also for simplicity I decided to go with Tailwind CSS. The way it's designed just works for me: a collection of utility classes that I can use to compose whatever I feel like. I used a few UI frameworks in the past, and they are really quick to get something nice-looking up and running, but I would then spend a lot of time customising the components to look the way I wanted. In the end, I prefer not to have a set of pre-built components.
Why Cloudflare Pages
Cloudflare Pages launched back in December 2020 as a JAMstack-compatible solution, competing with other platforms like Netlify and Vercel. I was torn between Cloudflare Pages and Netlify. Both support Zola out-of-the box (sort of, more on that in a bit) and both free offerings are pretty decent.
| Cloudflare Pages | Netlify | |
|---|---|---|
| Bandwidth | Unlimited | 100GB/mo |
| Builds | 500 builds/mo | 300 min/mo |
Netlify looks very nice. It's more mature, and I know people that have been using it for a long time and are very happy with it. Cloudflare Pages feels to be rushed through the door. It's not as polished as the alternatives, and I wasted a lot of time with an issue caused by probably a bug in the interface.
When you create a new website in Pages, you have to configure your build, and you can set the environment variables there. You need to set the ZOLA_VERSION variable to make Zola available in your build environment, but it wasn't working. After a long time trying, I gave up and skipped this step, which took me to the dashboard. From there, I edited the build settings and guess what, the environment variable was not there at all. I added it there, and voilá, it all works. Go figure. 🤷
I ended up with Cloudflare Pages just because I already have more things set up there in Cloudflare, and I wanted to avoid using one more service. It's working perfectly right now, but I know I can quickly move somewhere else in case I face any deal-breaker.
The deployment process
The process is straightforward. Changes are pushed to Github, and a build is automatically triggered in Cloudflare Pages.
The build itself is a couple commands: npm run build:css && zola build
The reason why npm run build:css (and so node and npm) is needed is because of Tailwind CSS. It uses PostCSS to transpile the final CSS stylesheet to the static/ folder, which then gets picked up by Zola to generate the final deployable website.
The final step deploys the website to the Cloudflare edge network, which is the cool thing about JAMstack or Serverless. The application gets deployed to servers located all around the globe, closer to the users, improving latency. Furthermore, static websites can be cached and be served really fast. ⚡
Overall, I'm quite happy with the final result. Now I hope I can make good use of it.