Tim's blah blah blah

Setting Up Hugo

(Updated: )

I’ve used Jekyll in the past, but since change is exciting, here’s a primer to set up your Hugo website, based on their own quickstart. After initial setup and installation of the bear theme, I provide some theme tweaks to enrich and speed up the page, especially on responsive images, giving a higher speedranking score while at it.

Initial setup

  1. Get Hugo:
port install hugo
  1. Initialize website:
hugo new site www.vanwerkhoven.org && cd www.vanwerkhoven.org
  1. Figure out what theme you want (stress!):
git init
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog
  1. Copy contents of exampleSite to root
  2. Add new post:
hugo new blog/setting-up-hugo.md
  1. Publish:
hugo server -D

Tweak theme

Available in my fork

  1. Add raw html shortcode
  2. Support float images, ensure max-width is <100%
  3. Ensure images are proportional in responsive mode
  4. Change font to Helvetica in themes/hugo-bearblog/layouts/partials/style.html (Verdana? Really? We’re not Ikea)
  5. Fix content layout shift by serving responsive images using shortcode /layouts/shortcodes/fig.html
  6. Add CSP header
  7. Adopt parts of normalize.css: mkdir -p static/css && wget https://necolas.github.io/normalize.css/latest/normalize.css -P static/css/, add minified code to style.html

Tweak CSS

  1. Move css from style.html to static/css/style.css, import css via themes/hugo-bearblog/layouts/_default/baseof.html (this prevents reload every page)
  2. Tweak code highlight background (yellow on gray?), use ‘monokailight’ style and ‘monokai’ for dark theme.
    1. set noClasses = false
    2. Generate css for light and dark
    hugo gen chromastyles --style=monokai > syntax.dark.css
    hugo gen chromastyles --style=monokailight > syntax.light.css
    mv syntax.*.css static/css/
    1. Splice together depending on requested color scheme
    cat syntax.light.css > syntax.css
    echo "@media (prefers-color-scheme: dark) {" >> syntax.css
    cat syntax.dark.css >> syntax.css
    echo "}" >> syntax.css
    minify syntax.css > syntax.min.css
    1. Load syntax.min.css via baseof.html

Tweak images

  1. Optimize JPG images convert -strip -interlace Plane -gaussian-blur 0.05 -quality 85% source.jpg result.jpg
  2. Optionally use mozjpeg: e.g. cjpeg -quality 65 foo.bmp > bar.jpg
  3. Use pngcrush for PNGs
  4. Add WebP support with JPG fallback – not yet because Hugo doesn’t support this yet