This document shows a brief guide to setup hugo-theme-monochrome in your hugo project.

Quick Start

Install Hugo

You need “extended” version of hugo to support SASS. Checkout Install Hugo for more details.

Take Linux for example:

1

snap install hugo --channel=extended

The minimum hugo version that hugo-theme-monochrome required is 0.80.0

Create a New Site

1

hugo new site <project name>

Add a Theme

1
2
3

cd <project name>
git init
git submodule add https://github.com/kaiiiz/hugo-theme-monochrome.git themes/hugo-theme-monochrome

Then add theme = "hugo-theme-monochrome" to your config.toml

Setup Dependencies

Prepare a composite package.json file for your project.

1

hugo mod npm pack

Install dependencies

1

npm install

Remember to ignore node_modules folder

Setup PostCSS

hugo-theme-monochrome is powered by tailwindcss. For better quality of CSS purging in production, you should add the following config to your config.toml, or the default settings generated from demo site will be applied.

See CSS purging with PostCSS for more details.

1
2

[build]
  writeStats = true

Customize the Theme

See Configuration.

Start the Hugo server

1

hugo server

Minify CSS and JS resources, PurgeCSS will also be applied. The minifier of JavaScript here is powered by ESBuild.

1

hugo server --environment production

Build static pages

Generate files to /public folder, --minify option can minify other resouces (e.g. HTML/XML/JSON…).

See Configure Minify to adjust the behavior of hugo minifier (powered by minify).

1

hugo --environment production --minify

Deployment

Push /public folder to your server. This site is built by using Github Action and Github Pages. The CI script is available here.

Run exampleSite

1
2
3
4
5

git clone https://github.com/kaiiiz/hugo-theme-monochrome
cd hugo-theme-monochrome/exampleSite
hugo --themesDir=../.. mod npm pack
npm install
hugo --themesDir=../.. server