Skip to content

Hugo setup notes

This post is a note for hugo setup currently for this site

config

site

> hugo new site

specified with catg.kghs.net

theme

Using minimal bootstrap theme but might consider moving to hugo journal

git submodule lives under catg.kghs.net/ instead of root, might not be what I want…?

Now using a forked minimal bootstrap theme to add support for using google-fonts. Followed the gist but with a tweak, minimal bootstramp theme doesn’t load .scss so the font family declaration css lives in head.html instead. See PR for detail?

deployment

setup to deploy to S3 bucket; configuration is mainly in [deployment] section within config.toml

S3 bucket was setup with static web hosting but somehow still need to specify an policy to the bucket otherwise hugo deploy will make everything private again and cause 403 on each deploy

relies on IAM configured with aws configure; nothing other than bucket is in the hugo config.

SSL configured via AWS CloudFront with cert issued using AWS Certificate Manager; Follow This AWS step-by-step setup on how to do it. Gotchas

  • Cert should be created in us-east-1 region or CloudFront won’t be able to find it when creating distribution.
  • Origin when creating a CloudFront Distribution should be in <site>.s3-website-<region>.amazonaws.com, NOT just pick a s3 bucket from the dropdown. Using dropdown assumes you are forwrading REST request not regular web request.

Also need to make sure baseURL in site config.toml is https:// instead of http:// otherwise bootstrap.min.css will be served from non-secure location causing error in Chrome/Brave browsers.

create content

hugo new [path] where [path] format right now should be post/name-of-post.md otherwise the theme doesn’t pick up and create links corresponding posts; also need to make sure .md file extension is there or it might be hard to do things down the road.

Just defined a few archtype template, and when creating new content should use hugo new --kind type [path] where [path] is the same format as above; so for example

> hugo new --kind novel post/novel/imouza-4.md

creates a new post of kind novel from template defined under archtypes/novel.md

edit and preview

run

> hugo server -D --buildFuture

which should include posts that has draft: true status and also content with a future publish date

bind to site other than localhost

when needing to test on phones or other devices on the same network, run

> hugo server -F -D --bind=[ip_addr] --baseURL=http://[ip_addr]

so hugo binds to not just localhost

other workflow

Currently publishing involves editing on laptop then run hugo to generate site. Thinking how to create posts on mobile.

One possible route

  • make site/content folder live on Dropbox
  • create/edit content on mobile via DbApp
  • Problem: Windows doesn’t follow symlink so doesn’t really work well with msysgit terminal
  • Solved: Need to use mklink command in windows command prompt; the command doesn’t work under msysgit’s terminal.
  • However, git does not recognize symlink so the whole site still need to be stored in Dropbox.

Things to consider with this route:

  • editor on mobile
  • iA editor seems to work? Not really :-/
  • the only thing worked is Dropbox TextEditor opened from Dropbox
  • no way to trigger update, still need to get back to a laptop

theme

When switching themes that are added as submodules, on next branch switching git will not remove the theme and when switching back will have to run

> git submodule update

to get the theme content back

needs to think about

  1. guestbook?
  2. correct fonts and syntax highlighting for programming related posts; Noto serif doesn’t go well for programming posts. Should think about this more if more technical posts are ever written…
  3. in-post navigation to other posts?
  4. pagination on the front page?
  5. content orginazation by month?
  6. better categorization of content - maybe treat certain tags as categories, and add authors/series to taxonomy?
  7. Maybe a way to set top page for a given tag?