Switching from Wordpress to Hugo
NineOverFour is now live on Hugo! I spent the last three weeks importing the website from Wordpress to Hugo. For those not familiar with these systems, Hugo and WordPress are platforms that create websites.
WordPress and Hugo
WordPress makes it easy for almost anyone to create a website. On a more technical level, WordPress is an open source Content Management System (CMS). A CMS allows users to create and manage a website without knowing how to code. WordPress is also highly customizable with a huge selection of plugins and themes. All these factors make it one of the most popular systems for websites. According to Kinsta, over 43% of all websites are powered by WordPress.
Hugo is also a framework for creating websites. However, Hugo accomplishes this in a completely different way. Hugo is a Static Site Generator (SSG) and builds a page whenever content is created or updated. This is opposed to dynamic site generators, like WordPress, which sends a new page every time the page is requested. Since the generator is not building a new page at every request, sites made with a SSG are fast and secure.
Why I Switched
I used WordPress to manage NineOverFour since the site’s inception in 2015. I enjoyed using WordPress the entire time. WordPress is easy to use. I can do almost anything with the right plugins and themes.
However, those add-ons slow down my website. It takes a while to pull up the site on my phone. I also have to wait for my admin dashboard to load. This creates friction when creating and editing posts.
There are security concerns with WordPress. NineOverFour was hacked in 2019. I neglected to update my plugins while taking a break from posting. Someone breached my site through a vulnerability in one of those plugins. My URL redirected to a web page full of foreign language ads. I had to scrub the site and install additional plugins to prevent future malicious attacks.
Hugo fixes these issues. As mentioned above, static HTML files perform better than their dynamic counterparts. The Hugo framework does not use databases and plugins . This reduces the number of vulnerabilities in the website.
I also took on this project because I wanted to learn something new. Hugo is not as easy to implement as WordPress. I had to understand how Hugo put websites together. This meant brushing up on my HTML and CSS. I learned about configuration file formats like YAML and TOML. I also figured out how Git works; learning how to commit, merge, and push.
Making the Switch
I followed the instructions from a Smashing Magazine article to convert from WordPress to Hugo. I had no trouble following the steps to get my site up and running on GitHub and Netlify. The most time consuming parts of the switch were putting together the theme and cleaning up the imported WordPress posts.
Initially, I wanted to find and copy a popular Hugo theme. This would alleviate the need to create my own templates and CSS stylesheets. I wanted to get my site ported over quickly and painlessly. But the available themes did not completely suit my needs. And I didn’t know enough about Hugo to customize them.
So I decided it was time to pull up my sleeves and learn how Hugo actually worked. I found an excellent starter theme from Chris Ferdinandi. I used this theme and the Hugo Docs to learn how Hugo put websites together using HTML templates. I also picked up how partial layouts and shortcodes worked.
With this new knowledge, I put together the bones of my website. I modified the home page, imported my newsletter sign up form, and added a search box. I made modifications to the gomakethings.com CSS stylesheet and imported it to my theme.
When I was satisfied with the look and feel of the website, I went through the rest of the instructions. I used blog2md to download my existing blog posts. I pulled down my existing images using my web host’s CPanel file explorer. After all the files were on my local drive, I went through each post to fix the Front Matter and update the image links.
The rest of the steps were relatively simple. I did not deviate much from the Smashing Magazine article.
Lessons Learned
If had to do this again I would take the time to read the documents and mess with the starter theme before doing anything else. Once I figured out how Hugo used HTML templates and partials, everything clicked. Starting with an existing theme was not a good idea. Some of the themes used elegant coding that is hard for a beginner, like me, to pick up.
Another thing I would do differently is modify the blog2md configuration file before importing from WordPress. If it was possible, I would have liked to download the featured image link and made all links relative. This would have cut down my time fixing posts in half.
Conclusion
I switched my website, NineOverFour, from WordPress to Hugo. I made the change because I wanted to increase the performance and security of my website. I leaned on instructions from Smashing Magazine to convert my site to Hugo. It took about 3 weeks to complete the process. The most time consuming parts were learning how Hugo works and cleaning up the WordPress posts. My site feels noticeably faster and I recommend using Hugo for personal blog websites.
Tags: #tech