Reference material for the course, Migrating WordPress to Hugo, Step by Step.

Official Hugo site: https://gohugo.io

Google uses site speed in web search ranking: https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

WP Engine costs: https://wpengine.com/plans/

Jekyll: https://jekyllrb.com/

Hexo: https://hexo.io/

My Hugo-based blog: https://tygertec.com

Disqus: https://disqus.com/

Shopify: https://www.shopify.com/

Windows PowerShell basics: https://docs.microsoft.com/en-us/powershell/scripting/getting-started/fundamental/windows-powershell-basics?view=powershell-6

Mac/Linux Bash scripting basics: https://ryanstutorials.net/bash-scripting-tutorial/

Site: https://chocolatey.org/install

Make sure it works: choco

*Don’t forget to run choco commands as an administrator.

Attribution:

• “chocolatey” logo by Julian Krispel-Samsel

• Windows: choco install hugo
• macOS: brew install hugo
• Ubuntu Linux: sudo apt-get install hugo

More complex installs: https://gohugo.io/getting-started/installing

https://code.visualstudio.com/

• Windows: choco install visualstudiocode
• Alternate/Manual: https://code.visualstudio.com/download

Extensions

• Code Spell Checker
• Markdownlint
• Better TOML

EditorConfig

• About EditorConfig
• EditorConfig extension for VS Code

Recommended .editorconfig for Hugo sites: https://gist.github.com/tygerbytes/2773f928bb5202669e14210d2b79c488

Windows

Using Chocolatey: choco install git

Manual: https://git-scm.com/downloads

Mac

Using Brew: brew install git

Manual: https://git-scm.com/download/mac

Linux (Debian-based)

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git

Linux (Red Hat-based)

sudo yum upgrade
sudo yum install git

Basic Git commands:

• git status
• git add .
• git commit -m “some message”
• git clone
• git push
• git pull

Learning more about Git: https://try.github.io/

Helpful VS Code extension, GitLens: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Official site: https://github.com/dahlbyk/posh-git

Port to Bash: https://github.com/lyze/posh-git-sh

GitKraken: https://www.gitkraken.com/

Installing on Windows

choco install poshgit

Windows

choco install nodejs
choco upgrade nodejs

For a manual install or other platforms, visit: https://nodejs.org/en/download/

Windows

choco install 7zip
choco upgrade 7zip

For a manual install, go to https://www.7-zip.org/

GitLab: https://www.gitlab.com

http://gitlab.com

ssh-keygen -t rsa -C "your.email@example.com" -b 4096
cat ~/.ssh/id_rsa.pub | clip

More information: https://docs.gitlab.com/ee/ssh/README.html

Commands we used in the lecture:

mkdir demo
cd demo
git clone git@gitlab.com:youraccount/your-repo.git

Places we visited in this lecture

• Travis CI
• DevOps Lifecycle
• GitHub Pricing
• GitLab Pricing

Sample .editorconfig file

Yes, this is the same as the one referenced under Tools

• Full: https://gist.github.com/tygerbytes/2773f928bb5202669e14210d2b79c488
• Shortened: https://bit.ly/2Mh1LFy

.gitignore file generator: https://www.gitignore.io/

Hugo “theme park”: https://themes.gohugo.io/

Google Lighthouse: https://developers.google.com/web/tools/lighthouse/

Note: If you’re following along with the course, clone my fork of the theme to avoid issues.

It’s at https://github.com/tygerbytes/HugoMDL

The SSH url is: https://github.com/tygerbytes/HugoMDL.git

clone method

git clone --depth 1 https://github.com/tygerbytes/HugoMDL.git ./themes/HugoMDL

Delete the .git directory:

Windows PowerShell: rm --recurse --force .\themes\HugoMDL\.git

Mac/Linux: rm -rf ./themes/HugoMDL/.git

submodule method

git submodule add https://github.com/tygerbytes/HugoMDL.git ./themes/HugoMDL

Showing .gitignore from the command line:

cat ./.gitignore

Running hugo server: hugo server

Stopping the running server: Ctrl-C

Force most web browser’s, including Google Chrome and Firefox, to do a hard refresh: Ctrl F5

A hard refresh means that nothing is loaded from the local cache; a new request is sent to the webserver.

Essential markdown cheatsheet: https://www.tygertec.com/markdown-cheatsheet/

hugo new post/some-post.md

hugo server

Include draft posts: hugo server -D

The figure shortcode: https://gohugo.io/content-management/shortcodes/#figure

Create a post as a page bundle: hugo new post/some-post/index.md

More information: https://gohugo.io/content-management/page-bundles/

Figure shortcode again: https://gohugo.io/content-management/shortcodes/#figure

hugo new about/index.md

install http-server: npm install http-server -g

Google domains: https://domains.google

• What’s a Content delivery network (CDN)?
• Netlify features
• GitHub Pages vs Netlify
• Hosting on Netlify

• Add MFA U2F device to GitLab account

• Netlify Pricing
• Netlify add-ons pricing

• Netlify terms of service

• WP Engine bandwidth usage

• Netlify Managed DNS: https://www.netlify.com/docs/dns/
• Custom domain name on Netlify: https://www.netlify.com/docs/custom-domains/
• SSL/DNS troubleshooting: https://www.netlify.com/docs/ssl/#troubleshooting

Attribution:

• “Domain names” picture by JanBaby on pixabay

Create a new Git branch:

git checkout -b UglyTitles

Silly CSS that we add to custom.css:

.mdl-card__media h3 {
  /* I set the color to red… */
  color: red;
  /* transform the text to uppercase… */
  text-transform: uppercase;
}

/* And our client wants some goofy emoji after each title. We add:*/

.mdl-card__media h3:after {
  content: "💯🍌"
}

Update submodules:

git submodule foreach git pull

Deleting the UglyTitles branch:

git checkout master
git branch -D UglyTitles

• Netlify.toml reference

Reset Git repo to last commit:

git reset --hard
git clean -fxd

• Netlify continuous deployment: deploy contexts

Creating the branch and pushing it to GitLab:

git checkout -b draft-post-preview
git push --set-upstream origin draft-post-preview

# netlify.toml
[build]
  command = "hugo"
  publish = "public"

# Branch Deploy context: all deploys that are not from a pull/merge request or
# from the Production branch will inherit these settings.
[context.branch-deploy]
  command = "hugo -D"

# Specific branch context: all deploys from this specific branch will inherit
# these settings.
[context.draft-post-preview] # 'staging' is a branch name
  command = "hugo -D"

• Netlify CMS

• Add Netlify CMS to your site
• Netlify CMS open source project
• Sample code changes

• Netlify CMS collections
• Netlify CMS widgets

• Forestry.io
• Forestry.io pricing