Pre-requisities
- Access to WordPress dashboard.
- Basic understanding of using command line.
- Site generator (my choice Hugo).
- Theme for the static site (my choice PaperMod).
- CloudFlare account (Free hosting on CloudFlare Pages).
1. Export WordPress to XML
The first step would be to generate an XML file which is basically in the format of WordPress eXtended RSS (WXR) and contains all the data (posts, pages, comments etc). To do this:
- Login to you WordPress dashboard » Tools » Export.
- Choose “All content” for “Choose what to export”.
- Click on “Download Export File” and save it to a location on your computer.
2. Install package - wordpress-export-to-markdown
We would be using a tool called wordpress-export-to-markdown.
- This tool is built using Node.js so you would have to install it if not already installed.
- Once done clone the above repo.
- Navigate into the cloned repository directory.
- Copy the file exported from WordPress into this directory.
- Run
npm install && node index.js. - Do note that the tool offers a lot of options, see the tool’s documentation for details.
- I went with the default options, which meant:
- All posts got it’s own folder, the folder name being the posts slug.
- There was an ‘index.md’ created inside this folder which had all the post content in markdown format.
- Images were downloaded and stored under images sub-directory of each posts folder.
3. Install Hugo and setup the blog
The next step is to install Hugo and do all the required setups to get the blog running locally.
- Install Hugo by following the documentation at https://gohugo.io/getting-started/installing/
- Choose a theme and follow its instructions on how to get it setup. I went with the theme PaperMod and its installation instruction are at https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-installation/
- The next step is to move all the folders generated in step 2 above in
content > postsfolder. - Configure `config.yml' as per your need, this has basic configs like your site name, url, description and some theme level configurations as well.
- To see the site in action, run
hugo server, this will run the site in localhost.
4. Deploy
The next step can take various forms, but for this site I initially went with Commit to Bitbucket > Pipeline Build > S3 deploy > CloudFront. Then as I looked further I found CloudFlare Pages, since my site was already using CloudFlare for DNS and basic CDN for over 10 years now, I read about it further and saw that it was very easy to configure and the free plan is very flexible. So I went with CloudFlare Pages, the only drawback was I had to move from BitBucket to Github as it supports only Github and Gitlab for now for the automated builds.
- Create a repo in Github.
- Commit and push all your changes to the repo.
- Login into CloudFlare dashboard and follow the steps mentioned at https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site#deploying-with-cloudflare-pages
- Take care to set a proper version of Hugo which needs to be used for the build (See https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site#using-a-specific-hugo-version)
- Once the setup is complete, just push any changes to the repo and build will automatically happen.
The main drawback with CloudFlare pages at the moment is that it would take about 4-5 minutes to do a build. Other than that the amount of features they provide on a free plan is note worthy.
So that’s how I migrated from WordPress to Hugo and setup a static site. I also use Disqus for comments, but that is pretty straight forward process. If you have any questions, do let me know through the comments below.