Blog migration to Hugo

Hello from Hugo! I decided to retire my current blog, which runs on Ghost. Having a static site seems much more suited to my needs, and doesn’t have a monthly hosting cost, thanks to static hosting.

As part of the migration, I seeded my new blog with a few not-completely-outdated posts from the past. Migration from Ghost isn’t the most straightforward exercise, as I’ve discovered. A short tl;dr about my migration experience follows.

ghostToHugo

There’s a great utility, ghostToHugo, which helps convert existing content into a Hugo-compatible format. This requires first exporting existing Ghost content to JSON. This option hides in the Labs section of a Ghost site’s admin page.

To get date values correctly ported, I had to specify a date format. The readme for ghostToHugo offers a date format suggestion (2006-01-02 15:04:05). However: this format isn’t the same as what’s exported from my Ghost blog. I changed the format to 2006-01-02T15:04:05.000Z. My resulting ghostToHugo command-line call looked like this:

ghostToHugo -d "2006-01-02T15:04:05.000Z" -l "America/New_York" --hugo ~/dev/blog/hugo-imported-blog   ghostToHugo/ghost-export.json

Front matter

GhostToHugo adds TOML-formatted Front Matter to each converted post. This works fine. However: Github doesn’t render TOML as nicely as it does with YAML. As such, I chose YAML for each post’s front matter. I couldn’t find a command-line option to change front matter formatting. So, I modified converter.go to use YAML:

func New(options ...func(*Converter)) (*Converter, error) {
	c := &Converter{
		dateformat: time.RFC3339,
		location:   time.Local,
		path:       "newhugosite",
        //kind:       metadecoders.TOML,
        kind:       metadecoders.YAML,    
	}

	for _, option := range options {
		option(c)
	}

	return c, nil
}

I should probably submit a PR to support specifying Front Matter format via command-line options.

Front Matter metadata

I had to clean up some metadata added to my old posts:

• Removed Author (I’m the only author, and I don’t need my name showing up under post titles)
• Reworked Categories and Tags. When imported, I noticed that all of my posts had the same set of values for categories and tags, so I refactored these.
• Fixed slugs. Some of my slugs had hyphens, while others had underscores. I changed them all to be consistently using hyphens.

Hugo theme

I chose the Ananke theme for now. I like its simplicity.

The nice thing about Hugo themes is the ease of switching:

• Download a theme to the themes folder (typically by adding a git submodule)
• Edit config.toml and set theme = <your-favorite-theme>

For the Ananke theme, this git command would install the git submodule:

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

One issue is with editing a theme that’s been installed this way: the origin points to someone else’s repo (namely, the person who created the theme). To get around this, I forked the Ananke theme, then added the forked theme as my submodule:

git submodule add https://github.com/dmakogon/gohugo-theme-ananke.git themes/ananke

For more information about forking and editing Hugo themes, please look at this blog post by Andrew Hoog.

While the Ananke theme works really well for me, I discovered that the text in every article was rendering in a relatively-narrow column. For lower-resolution monitors, I suspect this isn’t much of an issue. However, when viewing content on a larger monitor, this is very limiting and, for longer posts, requires a lot of unnecessary vertical scrolling. To negate this, I edited the theme, located under themes/ananke/layouts, replacing the mw8 class attribute with mw9 (documentation about this can be found here).

For example, this is the required change to _default/single.html. Original:

  <article class="flex-l flex-wrap justify-between mw8 center ph3">

Revised, to take advantage of wider screens:

  <article class="flex-l flex-wrap justify-between mw9 center ph3">

Site configuration

This is probably the trickiest part, since each theme has its own taxonomy. Most themes (including Ananke) include a sample site that gets installed alongside the theme itself, which serves as great documentation for the various configuration settings to set in config.toml, as well as how to organize the site’s pages. For themes including sample content, they’re fairly consistent in using an exampleSite subfolder. If the content from exampleSite is copied to the root folder of a new Hugo site, you can run it and learn about it fairly easily.

From the Ananke sample’s config.toml, I discovered how to set up the site’s main-page description as well as social media links I’ll continue to tweak the blog layout as I learn more about Hugo (and the theme I chose).

If I switch themes later, I’ll need to revisit the [params] section of config.toml.

Publishing

Ok, now for the fun (and cost-saving) part: publishing my now-static blog. There are many ways to do this. I chose to use a combination of GitHub and Netlify:

• Private repo in GitHub with the entirety of my Hugo site in this repo
• Netlify site, configured with custom domain name (dmak.dev), set up to build and deploy every time I update master.

Up and running

So, that’s it - new blog is up and running! And if you’re able to read this post, that means I was finally able to deploy everything successfully.

Next up: writing new content. ;)

• Hugo
• Ghost