Hugo Zettel

A Hugo theme for building your own Zettelkasten as a static website.

Based on the Hugo Tailwind CSS starter theme.

Features

add links between notes from front matter
browse notes by tags
add entry: true to add a not to the front page as an entry note
set up to use Tailwind CSS - v1.4
use Hugo Pipes to build and load css based on dev or build environment
purge unused css classes with PurgeCSS for build, but not in dev

Prerequisites

Make sure to install postcss-cli and autoprefixer globally in your environment, as Hugo Pipe’s PostCSS requires it. This is mentioned in the Hugo Docs.

npm install -g postcss-cli
npm install -g autoprefixer

Navigate to the theme directory and install the necessary Node packages:

npm install

Theme development

start a server to develop with exampleSite

hugo server -s exampleSite --themesDir=../.. --disableFastRender

Deploy to Netlify

If you use this theme and want to deploy your site to Netlify, you MAY encounter a build error which contains the following line:

ERROR {your deploy time here} error: failed to transform resource: POSTCSS: failed to transform "css/styles.css" (text/css): PostCSS not found; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/

That is, Netlify doesn't know the npm dependencies of this starter theme yet. For this to fix, please add a package.json file to the root of your repo with the content:

{
    "name": "my-site",
    "version": "0.0.1",
    "description": "that is my-site",
    "repository": "https://github.com/you/my-site",
    "license": "MIT",
    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^2.1.0",
        "autoprefixer": "^9.7.4",
        "postcss": "^7.0.27",
        "postcss-cli": "^7.1.0",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^1.2.0"
    },
    "browserslist": [
        "last 1 version",
        "> 1%",
        "maintained node versions",
        "not dead"
    ]
}

This introduces the dependencies Tailwind CSS and PostCSS need, Netlify will run the installation automatically on deploy.

Environment variables

To make the distinction between development and production environments work, add an environment variable HUGO_ENV = "production" to your site settings under Settings → Build & deploy → Environment.

Or use a netlify.toml for a file-based configuration.

Reference

Documentation for Hugo's PostCSS setup.

Documentation for Tailwind CSS setup of calling PurgeCSS manually.

emptymalei / hugo-zettel