Camp's yaps repository

All the source files of my blog that's hosted at yap.jackle.ca and will be replacing the Carrd-hosted one.

Helpful commands

Create new blog post

Just in case I forget how archetypes work on Hugo.

hugo new content blog/${subject}/index.md
# or for specifying the kind in case it fails to infer it
hugo new content blog/${subject}/index.md --kind blog
# and Blowfish' own archetype for external pages 
# https://blowfish.page/docs/content-examples/#external-links:~:text=The%20theme%20includes%20an%20archetype%20to%20make%20generating%20these%20external%20link%20articles%20simple%2E%20Just%20specify%20%2Dk%20external%20when%20making%20new%20content
hugo new content bookmarks/${subject}/index.md --kind external

Create the blog from scratch

This is more some personal notes here of how I did it because I have some special limitations on my machine that I use to write this blog.

brew install hugo
brew install fnm
fnm install v24
fnm use v24
npx blowfish-tools new $website_name

Source: Blowfish docs: Getting started > Installation > Blowfish Tools (recommended)

Update the site

brew upgrade hugo
brew update fnm
fnm install v24
fnm use v24
npx blowfish-tools update

Serve the site locally with draft and future blog

hugo serve --buildDrafts --buildFuture

Source: Blowfish docs: Getting started > Installing updates > Update using Hugo

Helpful tips for adding content

Adding custom icons

1. Place an SVG file into the [assets/icons] folder
2. Open the file for editing
3. Remove all fill colour properties
4. Add a fill="currentColor" attribute in the svg tag

Use SVG Crop to remove blank space around SVG icons.

References

• Blowfish docs ^(archive)
  • Icons ^(archive)
  • Markdown ^(archive)
    • Raw
  • Shortcodes ^(archive)
• Hugo docs ^(archive)
  • Archetypes ^(archive)
• CSS named colours organized by palette ^(archive)
• Pictogrammers Material Design Icons
• SVG Crop
• Image Extractor