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 -
- Scalability
- 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
- Domain Name
- Hosting service
- 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 -
- Domain Name
- Hosting Service (Read More - How am I hosting my website on siteground)
- 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 -
- Use of WordPress
- Posting and updating content regularly
- Changing the layout/themes
- 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 -
- Responsive
- Mobile Friendly
- 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 -
- Netlify - Free Hosting available
- Render - Free Hosting available
- AWS - Paid Hosting
- Nanobox - Paid Hosting
- GitLab - Paid Hosting
- GitHub - Paid Hosting
- [Rsync]
- 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 -
Perks of Netlify | Value | |
---|---|---|
1 | Free Hosting | It's Free, if you do not have very heavy traffic on your website. |
2 | CDN(Content Delivery Network) | Netlify has its own CDN(Content Delivery Network) servers which makes your website more fast and quick to load. (You do not need to buy separate CDN services from Cloudflare or KeyCDN etc.) |
3 | Easy Integration | The migration and initial setup is very easy |
4 | Custom Forms setup | You can set up custom forms(contact-us page, newsletter subscribe from, etc.) with Netlify |
5 | Good Support | Once you upgrade your hosting service plan then you can take help from the support desk to troubleshoot your issues |
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 -
- Setup Netlify account
- Setup GitHub account
- Created GitHub Repo
- Cloned Hugo theme on local computer
- 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.
- Download the plugin (Because this a plugin is not available in WordPress search.)
- Go back to the wordpress admin portal,
Plugins->Add New
- 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. - To export everything from WordPress
goto -> Tools -> Export to Hugo
- 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
- Unzip
wp-hugo.zip
onto your local machine. - 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
- 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
- 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 -
- Hugo gives you full control over your website but in WordPress, you have a very limited option when wanting o change CSS , Javascript.
- Hugo is very lightweight and very easy to setup but WordPress is always hard to setup.
- With Hugo you can export your complete website in single command
hugo
and it will export your complete website into single directorypublic
but in WordPress you need to rely on third-party plugins. - 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.
- 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.
- Hugo is lightning quick in terms of performance because it does not have a database running in the background.
- Hugo runs on jamstack so there are many free hosting service provider which will help you to host your Hugo website without any cost.
- 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 -