New Site Stack

Notes on migrating this website to a new stack

Monday, June 03, 2024

This website has gone through various transformations over the years, as among many things, it serves as a playing ground when I get urge to try out some new framework or approach. For the past few years, I've been using Next.js as the central driver for building out the static site. Recently, I've found myself moving further away from developing for the Web, as well as yearning for something simpler to maintain and deploy.

The demands of this site are relatively minimal. The primary process of compiling the site is translating Markdown (MDX) files, processing the code and math blocks, and stitching things together with a couple custom pages, all with common nav controls. The Next.js implementation accomplishes this with a few plugins - remarkMath, rehypeKatex, rehypePrism - which works, but is the fiddliest bit of the site. If I'm willing to give up the potential for easily building out complex pages in JS, I can likely simplify the site generation drastically.

Enter Zola: "a fast static site generator in a single binary with everything built-in." Zola has support for Sass compilation and syntax highlighting, as well as HTML minification. After a brew install zola and a zola init, I moved over the Markdown blog pages, index.html and index.scss, and had a rough version of the site running locally in about an hour or so.

With the basic site now running, the next step was to fix up the styling. First, I imported normalize.css as it was used in the previous site. Then, I dropped in Feather icons and tinkered a bit with Tera, the templating engine used by Zola, to embed the SVG icons directly in the HTML pages (which means fewer items to fetch when loading, and makes styling the icons via CSS much easier).

Finally, the tricky part: Math/TeX support. As I mentioned, the Next.js implementation of this site used a few plugins in order to render the Math/TeX blocks on the site. Continuing in the spirit of keeping things simple, I decided to give MathJax a try. According to its site, "it just works" - perfect. I dropped in a <script> tag for the latest version of MathJax and voilĂ ! Upon a closer look, I noticed that the inline blocks, using $...$, were not being translated. After a bit of poking around online, I inferred that \\(...\\) might work better. After a quick find-and-replace, everything was looking great.

With just a few more tweaks - generating a sitemap, robots.txt, processing images - the site will be ready to publish. Luckily, all of these are built into Zola.

And there we have it! Overall, my experience with Zola was a breath of fresh air. Admittedly, I will miss the power and potential that a JavaScript framework like Next.js provides, but I expect to be happier overall with the simplicity of simply generating HTML from Markdown.