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.

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