Building static websites with JS bundling
Table of contents
This is probably the third or fourth time I am redoing my personal website in the last two years. The main reason is probably because it’s just fun to learn something new, and building something new is a good opportunity to play with new technologies. Another reason is that I’ve never been truly happy with what I’ve used at that time.
Esbuild + Zola
I decided to use Esbuild and Zola for remaking my personal website. For the website generator itself, I used Hugo in the past, but I really dislike its template engine. Something shared by Zola’s creator, and made them create Tera — a template engine written in Rust inspired by Jinja2 and Django. I haven’t done an in-depth performance comparison, but they are both reasonably fast for my needs.
I’ll use those two tools in this article, but you can achieve the same things with other bundlers and generators.
static/ folder, then run the website generator. I’ve opted to make a small JS script for portability doing just that.
; ; ;
Serving for development
Here, I also wanted to leverage optimisations specific to the generator I’m using. Zola doesn’t support incremental builds, except when using its internal webserver. In its current state, with just a handful of pages, it takes 70ms to run
zola build, versus 16ms to re-generate a page when using
; ; ; ;
Running the scripts
From there, I referenced both scripts in the
package.json file at the root of my project. This way, I can just run
npm run serve or
npm run build to serve and build this website respectively.
If you want to look for yourself, you can find the entire source for this website in the GitHub repository.