As promised, here I am with a blog post about how I shifted to Hugo from Wordpress. What we’ll achieve by the end of this blog post:
- Migrating your data out of Wordpress (optional)
- Installing Hugo
- Creating a new blank Hugo website
- Importing your wordpress content into your new Hugo site (optional)
- Committing your new website to Github
- Setting up a free account with DigitalOcean and linking your GitHub website repo to DigitalOcean apps to enable automated deployments
- Setting up a custom domain for your website on DigitalOcean
Migrating your data out of Wordpress
I found the easiest way to do this is to use the WordPress Jekyll Exporter plugin. Just install this on your WordPress site, and download an export. Keep the zip file somewhere safe, we will need it later on.
Installing Hugo
Hugo is trivially simple to install. You can check the installation instructions, but it’s as simple as a brew install hugo on Mac, choco install hugo or scoop install hugo on Windows, or apt install hugo (or the equivalent) on Linux. You could run hugo version to check if everything works correctly.
Creating a new blank Hugo website
Once you’ve installed Hugo, you can follow this quick start guide from Hugo documentation. You should of course pick a theme that you like instead, and use the instructions provided in the theme to add it to Hugo.
Importing your wordpress content into your new Hugo site
For this, you need to extract the Jekyll export zip, and use Hugo’s in-built import command to import content. Once your content is imported, make sure you copy it back into your hugo site directory, and make sure the folder structures match. You’ll mostly be interested in the content and static folders.
At this point if you want, you can see how your site will look by using Hugo’s in-built web server by invoking huge server -D, and then browsing to http://localhost:1313. If some things are off, you can manually edit any of the markdown files under the content directory, and the browser page should refresh automatically.
Committing your new website to Github
Once you’re happy with the way your site looks, you can create a free public or private repo on Github and commit the entire hugo directory, and push it.
Connecting to DigitalOcean
Create a free account at DigitalOcean. You might have to deposit a minimum of $5 even while creating a new account. Once you’re in, navigate to Apps, and create a new app. Choose Github as the app source, and select your hugo repository after setting up proper access. You might have to adjust your Source Directory to make sure you’re pointing to the directory that holds Hugo’s config.toml/config.yaml. Once you select Next, a hugo website should automatically be detected. In the next screens, you don’t really have to provide any information. Once you’re app is deployed, you should get a URL pointing to your brand new website. Also, every time you make changes to your site, or add a new page or post, DigitalOcean will ensure it is built and deployed to your site automatically, as soon as it’s committed and pushed to GitHub!
Setting up a custom domain for your website on DigitalOcean
But of course we want to use our own domain for this website. For this, you can add a custom domain in DigitalOcean for your app. You have two choices. Let DigitalOcean manage your DNS, or you need to add a CNAME entry at your current DNS provider. Keep in mind, if you choose to add CNAME, and you want the root of your domain to point to your website, your DNS provider needs to support CNAME flattening. I recommend you to use CloudFlare as your DNS provider, as they’re free, have an awesome network, and do support DNS flattening. Also, if you use CloudFlare, some upcoming blog posts might also be of interest to you!