Moving my site from Hugo to Nuxt.js...

This site is built using Nuxt.js, and I have had a great time making it. The previous version of this website (now retired to hugo.pranshugaba.com) was built using Hugo. In this post, I outline how I made the switch from Hugo to Nuxt. I hope this helps anyone who is looking to choose a static site generator for their website.

Hugo is quick to install and very easy to get started with, which is what drew me to it in the first place. There are a variety of user-submitted themes available, and out of those, the Academic theme was my favourite.

The theme has a lot of useful features, but I found it to be quite opinionated. I found several websites using this theme, and they all looked more or less the same. If I wanted to modify the theme, I had to override the theme templates, and in some cases rewrite them completely. This would often cause unintended effects. It was difficult to maintain the site, and even more so to add new features. I always felt that I had hacked it together and it could break with an update to Hugo or the theme.

I wanted to create a theme from scratch, and I realized that there is much more scope for customisation if I use frameworks such as React or Vue.

There are a lot of static site generators based on these frameworks. I tried out Gridsome, Next.js, and Nuxt.js.

Gridsome

I tried Gridsome first, which is based on Vue.js. I had only used plain HTML and CSS before, but I could pickup Vue easily because each Vue file is divided into template, script, and style tags corresponding to HTML, JS, and CSS respectively.

I enjoyed learning Gridsome, and I loved the site it generated too. Gridsome prefetches links, so links are super quick to open. It also automatically optimises image loading by showing a blurred placeholder in the place of the image until it loads.

I could access data from my markdown files using GraphQL. I had never used GraphQL before, and I enjoyed learning it.

Next.js

Next, I tried out Next.js which uses React. I was surprised to see how easily I could pickup React since I knew Vue. Next.js has a great tutorial that teaches you Next.js by building a basic blog site. While I loved the tutorial, I didn’t like the fact that I had to write so much code just to read my markdown files.

There were many features that I wanted to add to my website such as sitemap and PWA. I found many plugins for these on the awesome-nextjs page on GitHub. However, most of them were third-party, and you never know when they stop being supported.

Nuxt.js

While browsing through the awesome-nextjs page, I discovered the awesome-nuxtjs page. I found that Nuxt has first-party modules for almost every feature that I would like in my site. I immediately switched to Nuxt.js. I found that Nuxt is in active development, the modules are great, and the documentation is detailed and well-written.

My favourite module is the Nuxt Content module. It makes it very easy to access markdown files and their content. I also loved the Sitemap, PWA, and Color Mode modules.

Like Gridsome and Next, Nuxt prefetches the outgoing links on any page, so the links begin to load even before you click on them. This makes the site feel fast and snappy!

I did the theming and styling from scratch and am adding features gradually. I was able to match all the features offered in Hugo, and then some.

Math equations

Install remark-math and rehype-katex modules and we are good to go!

I can have inline math \(e^{i\pi} + 1 = 0\), and displaystyle math too!

Code blocks

Prism.js comes pre-installed with Nuxt. You can install themes and plugins too.

fn main() {
    println!("Hello, world!");
}

You can check out the code on GitHub to see how I made my website using Nuxt.