We know you are frustrated and thinking, why this long loading time to open your simple website? Why bother relying on a database to present only a few contents of your site? Don't get us wrong, because you lived in a myth for a long time. But now that you are looking beyond CMS and hunting for other options, we welcome you to the arena of Hugo.
There is no point in arguing about the massive website customization and maintenance capability of WordPress. Millions of people are using this website builder, and for a good reason. However, utilizing a database query or an extension to display simple data implies your website is consuming too many resources to complete a simple operation.
But time is of the essence, and you, as a conscious user, are not prejudiced against dynamic websites. So, this is where the Hugo framework steps in with top-notch performance and accessibility. It's a static site generator that's lightning fast, updates constantly, and provides you with complete control over your website. The intriguing fact is that you can farewell the database but still host your site online.
Since we’ve come up with a simple WordPress to Hugo migration process, you will not be overwhelmed. So, without any delay, let’s dive in.
Table Of Contents
- Benefits of using Hugo
- Things to prepare before migrating WordPress to Hugo
- How to migrate WordPress to Hugo?
- Closing thoughts on Hugo over WordPress
- FAQs
Benefits of using Hugo
The website building process is never too easy because it involves rigorous processes. But static site generator- Hugo makes the website building experience fun again. Before learning the WordPress to Hugo migration process, we will walk you through the benefits of Hugo that will clarify why this open-source framework is so reliable and what it has to offer us.
Intense Website Speed
In the current era of a technological revolution, anything slow means you are wasting money, investment, effort, and all. Since online users generally abandon a site if the loading time exceeds 3 seconds, you shouldn't overlook your site speed.
Hugo is a one-of-a-kind framework that outsmarts other websites with its blistering speed. This is because it won't need to build a page every time for each visitor. When it comes to loading your site, the framework works incredibly fast.
Powerful Content Management
Hugo was created with content managers and authors in mind, not only coders or developers. It is an ideal platform that has taken content management to the next level. With this static site generator, you can manage various content types, taxonomies, menu patterns, dynamic API-driven content, and more. The best part is that you don't need to rely on plugins or third-party dependencies to manage all the contents.
Recommended Reading - Best CMS For Hugo
Enhanced Security
Intruders may want to hack your website for various reasons. Unauthorized users can gain financial profit through traffic hijacking, anonymous advertising, authenticity spoofing, malware hosting, etc. WordPress is based on PHP, and it has a downward reputation due to its security vulnerabilities.
In WordPress, pages are built from various assets, which open a doorway for hackers to add malicious code. WordPress plugin brings the same vulnerabilities to the ecosystem. Static site generators such as Hugo, on the other hand, are largely immune to security flaws. It doesn't need much server-side functionality and is less vulnerable to hackers.
Shortcodes Applicable
Hugo’s shortcodes are secretly powering up the Markdown. Shortcodes are like a magic wand that can extend the basic functionalities of the contents and posts with your magical imagination.
Hugo honors the markdown’s simplicity, but there are moments when you feel the necessity to expand the flexibility. Hugo shortcodes will provide you with the flexibility that you need to make your theme outstanding.
Multilingual Support (i18n)
In today’s marketplace, the global expansion of websites has become necessary. This is why your site should support multiple languages or language translation features.
Since Hugo supports multiple languages, you can call Hugo a polyglot website-building framework. Hugo offers comprehensive i18n support for multi-language sites while maintaining the same simple site development experience that you will get while developing single-language sites.
Pre-Built Templates
Hugo includes built-in templates that will significantly minimize your site-building effort instantly. The template engine utilizes the GO HTML/template library. All these templates in Hugo include a sufficient amount of logic to create a static website.
Hugo templates will make your website building process hassle-free. This is because the templates include major factors such as SEO, commenting, analytics, and more. One line of code will make a massive difference to your site-building process.
Flexible Hosting and Deployment
Hugo works flexibly in every environment. It’s a cross-platform compatible framework that allows a simple setup process on macOS, Linux, Windows, and other operating systems.
Hugo generates static websites, so you can host your Hugo-based site almost anywhere. Netlify and Vercel are two well-known hosting companies, although there are many more.
SEO Optimized
Obviously, you are building your site with some sort of profit in mind. Therefore, you should be aware of all the SEO requirements and practices on your site. Without proper SEO implementation, you won’t get your desired traffic and conversion on your site.
Hugo offers the majority of SEO requirements, such as title Meta Tags. It allows you to create SEO-optimized sites without worrying about complicated settings and criteria.
Extremely Affordable
Hugo is highly affordable and less expensive compared to WordPress for various reasons. To begin with, you don't need to spend a single penny on the servers or expensive databases.
Secondly, You don’t need to invest in expensive data protection software since Hugo offers extraordinary security measures. Lastly, you can run Hugo in any environment. As a result, you may host your website on the most cost-effective platform available out there.
Things to prepare before migrating WordPress to Hugo
Before moving from WordPress to Hugo, there are a few criteria to meet. Begin with creating a project folder that will include the required tools as well as the repository.
Install the following apps / tools on your machine:
When you are done installing these tools, let’s move on directly to the conversion process.
How to Migrate WordPress to Hugo?
At this point, we will be revealing the process of WordPress to Hugo migration. It's not overwhelming, but there are a few steps that you need to follow to complete this process.
Hugo Installation
To begin with, you need to install Hugo, which is completely covered in their documentation. The Hugo binary Generates the static HTML from markdown and template files that we will be using later.
Hugo Theme Selection
While migrating from WordPress to Hugo, you might be looking for a light, super-fast, and highly customizable theme. When you’re selecting a Hugo theme for your website, you should look for the following features:
- Google page speed of the theme
- Unique Content representation
- Availability of Shortcodes
- Multilingual Feature (If your website has a global audience)
- Search Functionality
- Customizability of the theme
For this demonstration of the WordPress to Hugo migration, we’ve chosen the Bigspring theme. You can also choose your preferred free theme from themes.gohugo.io . But if you want to use a high-quality premium theme, you can visit Gethugothemes, where you will get a vast collection of remarkable premium Hugo themes.
Exporting WordPress site’s content for Hugo
Hugo utilizes the markdown files to store all its contents. So, all the information is kept in flat files. Though it takes a considerable amount of time to transit from WordPress to Hugo, there are several alternatives for moving:
- WordPress-to-hugo-exporter: It's a one-click WordPress plugin that can transform all the contents to Hugo-compatible Markdown and YAML.
- Jekyll Exporter: You can also download the Jekyll Exporter to convert your WordPress website’s posts, pages, and settings into Hugo format.
- Exitwp-for-hugo: It's a python script that effectively transforms WordPress contents (pages & posts) to Hugo format ( Markdown and YAML ) using the XML export via WordPress.
- blog2md: Yet another WordPress to Hugo migrator, which is basically a node package created to parse the .xml file. Also, it saves approved comments within the YOUR-POST-NAME-comments.md file as well as the posts.
We recommend you use the Wordpres-to-hugo-exporter plugin to complete this process. First of all, install the plugin named wordpress-to-hugo-exporter.
Though you won’t be getting the plugin in the WordPress Plugin repository or the dashboard. But you can download it from GitHub and upload it to your WordPress website to install and activate it.
- Step 1: Go to the Git repo and download a zipped version of the plugin.
- Step 2: Head back to your WordPress dashboard and then go to Plugins > Add New.
- Step 3: Click the Upload Plugin button and select the plugin's ZIP file that you downloaded earlier.
- Step 4: When the installation process is finished, Activate the plugin.
- Step 5: Go to Tools> Export to Hugo after the installation process, which might take some time to load.
If it works properly, you will be given a ZIP file with the following contents:
- All the posts and pages available on your last website
- The files that you've uploaded (/wp-content/*)
However, you may not be successful in your first attempt, which is normal. If the site you are converting is too large, the ZIP file creation process will fail. Therefore, you can try the process via CLI.
Now, you can begin with SSH into your server. If you are not aware of the SSH process, you can ask for your host’s assistance.
cd wp-content/plugins/wordpress-to-hugo-exporter-master/
php hugo-export-cli.php
This is your file!
/tmp/wp-hugo.zip
This process may also take some time to complete. At this point, the ZIP file that contains all your site's content is ready, and it's quite a useful backup that you can utilize.
$ ls -alh /tmp/wp-hugo.zip
294M Apr 10 07:25 /tmp/wp-hugo.zip
Now, you may download the file and extract it to your system’s local directory.
Fix Small Issues in Each Post
This process requires your patience since it will take a significant amount of time and effort.
Keep in mind that each post requires a lot of minor adjustments, including:
- Frontmatter fixing like image path, URLs, etc.
- Ensure that the current URL slug is the same as the old one
- Omit WordPress shortcodes or plugin dependencies and replace them with Hugo shortcodes.
- Search and replace images from the URL path and put them in the relative path.
- Find and replace character strings created by escape characters
(_, *, [, -, <_, _)that are random. - Use a lot of regexes to find inter-blog links, bold texts, underlined text, strike-through text, etc.
Exploring The Exported WordPress Data
In WordPress, a specific folder structure remains intact even if you export it. Therefore, if you unzip the exported file, you will get the following folder structure:
config.yaml
posts/
_2020-04-01-post-1.md
_ 2020-04-02-post-2.md
_2020-04-03-post-3.md
about/
_ index.md
wp-content/
_uploads/
_ 2020/
_ 2021/
As you can see, the unzipped file includes config.yaml, which contains your website's metadata. The metadata contains data such as title, description, etc. Moreover, the exported folder contains all the posts and pages of the WordPress site.
Make sure that all the data are exported properly, and then start using the data in the Hugo environment.
Using WordPress Website’s Data in Hugo Environment
You may utilize your WordPress website’s data in the Hugo environment by following our mentioned steps.
Step 1: Create a new Hugo project
hugo new site sitename
cd sitename
Step 2: When you are ready with your new Hugo website, copy all the previously exported data into it.
cp -r /path/to/hugo-export/ content/
You may copy the folders from the exported file into the "content" directory of Hugo. The final output should look like this:
archetypes/
content/
posts/
_2020-04-01-post-1.md
_ 2020-04-02-post-2.md
_2020-04-03-post-3.md
about/
_ index.md
wp-content/
_uploads/
_ 2020/
_ 2021/
data/
themes/
layouts/
config.toml
[...]
Step 3: You can choose and apply your preferred theme on Hugo and then observe for testing purposes. So, we will show you the easiest way of applying the Hugo theme to your migrated website.
- Download the BigSpring theme in your local directory. You can get the free theme from the GitHub repository or get the premium theme from the official site.
- After downloading the theme file, unzip the file in your local directory. Now rename the folder from bigspring-light-master to bigspring-light.
- Now, you need to copy the bigspring-light folder and go to your Hugo project folder. Then paste the downloaded theme into the Theme folder located in your project folder.
- If you have the premium theme, extract the file, get inside the downloaded theme folder, copy the Themes folder, and paste it inside the project folder you’ve created.
- You will get config.toml file inside the Bigspring (both free & pro) theme folder. You need to edit the file and change the theme name inside the file as theme = “bigspring-hugo.”
That’s it, and now your site is ready to get launched in the Hugo environment using the Bigspirng theme.
Step 4: Since the last command will start a local Hugo server, you can browse it to view the site in Hugo.
You’ve successfully transferred all the data of your WordPress website to the Hugo platform. Now you can customize an existing theme or create an excellent theme from scratch on this amazing platform.
Closing thoughts on Hugo over WordPress
Now that you know the complete WordPress to Hugo migration process, you can enjoy this super fast website-crafting framework with all your previous content. But keep in mind that there is always room for improvement, even if you’ve built your site in Hugo. You may also use your imagination to develop your own theme and then move your WordPress content into it.
FAQs
How hard is it to Migrate from WordPress to Hugo?
The migration process from WordPress to Hugo is not complex at all. It should take a few hours to migrate from WordPress to Hugo and create a fully functional website. But there are some preparatory before beginning and sequential steps that would take a few hours to a day, depending on how complex and big your current website is.
Why should I consider migrating from WordPress to Hugo?
You will get a massive performance boost in Hugo compared to WordPress. Also, Hugo helps you to worry less about complex runtimes, dependencies, or databases.
Is Hugo easier than WordPress?
Compared to Hugo, the learning curve in WordPress is much steeper. Hugo is relatively light and simple to set up, unlike WordPress is notoriously difficult to set up. Also, you must use several plugins to activate multiple functionalities in your WordPress site. On the other hand, Hugo allows you to create multifunctional and feature-rich websites without any plugins or third-party services.
Is Hugo faster than WordPress?
Hugo distinguished itself by being the quickest tool in its genre. It has proven itself to be much faster than WordPress. The typical site loads in less than a second (< 1 ms per web page). Whereas, it takes around 2-3 seconds to load a WordPress site or webpage.
Recommend Reading - 100+ Best Hugo Themes (Hand-Picked For 2022)