brycewray / hugo_twcss

Further development suspended as of 2021-09-11 (but see README for further information regarding a 2021-11-02 fix). Repo formerly was named “hugo_site_css-grid.”

Hugo starter set

Note: Further development suspended as of 2021-09-11 but, on 2021-11-02, I went back in and made the repo compatible with Tailwind CSS’s just-in-time (JIT) mode. For details on how I did this, see “Making Tailwind JIT work with Hugo.”

This is a starter set for the Hugo static site generator (SSG), based on the look-and-feel of my website at brycewray.com. Note: This repo does NOT use Hugo Modules.

See the online demo.

How to use

1. Clone this to a local repo.
2. Make appropriate changes to config.yaml to conform to your site’s parameters.
3. Run npm install to load all the dependencies in package.json.
4. Once you have installed Hugo, run npm run start from your terminal app. You can then view the site in http://localhost:1313 on your computer.
5. Read the sample posts and their Markdown files to see how everything works.
6. Edit the content to make it your own!
7. When ready, deploy the site to your chosen host. The build command is npm run build. (For local testing, you can use npm run testbuild to set the environment to production; see “What’s under the hood,” below.)

What’s under the hood

For Hugo users unused to dealing with JavaScript from Node.js plugins and dependencies, this repo may not be your cup of tea, and that’s perfectly understandable.* However, if you’re willing to take a trip to the Dark Side, it does offer some interesting add-on possibilities. (That said, Hugo’s single-binary, nearly-everything-out-of-the-box approach has served it well and is impressive.) In package.json, you’ll find dependencies that make possible the use of PostCSS and Tailwind CSS.

In addition, there’s:

• Lazy-loading of in-body images through use of lazyload.
• Responsive images through Hugo’s built-in image processing capabilities, using code borrowed shamelessly (and, where necessary, adapted for later versions of Hugo) from Stereobooster’s “Responsive images for Hugo” and Strict Panda’s “Using Image Processing to Load Images in Hugo.” (The real site’s repo uses Cloudinary rather than having the images in the repo and processing them as such.)

* If you don’t care for dealing with Node.js dependencies, you may be interested in another Hugo repo, hugo_solo, which offers the same lazy-loading and image processing but uses SCSS through Hugo Pipes instead of Tailwind CSS and PostCSS.