Migrate from WordPress to Hugo, Step by Step
4.6 (25 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.
140 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
Highest Rated
4.6 (25 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.
140 students enrolled
Created by Ty Walls
Last updated 1/2019
English
English
Current price: $19.99 Original price: $99.99 Discount: 80% off
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ 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.
  • Determine whether or not Hugo will work for your website or blog.

  • Understand how to use Hugo to easily post content to your blog

  • (COMING SOON) Discover Hugo alternatives for your favorite WordPress features and plugins.
  • (IN PROGRESS) Understand various hosting options for your site and how to configure each one.
Course content
Expand all 72 lectures 03:50:39
+ 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
01:07

Install the Chocolatey package manager on Windows

Install Chocolatey package manager (Windows only)
01:41

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

Install Hugo
04:48

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
08:26

Install Git manually or using the Chocolatey package manager.

Installing Git
01:41

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
05:55

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

Install posh-git (Windows, optional)
03:06
Install Node.js
02:24

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)
01:12
Recap and what's next
00:33
+ Groundwork: Configure repository on GitLab
8 lectures 14:57
Section introduction
00:38
Meet GitLab
00:46
Create a GitLab account
00:54

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
01:44

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
03:40

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

Clone the repo on your machine
02:06

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

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

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"
03:22

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

Baby Steps: save your work with git commit
02:43

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

Add .editorconfig for consistent file formatting
02:34

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"
03:27
Recap and what's next
00:50
+ Choose and configure a theme
7 lectures 21:02
Section introduction
00:46

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?
00:42

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

Choosing a Hugo theme
05:39

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

Install your new Hugo theme
06:18

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
04:33

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

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

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

Meet "markdown", the easiest way to format text
03:32

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

Create a new post with Hugo
04:13

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

Live site preview with the Hugo server
02:24

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

Add a picture with {‌{ figure }}
02:26

When you love a draft post, set it free.

Unleash your draft post
00:55

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"
03:14
Recap and what's next
00:57
+ Manually move posts and pages from WordPress to Hugo
8 lectures 33:42
Section introduction
01:27

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

Migrate a single post
03:20

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

Preserve your post metadata
05:12

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

Migrate post images
07:32

Use the alternate page bundles method to migrate post images.

Alternative: Migrate post images as a page bundle
04:58

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

Clean up your markdown
06:46
Migrate the About page
03:39
Recap and what's next
00:48
+ Deploy site with GitLab Pages
7 lectures 34:04
Section introduction
01:26

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
04:50

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"
02:45

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

Viewing your deployed site (404 not found?)
09:18

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
04:27

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

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

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

Meet Netlify
02:10

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

A note about security
01:16

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?
03:56

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

Create a Netlify account and explore
02:50

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
02:18

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

Deploy the site to Netlify!
02:47

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
06:28

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
10:16

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
05:12

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
06:40

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
03:01
Section recap
01:33
Requirements
  • An existing WordPress site to migrate to Hugo.
  • An internet-connected computer running Windows, Mac, or Linux.
  • Basic coding skills are helpful, 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: 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.

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? (Coming)

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

  • What about advanced plugins for minification, caching, etc? (Coming)

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

Who this course is for:
  • 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.