Why I dumped Wordpress and switched to Hugo static site generator

1.Introduction

I started my blog in January 2019 and like other bloggers, I also choose Wordpress as my preferred CMS tool for blogging. I was very happy with the out of the box features provided by the Wordpress but as I started putting more and more content on my blog I started to notice some problems with WordPress in terms of -

1. Scalability
2. Performance

2. Behind the scene of WordPress

Before I start comparing the pros and cons of Wordpress with GoHugo. Let see what happens behind the scene when you use WordPress. For setting up the WordPress blog you need to fix the following component so that your blog/website is live on the internet

1. Domain Name
2. Hosting service
3. WordPress (There is always a Database running behind)

As you can see when someone is going to access your website the request will go through 3 layers.

3. Behind the scene of Hugo

But in contrast when you use GoHugo static site generator then you do not need to worry about the Database and you only need to set up following components -

1. Domain Name
2. Hosting Service (Read More - How am I hosting my website on siteground)
3. GoHugo (No Database)

As you can see when you use a static site generator you do not need to worry about the database and it is one the advantage in terms of hosting cost as well as performance.

4. Revaluate your Blog/Website - Is your Blog/Website "Static" or "Dynamic"?

"Static" vs "Dynamic" - Many bloggers thinks their website/blog is Dynamic but it is not?

Here are the tasks which typical blogger does on day to day basis -

1. Use of WordPress
2. Posting and updating content regularly
3. Changing the layout/themes
4. Using different types of plugins offered by the WordPress community.

But wait let me ask you a question - "Is your blog/website's article requires end-user to fill in some values or information while reading?"

If your answer is NO then your website is static and GoHugo will be a really good solution for your website/blog

If your answer is YES then sorry GoHugo is not for you because your website/blog falls under the category of a dynamic website, so your existing CMS(WordPress, Joomla, Drupal) would be a good fit for your need.

5. Is it big learning curve before I start using GoHugo?

This is a big and important question for many website owners who is comfortable working with their exiting CMS(WordPress , Joomla, Drupal) solutions because if you have a successful blog with reasonably good traffic then you would think twice before making a move towards GoHugo and I agree with that.

Because before I moved to GoHugo I spent a reasonably good amount of time playing with GoHugo but in the end I am happy with the result and the time I invested, now my blog is running on GoHugo.

But still the question is where should I start with GoHugo?

The answer is simple you need to install the GoHugo. Despite GoHugo is being Opensource it has a good documentation and you can follow this guide for the installation.

One of my favorite way of installation is via Homebrew

1brew install hugo

Verify the installation by running the following command

1hugo version

If you have installed the Hugo correctly then it should return you with the version (at the time I was writing this post the latest version of the Hugo was 0.76.4)

1Hugo Static Site Generator v0.76.4/extended darwin/amd64 BuildDate: unknown

Do you need to be a programmer before working with GoHugo?

For using GoHugo you do not need to know the programming/coding, but you should be familiar with using GitHub . (Using GitHub for the first time can be challenging for you if you have not used it before)

Apart from that, you need to know the Markdown format for writing the posts/articles. Markdown is not a programming language but it is plain text formatting syntax.

6. Markdown and Hugo

The next skill you need to master Hugo is the Markdown syntax because Hugo does not provide you a GUI like WordPress. Every post you write on your blog has to be written by following the Markdown syntax guideline.

Here are a very good guide and cheatsheet for learning the Markdown syntax - Markdown cheat sheet

7. What about themes? Does Hugo provide different designs/themes like WordPress?

Yes, Hugo community is 100% open-source, they do have many themes available under the hood.

Click here for more theme - https://themes.gohugo.io/

There are so many categories for themes that you can choose based on your blog niche. Since my blog is all about programming so went with Hugo Clarity Theme

All the themes are -

1. Responsive
2. Mobile Friendly
3. Very well optimized for SEO

8. Speed, Performance, and Core Web Vitals with Hugo

Static websites are by far the fastest websites compared to traditional 3-tier websites.

When I ran the Google's lighthouse test on my website I was completely flattered with the results.

It just outperformed (I am not using any kind of plugins)-

Isn't the above scores are amazing and mind-blowing. The nice thing about it is I am not dependent on any third party plugins.

Core Web Vitals

Google has recently announced and released new user experience matrices by the name Core Web Vitals. With Core Web Vitals Google is putting more and more weightage on user experience and the Core Web Vitals will be in effect from May 2021 for Google Ranking.

But if you are using Hugo then you need not worry about this new change because Hugo is very light and ultra-fast so user experience with Hugo will always be great.

Here are my stats of Core web vitals from Google Search Console.

Although my core web vitals score are not perfect, I need to do little tweaking based on the Core web vitals Guidelines.

The good thing which I noticed after using Hugo - "When google introduced Core Web Vitals my website was already in good shape, so I didn't have to do anything special for Core Web Vitals apart from little tweaking based on their guidelines".

So if you are using WordPress or any other CMS then please go and check your core web vitals score because from May -2021 google is going to consider Core web vital an important signle for the ranking.

9. Which hosting Provider support Hugo or Where can I host my Hugo website?

There are various vendors in the market providing the hosting services -

1. Netlify - Free Hosting available
2. Render - Free Hosting available
3. AWS - Paid Hosting
4. Nanobox - Paid Hosting
5. GitLab - Paid Hosting
6. GitHub - Paid Hosting
7. [Rsync]
8. KeyCDN - Paid Hosting

9.1 - Hosting with Netlify.com (I would recommend Netlify and website hosting is free)

When I started working with Hugo static website generator, I was looking for a hosting service that can support Hugo Static website. After some research, I choose Netlify for a couple of reasons -

9.2 - How to host a website with a Custom domain on Netlify?

9.2.1 - Step 1: Register an account with Netlify.

As a first step, you need to setup your new account with Netlify. (Refer to following screenshot)

9.2.2 - Step 2: Push your Hugo website code to GitHub

Netlify has very good integration with GitHub so you need to push your website Code to GitHub. But before that you need to setup a GitHub repo.

9.2.2.1 - Create a GitHub repo

Head over to GitHub.com and create an account if you do not have one.

After the signup, once you login to GitHub.com you will see (Refer to following screenshot)

Click on New.

After that, you need to fill in the repository name. You can pick any name of your choice. For the demo purpose, I have chosen the name demo website. (Refer to following screenshot)

Based on your privacy preference you can either keep your repo public or private.

9.2.2.2 - Clone Hugo theme

The next step would be now clone/copy the Hugo theme for your website.

I am assuming you have chosen a theme from - https://themes.gohugo.io/.

Let's take my theme Hugo Clarity and clone the same

On your computer create a folder/directory for example - demowebsite

And then use the following command for cloning the website

1hugo new site demowebsite

1cd demowebsite

1git init

1git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity

1cp -a themes/hugo-clarity/demowebsite/* .

9.2.2.3 - Push the website to GitHub

Alright so till now what we have done -

1. Setup Netlify account
2. Setup GitHub account
3. Created GitHub Repo
4. Cloned Hugo theme on local computer
5. Now let's push the code to GitHub

Initialize the local directory(Go inside the demowebsite directory and then run the following command)

1git init -b main

Add all the files of your website

1git add .

Now you need to commit your changes

1git commit -m "My first website with Hugo static site generator"

After the commit, you need to add your gitrepository URL so that you can push your code to GitHub.

1git remote add origin remote repository https://github.com/rahulwagh/demowebsite

Push your changes to GitHub

1git push -u origin main

After you push your code to GitHub then you can visit the URL https://github.com/rahulwagh/demowebsite to verify that your changes have been pushed successfully.

9.2.3 - Step 3: Netlify setup new site from Git

In the previous step, we pushed/submitted our code to GitHub, now we need to inform Netlify to pick our code from GitHub and host it on the Netlify server.

Login to your Netlify account and after login Goto -> New site From Git (Refer to following screenshot)

After that click on GitHub.

Now You need to authorize Netlify to access your GitHub Repository.

After the authorization, you should see the GitHub Repo .i.e. demosite (Refer to following screenshot)

select the GitHub repo from the list and move forward.

You should see the following option before making a final deployment - (Refer to following screenshot)

Finally, hit the deploy button.

You can monitor the deployment logs -

Once your website is deployed successfully then you should following the status with URL to access your website.

As you can see in the following screenshot the access URL for the website is - https://angry-aryabhata-46f4cd.netlify.app (Netlify provides you an easy way to change the URL name)

Ok now you can verify your website by accessing it via the given URL .i.e. - https://angry-aryabhata-46f4cd.netlify.app

9.2.4 - Step 4: Netlify setup DNS - Custom Domains

Setting up a custom domain with Netlify is very easy.

9.2.4.1 - Goto Domain Settings

9.2.4.2 - Goto Custom Domain

9.2.4.3 - Add Custom Domain

Once you enter your custom domain name it will ask for confirmation.

So click on Yes, Add domain.

9.2.4.4 - Update the Netlify DNS server entry to domain registrar

Now you need to update Netlify DNS server entry to domain registrar(The company from where you purchased your domain).

In my case, I purchased my domain from Google so here is my domain settings

So now we are done with the setup and we have hosted the website on Netlify successfully.

10. How to migrate from WordPress to Hugo

I have migrated my website from WordPress to Hugo successfully, It was a big undertaking for me but the Hugo community is so resourceful, supportive that the migration was very smooth.

Before you start migrating from WordPress always remember you have installed Hugo and at least you have fair understanding of How to run Hugo? How to write a post?

10.1 - Export everything from your WordPress website

There is a plugin wordpress-to-hugo-exporter which convert your WordPress article/posts into markdown files. So that you can import everything into Hugo.

1. Download the plugin (Because this a plugin is not available in WordPress search.)
2. Go back to the wordpress admin portal, Plugins->Add New
3. You need to manually update the plugin zip which you have downloaded in step 1, click on Upload Plugin, and it will install the plugin.
4. To export everything from WordPress goto -> Tools -> Export to Hugo
5. Based on the size of your website it might take some time to export and prepare a zip file with the name wp-hugo.zip
6. Unzip wp-hugo.zip onto your local machine.
7. After the unzip directory structure should look like this

 1├── contact
 2│   └── index.md
 3├── homepage
 4│   ├── about.md
 5│   ├── index.md
 6│   └── work.md
 7├── post
 8│   ├── 2019-01-19-hibernate-5.md
 9│   ├── 2019-01-22-commandlinerunner-spring-boot.md
10│   ├── 2019-05-19-spring-boot-devtools.md
11│   ├── 2019-05-24-hadoop-file-already-exists-exception.md
12│   ├── 2019-05-26-applicationrunner-spring-boot.md
13├── wp-content
14│   └── uploads
15│       ├── 2018
16│       │   └── 08
17│       │       ├── spring_bot_small-150x150.png
18│       │       ├── spring_bot_small-150x150.png.webp
19│       │       ├── spring_bot_small-150x150.webp
20│       │       ├── spring_bot_small.png
21│       │       ├── spring_bot_small.png.webp
22│       │       └── spring_bot_small.webp

8. Now you need to copy all the unzip content into the content directory of the Hugo site which you have created.

1cp -r /path/to/unzip-diretory/wp-hugo /demosite/content

9. Once you copy all the content then you are good to go, just start your Hugo server

1hugo serve

And you can access all the posts, articles, images which were previously running on WordPress.

11. Conclusion

After migrating from WordPress to Hugo, I happy and very satisfied with it, and here my final 2 cents -

1. Hugo gives you full control over your website but in WordPress, you have a very limited option when wanting o change CSS , Javascript.
2. Hugo is very lightweight and very easy to setup but WordPress is always hard to setup.
3. With Hugo you can export your complete website in single command hugo and it will export your complete website into single directory public but in WordPress you need to rely on third-party plugins.
4. In Hugo there are no concepts of plugins, so if you are using WordPress and paying monthly charges for plugins then Hugo will be a cost-saver for you.
5. With Hugo's simplicity we need not worry about database everything is static HTML pages but in WordPress you are dealing with an additional layer of Database.
6. Hugo is lightning quick in terms of performance because it does not have a database running in the background.
7. Hugo runs on jamstack so there are many free hosting service provider which will help you to host your Hugo website without any cost.
8. From a security point of view again Hugo is the winner because it generates static websites that are very secure.

All in all, after reading my experience with Hugo if you feel like Hugo is for you then just do not wait to go for it and dump the WordPress. Trust me you will never regret your decision.

Read More -

1. Why I dumped Wordpress and switched to Hugo static site generator
2. My experience of hosting static website hosting on Siteground
3. Hosting a website on Netlify
4. How to set up Netlify CMS for static website?
5. Fixing the Hugo Theme on Netlify Hosting?
6. /netlify-deploy-site-with-ftp-manually?