Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Migrate from WordPress to Hugo, Step by Step

Name: Migrate from WordPress to Hugo, Step by Step
Rating: 4.5 (181 reviews)

Get a handle on Hugo, the world's fastest static site generator, as we migrate from WordPress to a shiny new Hugo site

Created byTy Walls

Last updated 5/2021

English

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.

Course content

11 sections • 96 lectures • 6h 4m total length

Hugo to the Rescue!1:12
To set the stage for the course, let's get a humorous glimpse into how Hugo will rescue you from the clutches of WordPress
Hugo - The Origin Story8:02
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.
Is Hugo the best fit for your site?2:50
Determine whether or not Hugo is the best choice for your site
Course prerequisites1:08
Learn what you need to succeed in this course
Recap and what's next1:24

Section introduction1:07
Install Chocolatey package manager (Windows only)1:41
Install the Chocolatey package manager on Windows
Install Hugo4:48
Install Hugo using the Chocolatey package manager, or install the executable from scratch.
Install Visual Studio Code and extensions8:26
Install Visual Studio Code and some useful extensions for working with Hugo projects
Code Spell Checker
Markdownlint
EditorConfig
Better TOML
Installing Git1:41
Install Git manually or using the Chocolatey package manager.
Learning Git5:55
Understand Git version control at a high level, including these essential commands:
git status
git add .
git commit -m "some message"
git clone
git push
git pull
Install posh-git (Windows, optional)3:06
Understand and install posh-git, a tool to make it easier to work with Git on the command line.
Install Node.js2:24
Install 7-zip (Windows only)1:12
Install 7-zip so that Windows users can open various types of file archives, just as .zip, .7z, .tar.gz, etc.
Recap and what's next0:33

Section introduction0:38
Meet GitLab0:46
Create a GitLab account0:54
Create a new private repo on Gitlab1:44
Learn how to create a new Git repository on GitLab, for the purposes of hosing our new Hugo site.
Setup your SSH keys3:40
Understand what public and private SSH keys are for and setup SSH keys for interacting with your GitLab repo from the command line.
Clone the repo on your machine2:06
Clone the Git repository you created in Gitlab on your machine.
Sidebar: Hey, what about GitHub?4:27
Learn the essential differences between GitHub and GitLab, and why I chose GitLab for this course.
Recap and what's next0:42

Section introduction0:45
Create a new Hugo site with "hugo new site"3:22
Create a new bare-bones Hugo site using the hugo new site command and understand the basic directory structure of a Hugo site.
Baby Steps: save your work with git commit2:43
Frequently save your work with git commit and back it up to GitLab using git push.
Add .editorconfig for consistent file formatting2:34
Add an .editorconfig file to your Hugo project to help ensure consistent formatting across all files.
.gitignore: telling files to "talk to the hand"3:27
Add .gitignore file so that Git won't track unnecessary files. Also learn how to commit and push to GitLab within Visual Studio Code.
Recap and what's next0:50

Section introduction0:46
Why do I need a new theme?0:42
Understand why it just might be better to choose a new Hugo theme instead of attempting to migrate your current WordPress theme.
Choosing a Hugo theme5:39
Systematically choose a good Hugo theme by weighing the pros and cons of themes that grab your attention.
Install your new Hugo theme6:18
Discover various methods of installing your chosen Hugo theme to your new site.
Configure the theme using the config.toml file4:33
Configure a theme for use on your Hugo site by editing your config.toml file. Make sure it works using hugo server.
Discovering "front matter"1:58
Begin to understand the concept of "front matter" and how it affects posts and pages in a Hugo site.
Recap and what's next1:06

Section introduction0:40
Meet "markdown", the easiest way to format text3:32
Understand how to format text with text using the markdown "language".
Create a new post with Hugo4:13
Create a new post with Hugo, edit the front matter, and add some content.
Live site preview with the Hugo server2:24
Use Hugo's built-in server to view changes to your site as soon you make them.
Add a picture with {{ figure }}2:26
Add an image to your new post with Hugo's flexible figure shortcode.
Unleash your draft post0:55
When you love a draft post, set it free.
Alternative: Create a new post as a "page bundle"3:14
Learn an alternate way to bundle posts and images together. It's known as... page bundles.
Recap and what's next0:57

Section introduction1:27
Migrate a single post3:20
It's time to manually migrate a single post from your old WordPress to your slick new Hugo site.
Preserve your post metadata5:12
Preseve metadata from your WordPress posts such as posting date, categories, and tags.
Migrate post images7:32
Moving images from WordPress to Hugo can be really easy with the help of a WordPress plugin.
Alternative: Migrate post images as a page bundle4:58
Use the alternate page bundles method to migrate post images.
Clean up your markdown6:46
Optionally clean up the markdown of your migrated posts by replacing HTML code with its equivalent in markdown.
Migrate the About page3:39
Recap and what's next0:48

Section introduction1:26
Configure CI/CD with a .gitlab-ci.yml file4:50
Understand the basic function and parts of the .gitlab-ci.yml file, then add one to your Hugo project.
Watch your site build in the "CI pipeline"2:45
Understand the layout and output of GitLab's CI Pipeline interface as it builds your Hugo site.
Viewing your deployed site (404 not found?)9:18
View your site as deployed on GitLab Pages, and troubleshoot a "404 not found" issue.
My site has no style! Troubleshoot locally with http-server4:27
Troubleshoot the source of a styling issue issue locally using NPM's http-server, then fix it.
Configure a custom domain name10:21
Configure your GitLab Pages site to use a custom domain and redirect www to the naked domain
Recap and what's next0:57

Section introduction0:56
Meet Netlify2:10
Meet Netlify and learn what it brings to the table, including features that make it a more robust choice than GitLab Pages.
A note about security1:16
A word to the wise: Linking Netlify to your GitLab account may undermine your site security...
How much will Netlify cost?3:56
At first glance, Netlify seems free. When do you start paying, and how much cash should you expect to fork over?
Create a Netlify account and explore2:50
Create a Netlify account and familiarize yourself with the Netlify dashboard.
Link GitLab repo to Netlify2:18
Learn how to link your GitLab repository to Netlify so that Netlify can build your site every time you push ti GitLab.
Deploy the site to Netlify!2:47
See how to deploy your Hugo site on Netlify, and just how quickly it does it!
Configure a custom domain name with Netlify6:28
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.
Make use of automatic deploy previews for merge requests10:16
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.
Get more control with netlify.toml5:12
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.
Configure branch-specific deploy settings6:40
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.
Get notified of deployment events and Netlify outages3:01
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.
Section recap1:33

Section introduction0:42
What’s so great about a CMS?1:50
Why would you want to add a CMS to a Hugo site anyway?
Meet Netlify CMS3:33
What's it like working with Netlify CMS, how does it work, and what does it cost?
Add Netlify CMS to your site9:22
Configure a Hugo site to work with Netlify CMS
Configuring "Collections"7:37
Use Netlify's config.yml to tell Netlify how your front matter is laid out.
Enable "Identity" and "Git-Gateway"6:54
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.
Add a new post with Netlify CMS4:38
Add and edit a new post using Netlify CMS, including adding an image.
Customize Netlify CMS (a little bit)5:57
Hey, what about Forestry.io?2:39
Learn the basic differences between Netlify CMS and Forestry.io, and why I chose to demo Netlify CMS instead of Forestry.io.
Section recap1:37

Requirements

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.

Description

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: Some of the earlier course content is out of date, because Hugo has continued to advance since I started creating this course a few years ago. There is still a TON of great content here, but a little "elbow grease" may be required to get things working on your machine.

NOTE2: I don't have time to finish and update this course. :'( If you are an experienced course content creator and would like to take over the superhero cape, reach out to me on LinkedIn.

Background:

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.

Migrate from WordPress to Hugo, Step by Step

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 15min

Set up your tools10 lectures • 31min

Groundwork: Configure repository on GitLab8 lectures • 15min

Build a new Hugo site to move into6 lectures • 14min

Choose and configure a theme7 lectures • 21min

Write a new post with Hugo8 lectures • 18min

Manually move posts and pages from WordPress to Hugo8 lectures • 34min

Deploy site with GitLab Pages7 lectures • 34min

Deploy site with Netlify (robust alternative to GitLab Pages)13 lectures • 49min

Edit content easier with a CMS10 lectures • 45min

Requirements

Description

Who this course is for: