I was experimenting with Hugo as a static site generator for a project. Despite not going forward with that tech (we landed on GitHub pages), here are my notes on getting it up and runnning.
From gohubo.io you will find many ways to install hugo.
For Mac OS X you can use brew and ports
brew install hugoYou can build a base site using We built the base site using
hugo new site homepage
But then added a .gitignore to ensure we leave out the unnecessary stuff (also show below).
# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json
# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux
# Temporary lock file while building
/.hugo_build.lock
Following Using Hugo with Tailwind CSS 2 and Hugo and Tailwind CSS 3.0 we configured the site with Tailwind CSS using the following commands
npm init -y
npm install -D --save-exact autoprefixer postcss postcss-cli postcss-import tailwindcssUpdate your .gitignore to exclude the dependency directories
# Dependency directories
node_modules/
Create a postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}Initialize tailwindcss
npx tailwindcss initUpdate the purge in tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: ['layouts/**/*.html'],
content: ["./content/**/*.{html,js}", "./layouts/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Create a assets/css/app.css file with
@tailwind base;
@tailwind components;
@tailwind utilities;Create a layouts/_default/baseof.html file with
<!DOCTYPE html>
<html lang="{{ .Language.Lang }}">
<head>
{{ partial "head.html" . }}
</head>
<body>
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
</body>
</html>Create a layouts/_default/index.html file with
{{ define "main" }}
<main class="mx-auto px-4 py-24 bg-gray-100">
<h1>Welcome to Hugo with Tailwind CSS</h1>
<div class="text-gray-500">This is an example site with Tailwind CSS 2</div>
</main>
{{ end }}Create a layouts/partials/head.html file with
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{ $styles := resources.Get "css/app.css" | postCSS }}
{{ if .Site.IsServer }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}"/>
{{ else }}
{{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}"/>
{{ end }}Create a layouts/partials/footer.html file with
<footer class="bg-gray-900">
<div class="flex justify-center text-white py-1">This is the footer</div>
</footer>Finally, create an empty layouts/_default/taxonomy.html file.
Now you can run the base site with
hugo server