Hugo starter set

Note: Further development suspended as of 2021-09-11.

This is a starter set for the Hugo static site generator (SSG), based on the appearance of my website at brycewray.com.

See the online demo.

How to use

1. Clone this to a local repo.
2. Make appropriate changes to config.yaml to conform to your site’s parameters.
3. Once you have installed Hugo, run hugo serve from your terminal app. You can then view the site in http://localhost:1313 on your computer.
4. Read the sample posts and their Markdown files to see how everything works.
5. Edit the content to make it your own!
6. When ready, deploy the site to your chosen host.

What’s under the hood

• Lazy-loading of some images through use of lazyload.
• Responsive images through Hugo’s built-in image processing capabilities, using code borrowed shamelessly (and, where necessary, adapted for later versions of Hugo) from Stereobooster’s “Responsive images for Hugo” and Strict Panda’s “Using Image Processing to Load Images in Hugo.” (The real site’s repo now uses Cloudinary rather than having the images in the repo and processing them as such.)
• SCSS through Hugo Pipes.

Note: If you’re not averse to dealing with JavaScript from npm plugins and dependencies, you may be interested in another Hugo repo, hugo_twcss, which offers not only the same lazy-loading and image processing but also Tailwind CSS and PostCSS, rather than SCSS.