https://hugo-minimal.netlify.com/
This repo is a working example/template of a Hugo site using TailwindCSS and Vue.js, and administered using NetlifyCMS. The CSS and JS are properly bundled and purged using PurgeCSS and Hugo Pipes. No Webpack, no bloated node_modules directory, just Hugo and nice utility-first CSS.
Homepage:
Admin interface (with page-building!):
Hats off to budparr/hugopipes-tailwindcss for the first working version of PurgeCSS and Tailwind with Hugo Pipes.
In 2018 Forestry.io released a "block" editing feature that let users essentially start doing easy page-building using Hugo. With this PR that landed in NetlifyCMS, it's now possible there as well. I've also added a "sections" level to specify a background color or other formatting to each area of blocks (see screenshot). You can see how this is set up in layouts/partials/blockloader.html and the CMS config in static/admin/config.yml. See the NetlifyCMS docs about variable-type lists here.
Tailwind and PurgeCSS are configured in /assets/css/postcss.config.js and /assets/css/dev/postcss.config.js. The decision for which gets config gets loaded (and Hugo Pipes magic) happens in layouts/partials/header_includes.html.
Vue is currently loaded from a CDN and all components you define are bundled in layouts/partials/footer_includes.html.
This uses SVG icons which are all loaded via an external reference from static/images/symbol-defs.svg (note: doesn't work in IE). See notes in layouts/partials/icon.html.
- PurgeCSS will fail if any of your templates are empty.
- If you add themes, you need to add the file location in the PurgeCSS
contentconfiguration item.
Embed Responsively will give you YouTube/Vimeo embed codes that work responsively (see 1up-media.html template partial for example).
Photos are not automatically resized when added through NetlifyCMS, so resize/crush them before uploading.
Getting familiar with Go templates is very handy for working with Hugo. Here's a good tutorial.
Pretty printing Hugo variables for debug: https://github.com/kaushalmodi/hugo-debugprint
Find the right syntax for your YAML multiline strings - https://yaml-multiline.info/
- Implement some kind of work-around for NetlifyCMS widgets that depend on a field's value (e.g. a media block that displays either an image or a video, or disabling "image position" selection if there is no image). See this issue.