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:

1. Convert WordPress into static website
2. 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

Go to your WordPress and install Simply Static plugin. Export your WordPress website using “Save for offline use” option. Download the zip file.

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:

{{ partial "header.html" . }}
<!-- the main part of the page -->
{{ partial "footer.html" . }}

Check localhost in your browser to make sure everything is working fine

4. Create Page Templates

You would also need to create page templates for your single pages and optionally a list page to list your blog posts. Here is an example of your single.html template:

{{ partial "header.html" . }}
{{ .Content }}
{{ partial "footer.html" . }}

If you need more support setting up page templates, please check the official documetation on the subject: https://gohugo.io/templates/single-page-templates/

5. Create markdown files for your posts and pages

For example if you have an about page at static/about/index.html, you can now create content/about.md. You can actually copy the html straight to about.md. Continue the process for the blog posts.

6. Add new content

At this point, when you add a new markdown page to content and run hugo, the new content should be generated correctly.