Website Update: Hugo

Welcome back to my blog, now completely overhauled and rewritten using the fabulously fast Hugo static site generator framework!

After a nearly 18 month hiatus from this blog, I finally dusted off the cobwebs. Or, more accurately, I threw away the old dusty blog and resurrected it using modern technologies. This post outlines what I did, why I did it, and what’s next.

What Have I Been Doing?

From the total silence on this blog, it looks like I haven’t been doing anything lately… However, that is far from reality.

It turns out that being a PhD grad student simply eats your time, sucking away days, nights, and weekends. If you’re not careful to carve out chunks of time for personal projects, there is simply no room to do anything outside of school and research.

For the past 2.5 years, I have been a full-time grad student at the University of Wisconsin–Madison pursuing my MS and now PhD degrees in Electrical and Computer Engineering. The amount of knowledge I have gained in grad school is crazy; simply reflecting on my progression over just one year is incredible. For my M.S. research project, I created the Advanced Motor Drive Controller (AMDC) which is a collection of open-source hardware and software for controlling advanced motor drives. Check it out at amdc.dev or read the docs at docs.amdc.dev. Also, check out my research publications.

Perhaps equally important to the knowledge gained are the numerous relationships forged with other grad students. UW-Madison has a very diverse grad student population, and I have genuinely enjoyed learning about international cultures. Overall, I’d say I have been enjoying grad school! 😄

Blog Technology Progression

Back to the blog upgrade…

I created this blog around the time I started college, back in 2015. Back then, static site generators were still somewhat “new” (or at least new to me) and most popular websites still ran using a CMS on a dynamic server. Of course, the web is based on serving quasi-static HTML pages, but with the advent of CMS technologies like Wordpress and Drupal, the ability to easily publish content on the web became more accessible.

I came to building my blog after building numerous PHP-based websites during high-school. The “better” of these sites used ProcessWire for their CMS which allows for very flexible front-end development. Check out my best one, which I built about a decade ago for my robotics team: team4096.org.

My first draft of this blog was built in the technology I knew at the time: PHP-based ProcessWire. I developed the general theme which lives on today, and wrote my first posts. However, I was very intrigued by these “static site generator” things…

GitHub was one of the first to really push easy-to-use static sites via their GitHub Pages system. This framework allows people to write content using the simple markdown syntax, which is similar to HTML, but without the bloat. Then, on git push to GitHub, an automated back-end task builds and publishes the new content to the web. Easy, simple, and minimal configuration needed.

Jekyll

GitHub’s static site generator is called Jekyll, is built using the Ruby programming language, and was released around 2008.

When I started with Jekyll, I wanted the same front-end flexibility as ProcessWire, but using a static site generator. The default GitHub-provided theming and build system simply did not cut it, so I forged my own theme and built the site locally to control the entire process. Then, I pushed the fully compiled HTML to the GitHub repo and configured the repo to serve onto my custom domain, nathanpetersen.com.

It worked well, see my post. Most importantly, it was free 💰💸: I did not have to pay to keep a server online. Also, I did not have to manage the server, installing updates and security patches.

However, I had never used Ruby and did not want to learn it… It felt rather “old” and weird, and more modern languages were calling my name.

Hexo

Hexo was released around 2012 and provides the same functionality as Jeykll, but, it is built on top of Node.js. This means it is built using JavaScript, a more modern and widely used programming language.

After about a year of using Jekyll, I took the plunge and rewrote the entire blog using Hexo. This mostly involved recreating my theme and customizations. I never made a post about this rewrite on the blog, but as of 2017, this blog has been powered by Hexo and JavaScript.

In my opinion, the coolest feature of the Hexo-based blog was the form on the contact page. I wanted readers to be able to send me emails, but did not want to give away my personal email due to spam. However, since the blog was just a collection of static HTML pages, there was no way to have a back-end server process send emails to me dynamically. To solve this, I rigged up a custom AWS Lambda function which accepts form submissions and then sends me an email. This so-called “serverless computing” approach is ideal for small static sites since you pay pennies per lambda function execution, as opposed to hourly for a full server. Plus, you do not have to manage server package upgrades and security patches. Awesome!

The blog worked wonderfully for many years. I wrote post after post to document project after project. Multiple of my articles (1,2,3) have been picked up by Hackaday drawing thousands of people to my corner of the internet.

However, as it aged, things started breaking. Some Hexo package upgrades were not backwards compatible, so features starting to break. But, most detrimental to the blog’s livelihood was my gradual decline in interest for JavaScript. During undergrad, I discovered my true love for embedded systems, hardware, and control theory. Gone were the days of wanting to be a web developer, and gone were the days of wanting to support a blog built using a JavaScript-based static site generator.

Goals for Blog Rewrite

This brings us to present day, 2022. My journey in life continues, my skills evolve, and so do my ambitions for this blog.

In the past year, I have spent considerable time building out a comprehensive documentation website for the AMDC platform. I built this using Sphinx, which is a “Python documentation generator” that has evolved into a generic docs website creator. Most notably, it is the tech behind the Python docs and even the Linux kernel docs. Sphinx is a static site generator aimed towards technical documentation.

I loved using Sphinx to build the AMDC docs website. Reflecting back, I think it was so great because I did not have to worry about the web development piece of the pie—no longer do I want to spend countless hours tinkering with web development tools to build websites. When I want to publish things online, I want to solely focus on content creation. Let the framework and theme do the web dev stuff, and let me do the content stuff.

I wanted the same content writing experience for my blog. I wanted to use all the cool reStructuredText features and extensions, like native $\LaTeX$ math support and admonitions. And, I wanted the flexibility to easily build my own theme, widgets, and features to aid in content writing (I still have a sweet spot for web dev 😉). Finally, I wanted the content writing experience to be WYSIWYG, but still in markdown.

Enter Hugo.

Hugo

Hugo is a static site generator framework, was released around 2013, and is built using the “new” and modern Go programming language. Its claim to fame is being fast, e.g., renders a page of the site in a few milliseconds. It has a built-in powerful theming framework which allows for very flexible page designs, and is easy-to-use.

Users do not need to know Go to create a theme or write content. In contrast, Hexo custom widgets are written in JavaScript, which tightly couples the theming to the builders native language.

The insanely fast build times and live reload local development server create an effectively WYSIWYG content creation experience: simply write markdown content in a text editor, save the file, and within half a second, the browser refreshes to show the changes. It’s awesome.

Over the course of a few days, I spent 20 hours to do a complete rewrite of my blog using Hugo. I rewrote my blog’s theme based off the popular LoveIt theme, and painstaking went through each and every post to update the markdown syntax for images and media. Overall, it went well and I love the results. It even has a dark mode now!

I also spent some time to rig up a GitHub Actions-based website build script. Now, when I git push to the main branch, GitHub runs my action which builds the site with hugo and publishes the HTML files onto to web. All for free! Gone are the days of building locally and pushing the final HTML files up to GitHub. Frictionless content creation.

Results

After years of inspirational drought, I am truly thrilled to have my blog back in a state where I look forward to writing articles and creating content. The new extensions and features of the LoveIt theme along with my custom additions make writing content exciting again. Be on the lookout for more articles soon!

…and, $\LaTeX$ math where $y = mx + b$ and $1+1 \ne 2$

❤💓❤

$$ \sum_{k=1}^{\infty} \frac{1}{k^2} = \frac{\pi^2}{6} $$

and you can copy the $\LaTeX$ commands straight from the browser by simply highlighting the equations and copying. Try it!

Or, what about code highlighting:

void main() {
    printf("Hello World\n");
}

This new blog framework is definitely not:

At least:

Thanks for reading!

—Nathan from Palo Alto, CA, USA

New Post Notifications

If you read this far, you might be interested in subscribing for email notifications about future new posts I write. I will never spam you! Every few months, I write a new article for this website, and will send you email about it. You can unsubscribe at any time. Thank you.