Nick Romney

Experiments with static sites

Nick Romney's photo
Nick Romney
·

4 min read

I plan to write more fully on static sites, particularly covering:

  • exporting from WordPress
  • hosting with AWS S3, Azure Storage Accounts, and Netlify
  • adding in Content Delivery Networks
  • JAMStack sites like Gatsby
  • a CI/CD workflow
  • speed comparisons

Here's my current journey:

Benchmarking

The assumption is that the move to a static site would be faster than an uncomplicated WordPress site.

Choosing Hugo

Much of the inspiration (and many of the steps) were borrowed from Christian Bär's blog posts on setting up a static site

I chose Hugo for many of the same reasons:

  • a single executable (nothing to install, and no need to wrestle with npm or gulp)
  • a theme gallery
  • many of the conventions I'm used to from WordPress
    • tags
    • shortcodes
  • a conversion path from WordPress

Choosing a Hugo theme

My criteria were:

  • readable, especially on a mobile
  • lightweight (sub-30kb)
  • full-width
  • supports tags
  • good hamburger menu
  • good Google Lighthouse score

I chose Future Imperfect Slim

Installing Hugo

  • Follow the Hugo QuickStart
  • On Windows, I went to the releases page, and chose hugo_extended_0.55.6_Windows-64bit.zip - the theme I chose needs the extended version.
  • I unzipped it, and moved hugo.exe to "C:\work\tools", which is in my PATH.
  • Test this by executing the command, hugo version
  • The code below will:
    • Create a directory for my static sites: static
    • Change into the directory: static
    • Use hugo to create a new directory and new Hugo site: nickromney.com
    • Change into the directory: nickromney.com
    • Initialise this as a git repository
    • Add a git submodule for the theme
    • Create a blog entry as my first post
    • Start the local Hugo server, including drafts
cd c:\personal\code\static
hugo new site nickromney.com
cd nickromney.com
git init
git submodule add https://github.com/pacollins/hugo-future-imperfect-slim.git themes/hugo-future-imperfect-slim
  • Copy the contents of \static\nickromney.com\themes\hugo-future-imperfect-slim\exampleSite to \static\nickromney.com
  • Edit the config.toml
  • Make a new blog post with hugo new blog/hugostaticsites.md
  • Edit the local post
  • update the draft status to draft: false

Understanding bundles

Add tags / categories

Add images

  • Preview in VS Code
  • Live Reload in the browser

Add a frontpage

Getting ready to publish

  • get hugo to create the public folder with
hugo