Migrate from WordPress to Hugo, Step by Step
4.4 (71 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
505 students enrolled

Migrate from WordPress to Hugo, Step by Step

Leave behind the slow, insecure, and expensive confines of Wordpress for Hugo, the world's fastest static site generator
4.4 (71 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
505 students enrolled
Created by Ty Walls
Last updated 7/2020
Current price: $12.99 Original price: $24.99 Discount: 48% off
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Migrate a blog from the WordPress platform to an ultra-fast website using the Hugo static site generator.
  • Leverage your HTML/CSS skills to create custom Hugo themes.
  • Learn Hugo as you go!
  • Determine whether or not Hugo will work for your website or blog.
  • Understand how to use Hugo to easily post content to your blog.
  • Understand some solid hosting options for your site and how to configure each one.
  • (COMING SOON) Discover Hugo alternatives for your favorite WordPress features and plugins.
Course content
Expand all 94 lectures 05:48:04
+ Introduction
5 lectures 14:36

To set the stage for the course, let's get a humorous glimpse into how Hugo will rescue you from the clutches of WordPress

Preview 01:12

Hugo is the "world's fastest static site generator." Understand the difference between static and dynamic sites, and the implications in terms of security, performance, and hosting costs.

Preview 08:02

Determine whether or not Hugo is the best choice for your site

Preview 02:50

Learn what you need to succeed in this course

Preview 01:08
+ Set up your tools
10 lectures 30:53
Section introduction

Install the Chocolatey package manager on Windows

Install Chocolatey package manager (Windows only)

Install Hugo using the Chocolatey package manager, or install the executable from scratch.

Install Hugo

Install Visual Studio Code and some useful extensions for working with Hugo projects

  • Code Spell Checker

  • Markdownlint

  • EditorConfig

  • Better TOML

Install Visual Studio Code and extensions

Install Git manually or using the Chocolatey package manager.

Installing Git

Understand Git version control at a high level, including these essential commands:

  1. git status

  2. git add .

  3. git commit -m "some message"

  4. git clone

  5. git push

  6. git pull

Learning Git

Understand and install posh-git, a tool to make it easier to work with Git on the command line.

Install posh-git (Windows, optional)
Install Node.js

Install 7-zip so that Windows users can open various types of file archives, just as .zip, .7z, .tar.gz, etc.

Install 7-zip (Windows only)
Recap and what's next
+ Groundwork: Configure repository on GitLab
8 lectures 14:57
Section introduction
Meet GitLab
Create a GitLab account

Learn how to create a new Git repository on GitLab, for the purposes of hosing our new Hugo site.

Create a new private repo on Gitlab

Understand what public and private SSH keys are for and setup SSH keys for interacting with your GitLab repo from the command line.

Setup your SSH keys

Clone the Git repository you created in Gitlab on your machine.

Clone the repo on your machine

Learn the essential differences between GitHub and GitLab, and why I chose GitLab for this course.

Sidebar: Hey, what about GitHub?
Recap and what's next
+ Build a new Hugo site to move into
6 lectures 13:41
Section introduction

Create a new bare-bones Hugo site using the hugo new site command and understand the basic directory structure of a Hugo site.

Create a new Hugo site with "hugo new site"

Frequently save your work with git commit and back it up to GitLab using git push.

Baby Steps: save your work with git commit

Add an .editorconfig file to your Hugo project to help ensure consistent formatting across all files.

Add .editorconfig for consistent file formatting

Add .gitignore file so that Git won't track unnecessary files. Also learn how to commit and push to GitLab within Visual Studio Code.

.gitignore: telling files to "talk to the hand"
Recap and what's next
+ Choose and configure a theme
7 lectures 21:02
Section introduction

Understand why it just might be better to choose a new Hugo theme instead of attempting to migrate your current WordPress theme.

Why do I need a new theme?

Systematically choose a good Hugo theme by weighing the pros and cons of themes that grab your attention.

Choosing a Hugo theme

Discover various methods of installing your chosen Hugo theme to your new site.

Install your new Hugo theme

Configure a theme for use on your Hugo site by editing your config.toml file. Make sure it works using hugo server.

Configure the theme using the config.toml file

Begin to understand the concept of "front matter" and how it affects posts and pages in a Hugo site.

Discovering "front matter"
Recap and what's next
+ Write a new post with Hugo
8 lectures 18:21
Section introduction

Understand how to format text with text using the markdown "language".

Meet "markdown", the easiest way to format text

Create a new post with Hugo, edit the front matter, and add some content.

Create a new post with Hugo

Use Hugo's built-in server to view changes to your site as soon you make them.

Live site preview with the Hugo server

Add an image to your new post with Hugo's flexible figure shortcode.

Add a picture with {‌{ figure }}

When you love a draft post, set it free.

Unleash your draft post

Learn an alternate way to bundle posts and images together. It's known as... page bundles.

Alternative: Create a new post as a "page bundle"
Recap and what's next
+ Manually move posts and pages from WordPress to Hugo
8 lectures 33:42
Section introduction

It's time to manually migrate a single post from your old WordPress to your slick new Hugo site.

Migrate a single post

Preseve metadata from your WordPress posts such as posting date, categories, and tags.

Preserve your post metadata

Moving images from WordPress to Hugo can be really easy with the help of a WordPress plugin.

Migrate post images

Use the alternate page bundles method to migrate post images.

Alternative: Migrate post images as a page bundle

Optionally clean up the markdown of your migrated posts by replacing HTML code with its equivalent in markdown.

Clean up your markdown
Migrate the About page
Recap and what's next
+ Deploy site with GitLab Pages
7 lectures 34:04
Section introduction

Understand the basic function and parts of the .gitlab-ci.yml file, then add one to your Hugo project.

Configure CI/CD with a .gitlab-ci.yml file

Understand the layout and output of GitLab's CI Pipeline interface as it builds your Hugo site.

Watch your site build in the "CI pipeline"

View your site as deployed on GitLab Pages, and troubleshoot a "404 not found" issue.

Viewing your deployed site (404 not found?)

Troubleshoot the source of a styling issue issue locally using NPM's http-server, then fix it.

My site has no style! Troubleshoot locally with http-server

Configure your GitLab Pages site to use a custom domain and redirect www to the naked domain

Configure a custom domain name
Recap and what's next
+ Deploy site with Netlify (robust alternative to GitLab Pages)
13 lectures 49:23
Section introduction

Meet Netlify and learn what it brings to the table, including features that make it a more robust choice than GitLab Pages.

Meet Netlify

A word to the wise: Linking Netlify to your GitLab account may undermine your site security...

A note about security

At first glance, Netlify seems free. When do you start paying, and how much cash should you expect to fork over?

How much will Netlify cost?

Create a Netlify account and familiarize yourself with the Netlify dashboard.

Create a Netlify account and explore

Learn how to link your GitLab repository to Netlify so that Netlify can build your site every time you push ti GitLab.

Link GitLab repo to Netlify

See how to deploy your Hugo site on Netlify, and just how quickly it does it!

Deploy the site to Netlify!

Configure a custom domain name using Netlify's managed DNS service.

*Netlify's DNS service is currently in beta (Jan 2019) , so you'll notice there are a few hiccups getting it set up. Expect Netlify to iron out the kinks.

Configure a custom domain name with Netlify

Learn how Netlify's automatic deploy previews for merge requests can integrate nicely into your workflow.

Warning: Drink your coffee. This lesson is jam-packed. Includes sidebars and information on:

  • Git branches

  • Updating Git submodules to the latest version

  • How the example theme enables CSS customization

  • Synchronizing your local Git repo after accepting a merge request in GitLab.

Make use of automatic deploy previews for merge requests

Adding a netlify.toml  file gives you more control over how Netlify builds and deploys your site. Learn how to add one, and how to use properties like base to tell Netlify where to find your Hugo site.

Get more control with netlify.toml

You saw how Netlify creates deploy previews for merge requests. With a little configuration, it's possible to enable deploy previews for specific branches as well. And, each branch can have its own build settings as well! ?

Learn how to set this up, and even how to enable draft posts for this branch preview.

Configure branch-specific deploy settings

Get notified of deployment events, such as when a build succeeds or fails. Learn how to check Netlify's operational status, and even receive mobile alerts if there is an outage.

Get notified of deployment events and Netlify outages
Section recap
+ Edit content easier with a CMS
10 lectures 44:49
Section introduction

Why would you want to add a CMS to a Hugo site anyway?

What’s so great about a CMS?

What's it like working with Netlify CMS, how does it work, and what does it cost?

Meet Netlify CMS

Configure a Hugo site to work with Netlify CMS

Add Netlify CMS to your site

Use Netlify's config.yml to tell Netlify how your front matter is laid out.

Configuring "Collections"

We finally get Netlify CMS up and running after configuring Netlify's Identity and Git-Gateway services. You also get to see me mess up, learning valuable troubleshooting lessons in the process.

Enable "Identity" and "Git-Gateway"

Add and edit a new post using Netlify CMS, including adding an image.

Add a new post with Netlify CMS
Customize Netlify CMS (a little bit)

Learn the basic differences between Netlify CMS and Forestry.io, and why I chose to demo Netlify CMS instead of Forestry.io.

Hey, what about Forestry.io?
Section recap
  • An internet-connected computer running Windows, Mac, or Linux.
  • Basic coding skills are recommended if you plan on building a Hugo theme.
  • Basic familiarity with the command line is recommended, though not strictly necessary.

Hugo is a super fast static site generator that's here to save you time and make your site fast, secure, and inexpensive to host. There's just one catch, your current website is already on WordPress™. This course will guide you through safely migrating your site and your workflow from WordPress to Hugo.

NOTE: This is an EARLY BIRD version of the course.  The initial offering walks you through migrating a basic site, such as a blog. New content will be added to help you migrate more complicated WP sites to Hugo.


WordPress is the most popular website management system in the world. And with good reason: it's easy to get up and running, and there is a rich ecosystem of beautiful themes and feature-enhancing plugins. 

However, (queue the eerie mood music), WordPress has is faults...

  • Every year, security vulnerabilities are discovered in WordPress and its underlying programming language, PHP.

  • Content is served dynamically, so site performance suffers. Getting a solid PageSpeed ranking requires lots of of time, plugins, and hacks.

  • Good hosting options can be quite expensive.

  • Its database back-end limits hosting options and complicates backup and recovery.

But here's a secret you probably already know: Today, the vast majority of sites don't need to be on WordPress. Most sites serve static, or unchanging, content. For example, I'm doing good if I can publish to my blog once a month or so. So why was I using a Content Management System (CMS) like WordPress? In my case, I didn't want to have to write my posts as HTML, upload them over FTP, update index pages to include my new post, manually add pagination, headers, footers, format images, etc. WordPress automated all of this. For the most part, all I had to do was focus on the content; WordPress took care of the rest. It was glorious!

That was the early 2000s. Nowadays we have static site generators like Hugo! With Hugo, I just write my blog post. Then Hugo generates my entire site, including all of those updated links, headers, footers, even a sitemap. And get this: it does it in about 1 second. Then, with a single command I can push my updated site to a service like Netlify, and my new post is live within a few minutes.

With Hugo, you get:

  • Ultra-fast site generation

  • Free hosting options

  • More security because there is no database or run-time to hack

  • Static pages are faster to serve and easy to cache. A faster site means better SEO.

  • Backups are essentially unnecessary if you store your repo on GitHub or GitLab.

  • Change tracking comes for free if you store your site in a Git repo.

Of course, for long-time WordPress users like myself, a number of questions come up:

  • What about my SEO plugin (yoast)? (Coming)

  • What about my syntax highlighting plugin (for tech blogs)? (Coming)

  • What about my comments!? (Coming)

  • What about my cool theme? Can I port it Hugo? (In progress)

  • What about help with spelling, grammar, writing style? (Coming)

  • What about advanced plugins for asset bundling, minification, etc? (In progress)

Learn all this and more with this comprehensive course. Enjoy!

Who this course is for:
  • Web developers interested in learning Hugo
  • Anyone with a slow WordPress site looking for greatly increased performance and enhanced SEO.
  • Anyone tired of constantly patching WordPress' security vulnerabilities.
  • Anyone looking for free (or extremely low-cost) hosting options for their website.