Installing Hugo with PostCSS
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
- 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
- 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
- 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.