Goodbye WordPress, Hello Hugo

This post is an adaptation of the readme file found here

After many (neglected) years of hosting a WordPress blog, I decided it was time for a change.

There were many reasons for leaving WordPress including:

  • The cost of website hosting $$$
  • WordPress always needed updates and (high) maintenance
  • WordPress templates look dated
  • My site wasn't under source control
  • I don't blog enough to require a full-blown CMS

How did I say goodbye to WordPress?

  • I created a GitHub repository which includes free hosting from GitHub pages mttyd.github.io
  • Hugo framework was used to generate static pages instead of using a database driven CMS. Pages are written in simple markdown instead of HTML
  • I converted my WP site to Hugo using the WordPress-to-hugo wp plugin (converter did 40% of the job)
  • After cleaning up my posts and removing stale content, I had a fully functional site/blog

set the path  

Building your site using my template

If you aren't using an editor like Visual Studio Code and you are unfamiliar with programming, this guide may prove difficult (it's brief). You may want to focus on the links at the bottom of the page and then use this post as a quick-start guide. Cloning my github repository may be the simplest method since it is already a functional site.

  • First, install Hugo using the getting-started page here
    • I am on Windows so from an admin PowerShell prompt I typed choco install hugo -confirm
  • Next use one of the following methods:

Create a new Hugo site

  • After installing Hugo create a project folder and from there run hugo new site sitename.com sitename being the name of your page
  • You will need to select a Hugo theme to use. I picked Hugo Academic
  • For other steps follow the links above

Clone my repository

  • Clone my repository and remove my stuff
  • From the root repository folder run npm install (Get NPM here)
  • Modify the base location and publish directory in /config/config.toml
  • Change the admin profile to your info /content/authors/admin/_index.md
  • Each section of the site lives in self-descriptive folders
    • courses
    • home
    • post
    • project
    • publication
    • slides
    • task
  • Some of the sections are disabled but if you want to turn them back on, set the “active” attribute at the top of each page = true for each file in the /content/home folder
  • Posts are all contained in their own /content/post/(post name folder) and each post page is named index.md
  • The featured.jpg file in each post will be the featured image throughout the site. make sure your images are 600px x 500px or they may get distorted

To run a test server

  • From the console in the root of your project type hugo serve
  • This will start a local development server that you can view in a browser at http://localhost:1313

To generate static pages

in a terminal in the root directory of the project type hugo this will build the static pages in the folder that was specified in your /config/config.toml file

Hosting your site on GitHub pages

  • Create a GitHub repository named (yourgithubusername).github.io
  • Copy the contents of your static pages directory to this repository
  • Your site will now be available on http://(yourgithubusername).github.io

Managing your site

I decided to create two GitHub repositories, one for my code and one for the static pages. Without making things more complex, I commit and push to both of them depending on what I want to update.

Resources:

Matt Detwiler
Director, IT Operations

My interests include IT leadership/mentoring, business systems, software development, gadgets, gaming, and the great outdoors. I love networking, click my contact link and let's do coffee!