September 4, 2017

From WordPress to Hugo

Why?

So I can move from shared hosting to static file hosting with Netlify or Firebase and not have to maintain a WordPress site.

How?

  1. Export content from WordPress with https://github.com/SchumacherFM/wordpress-to-hugo-exporter. This WordPress plug-in made me a .zip file with all my posts converted to .md files and my uploads folder of images

  2. Move all the .md files into the new Hugo site’s content/posts folder

  3. Move WordPress’s uploads folder to Hugo’s static folder

  4. Eat lunch

  5. Test new Hugo site and find issues

  6. Write a config file. Copy all the options from https://gohugo.io/getting-started/configuration/#yaml-configuration and wittle them down to what I need like this

    baseURL: http://kb.imakewebsites.ca
    googleAnalytics: [my uid here]
    permalinks:
      post: /:year/:month/:title/
    sitemap:
      changefreq: monthly
      priority: 0.5
      filename: sitemap.xml
    theme: ananke
    title: Knowledge Base
  7. Fix lack of syntax highlighting by installing prism.js and doing a search and replace to change code like

    <pre><code class="language-js">
    [sample code here]
    </code></pre>

    into

    ```js
    [sample code here]
    ```
  8. Fix character encoding issues like < being replaced with &gt; unnecessarily in code samples

  9. Manually add featured_image info to front-matter for posts because that field wasn’t included in the WordPress export.

  10. Add _index.md file with content for homepage to /content directory so that the homepage has some content

  11. Restart on theme, using https://themes.gohugo.io/blank/ as a base

  12. Submit a PR to fix blank theme’s filtering issue

  13. Copy a bunch of CSS from http://www.imakewebsites.ca to style the blank theme (which has a surprisingly similar HTML structure to my own site)