https://github.com/ttntm/hugo-tailwind-boilerplate

A boilerplate for Hugo sites based on Tailwind CSS.
https://github.com/ttntm/hugo-tailwind-boilerplate

boilerplate gulp hugo hugo-boilerplate hugo-tailwind-boilerplate tailwind tailwindcss template

Last synced: 13 days ago
JSON representation

A boilerplate for Hugo sites based on Tailwind CSS.

• Host: GitHub
• URL: https://github.com/ttntm/hugo-tailwind-boilerplate
• Owner: ttntm
• License: mit
• Created: 2020-04-12T10:36:49.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-20T17:48:30.000Z (8 months ago)
• Last Synced: 2024-10-14T08:29:13.493Z (27 days ago)
• Topics: boilerplate, gulp, hugo, hugo-boilerplate, hugo-tailwind-boilerplate, tailwind, tailwindcss, template
• Language: JavaScript
• Homepage: https://ttntm.me/blog/hugo-tailwind-boilerplate/
• Size: 321 KB
• Stars: 21
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-hugo - Hugo + Tailwind boilerplate

README

        
# hugo-tailwind-boilerplate

A very simple boilerplate for Hugo sites based on Tailwind CSS.

[gulp](https://gulpjs.com/) handles Tailwind CSS builds via `postcss` with 2 tasks called `dev-css` and `build-css`.

There's 2 npm scripts defined that make use of these tasks:

1. **start**

2. **deploy**

`start` is meant for local development (and the whole power of Tailwind CSS + autocomplete classes), `deploy` will build the site into `./public` (using `hugo --minify`), ready for deployment.

This boilerplate provides the default Tailwind CSS configuration file `tailwind.config.js`. This file is set up to automatically purge unused styles based on the folders `./content` and `./layouts` if `NODE_ENV=production`.

Check the [Tailwind CSS docs](https://v1.tailwindcss.com/docs/controlling-file-size) for details on Tailwind's purge functionality.

The [Hugo](https://gohugo.io) setup is basic at best; should be enough to build upon though. See `layouts/_default/baseof.html` to get an idea what the default template looks like.

PS: some folders are filled with placeholder `txt` files; provides a better directory structure when downloading/forking this repository.

## Usage

In order to work with this repository, only 2 things are required:

- Hugo

- node/npm

If that's set up, then all you need is to get the repository, run `npm install` and then `npm run start`. Go to `localhost:1313` and you should see a one-page demo site you can start working with in your browser.

## Info

[![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)