Hugo is a great framework for building websites, particularily for developers. Things to like:

  • Write content in Markdown using your favorite IDE.
  • It supports PostCSS and others.
  • Theme system is well designed, modular, and easy to understand.
  • There are tons of themes to get started. Or, just hack you own.
  • Includes a development webserver for quick edit and local preview workflow.
  • Deploys to a number of backend systems including Google Cloud.

This is the easiest way to get it set up in Ubuntu with PostCSS.

These instructions were tested in Ubuntu 21.10

  1. Install Hugo.

Use plain-old apt to install it. I tried using snap but the version installed didn’t support PostCSS, even the one from the extended channel. Go to Hugo for other alternatives.

sudo apt install hugo
  1. Install Node.

Download tarball for Linux directly from nodejs.org, e.g. version 16.13.1 LTS. Unpack and put its bin directory in the $PATH, e.g.:

cd /sw/
tar xvfJ ~/Downloads/node-v16.13.1-linux-x64.tar.xz
ln -s node-v16.13.1-linux-x64 node
ln -s /sw/node/bin/node /sw/bin/node
ln -s /sw/node/bin/npm /sw/bin/npm
export PATH=/sw/bin:$PATH
  1. Install PostCSS.
npm install \
    postcss-cli \
    postcss-import \
    postcss-mixins \
    postcss-nested \
    postcss-preset-env \
    postcss-url \
    autoprefixer \
    browserslist \
    cssnano

That’s it. Create or download a theme that uses PostCSS, and give it a try.