In this tutorial, I am going to show you the things that I did to successfully migrate my WordPress website to Hugo static site generator.

Why would like to convert your WordPress website to Hugo?

WordPress is the most popular framework fo building websites. This is because it is open-source, it has user-friendly CMS, allows for customization and has tons of documentation online.
However, sometimes you do not need a dynamic website with a database. Sometimes a simple HTML website with no database queries is enough to run a small blog or a portfolio website. Why would you need that?

Speed

The advantage of not having a database means that static websites are generally siginficantly faster than dynamic websites. Fast websites is really important for a good user experience.

Security

The static website has no database. That means there is nothing to be hacked. You edit your content from your computer and upload it to the server. No login credentials, username or password.

Yet, static websites have one big disadvantage. You need to manually generate html for each of your pages.
This is not a problem when your website has 3-4 pages but it may become overkill if you have a blog and you need to update it on a weekly basis.
Here is where Hugo site generator comes into help. Hugo uses GoLang – programming languages that uses pre-defined templates and lets you export your markdown into html. In this way, you just write a new blog post and et hugo do the rest.

This article presumes that you have some basic experience with Hugo (you have installed Hugo on your computer, set up a theme and used markdown to show content).

Here is my plan how to migrate my WordPress website to Hugo:

Convert WordPress into static website

Convert the static website to Hugo

There are a couple of WordPress plugins avaiable that let you export your website to a static website.
The thing that really worked for me was the Simply Static plugin that 100% succeeded to export my WordPress website using the Divi theme.

1. Install Simply Static plugin

2. Create a new Hugo website.

Copy the following line in the command prompt:

hugo new site testSite

This should create a folder testSite with your brand new hugo installation inside your hugo.exe root folder.
Copy the hugo.exe file from your hugo root directory and paste it inside the testSite folder.
Now locate the static folder inside testSide foder and paste all your static website content in the static folder in your new hugo installation.
Finally, move your index page into the layouts directory. You can now build your new website. Run the following command:

hugo server

Now, when you go to localhost in your browser, you should be able to see that your static website is successfully generated with Hugo!

3. Extract Partias

Now you can generate your website with Hugo but you cannot really take advantage of Huo functionalities. Here you need to do some manual work to set it up. However, it is going to worth it! First, you should create partials for the header and the footer in layous/partials. Copy all the heade staff in header.html and the footer stuff in footer.html. Now replace the header and footer parts of your index.html with te following codes: