I’ve been utilizing Jekyll for the past few months to build my website. Although it does a pretty good job at doing so, I’ve been taking a look at Hugo and experimenting alongside it.

I was able to replicate my website on Hugo with a better looking theme and decided to take the leap. I went ahead and migrated my posts and basic items, making sure everything was nicely organized. And so far, it works pretty good!

I’ve went ahead and archived the old site, but still host it with GitHub Pages. If you are curious, it is still accessible here.

If you are looking to migrate your Jekyll website to Hugo, fortunately, the migration process from Jekyll to Hugo is relatively straightforward.

Preparation

Install Hugo

Download the appropriate package for your system.

Create a New Hugo Site

Open your terminal or command prompt and type the following command:

1

hugo new site <your-site-name>

Migration

Copy the Content

The next step is to copy the content from your Jekyll site to your Hugo site.

Navigate to the directory of your Jekyll site and copy the following directories:

1
2
3

_posts/
_layouts/
_includes/

These directories contain your blog posts, page layouts, and includes respectively. Once you have copied these directories, you can paste them into your Hugo site’s directory.

Convert the Front Matter

The next step is to convert the front matter of your Jekyll site to the Hugo format.

The front matter is the metadata at the beginning of each file that specifies the title, author, date, and other information about the post or page.

In Hugo, the front matter is specified in YAML format.

To convert the front matter, you need to open each file in your _posts directory and change the front matter to YAML format.

For example, if your Jekyll front matter looks like this:

1
2
3
4
5

---
layout: post
title: My First Post
date: 2019-01-01 00:00:00 +0000
---

You need to convert the date or other information to the YAML format, it will look very similar, it could pretty much be copied over, you’ll just need to modify date:.

1
2
3
4
5

---
layout: post
title: My First Post
date: 2019-01-01T00:00:00Z
---

Configure the Site

The next step is to configure your Hugo site.

Hugo uses a configuration file called config.yml, which contains settings such as the site title, description, and other options.

It will look something like this:

1
2
3
4

baseURL: "/"
languageCode: "en-us"
title: "My Hugo Site"
theme: "my-theme"

You can replace the values of these options with your own preferences, as well as define other settings for your site.

Test the Site Locally

The final step is to test your Hugo site. You can do this by running the following command:

1

hugo serve

This will start a local server that you can access in your web browser at http://localhost:1313

If everything has been set up correctly, you should see your newly created Hugo site running on the local server.

Deployment & Hosting

Once you have tested your site, the final step is to deploy it.

There are several options for deploying your Hugo site, including GitHub Pages, Netlify, Cloudflare Pages, Vercel & more.

We’ll set it up on Netlify as an example, for that we’ll need to:

  • Create a new repository on GitHub with the same name as your Hugo site.
  • Push your Hugo site to the new repository using Git.
  • Setup a Netlify account and connect it to the repository in the settings.
  • Choose the branch and folder where your site is located.
  • Wait for the site to be built and deployed.

Quick Start

Check out Netlify’s quick start page to connect your GitHub repo to Netlify and launch your site in under a minute.

Once your site is deployed, you can access it using the Netlify-generated URL, which will look something like: https://<random-id>.netlify.app.

Custom Domains

If you own a custom domain, configure your DNS records with your Registrar, and check out how to assign a domain to your site

Conclusion

Migrating your Jekyll website to Hugo is a straightforward process that can be completed in a few steps.

By following the steps outlined in this article, you can quickly and easily migrate your website to Hugo and take advantage of its speed, ease of use, and flexibility.

Whether you are a seasoned web developer or a beginner, Hugo is a great choice for building fast and secure static websites.

Learn More

Learn more about migrating your site to Hugo.