Hugo Static Site Generator Blank Starter Theme

I’m in the process of converting my WordPress site into a static site compiled from markdown files using the Hugo static site generator. For this task, I have created a blank Hugo starter theme that uses Webpack and webpack-plugin-serve for development.

Hugo starter theme screenshot — screenshot

Source Code

Pre-requisites

You will need Git and NodeJS with NPM installed.

Installation

For example, if your Hugo website is in the www folder.

cd www

git init

git submodule add https://github.com/jimfrenette/hugo-starter.git themes/starter

Webpack Build

Install node modules.

cd www/themes/starter

npm i

Provided you have generated your Hugo website with the hugo command. By default, the generated html files are ouput into the ./public folder. e.g., www/public. If you have customized the output directory in the site config publishDir property, update the respective webpack/dev.config.js webpack-plugin-serve static path. e.g.,

...
const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');

const serve = new Serve({
    host: 'localhost',
    static: ['../../public/'],
    open: true,
    liveReload: true
});

When you’re ready to develop your theme CSS and JavaScript, run the npm run dev command. This will launch the webpack development server, with watch enabled to build the css and javascrpt as changes are saved to the src. Live reload is also enabled so the changes are immediately rendered in the web browser.

cd www/themes/starter
    
npm run dev

Build for production with npm run build. CSS and JavaScript files will be output into the starter themes dist folder. e.g.,

cd www/themes/starter
    
npm run build