/hugo_site_css-grid

Shortened Hugo version of brycewray.com (real, full site repo is in Eleventy).

Primary LanguageHTML

Repo for brycewray.com

This is the repository from which a shortened, Hugo-generated version of brycewray.com is built. Please note that this is just as an example; the real site is done in Eleventy.

Not (exactly) a starter kit, but . . .

While this isn’t truly a starter version of the real site, you can use it that way since it includes only a small number of the original posts to give you ideas about how it all works:

  1. Clone it to a local repo.
  2. Make appropriate changes to /data/metadata.json.
  3. Delete the Markdown files from /content/**/.* and the images from /static/images/ (well, maybe you should keep one or two of each around at the start, until you see how things work).

What’s under the hood

For Hugo users unused to dealing with JavaScript from npm 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 npm 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 and scripts to allow the following:

  • PostCSS and Tailwind CSS.
  • Webmentions, enabled through /assets/js/webmentions.js (called in the dev process by npm run start or npm run build, both in the package.json file). This file is adapted from my real Eleventy/webpack repo’s webmentions-handling code — for which you can thank superb articles and code by Max Böck and Sia Karamalegos. Any flaws you find in my code are mine alone, of course.

For more information about the thinking behind this repo as well as a similar, Gatsby-generated version of the site, please refer to “Different modes for different code.”