Settling In on Hugo Framework

The Endless Loop

It’s almost funny when I think back on how many times I found myself in this endless loop. I’d start building my own blog page with a shiny new framework, hack away at it for a day, maybe get the first post up… and then I’d just let it sit. Days would pass, I’d lose motivation, and before I knew it, I’d be back to square one thinking, ‘Maybe I just hate writing.’ I’d literally rm -rf the whole thing and start over with a new tool.

Sure, platform like Medium were always there as an easy option (I did tried too -> me on Medium). And yes, Medium has great built-in audience reach, better SEO, and you can even monetize if you content is stellar. But it never felt truly personal to me. The Medium editor just didn’t have the same satisfaction as crafting something that was entirely my own. Not like Hugo, I can write in every text editor that I like.

So this time, with Hugo and PaperMod, I wish I can break the loop. And hopefully, these little notes help anyone else who’s been stuck in a similar cycle.

Just Do It Now

I always knew deep down that the best approach was to just start and not wait for some magical perfect moment. But for the longest time, I let that hesitation hold me back. Recently, I had a realization: if I kept waiting, I’d just stay behind. So I told myself, Start today. No, start right now! And below, I’ve noted how I set up this blog exactly the way I wanted, in case anyone else finds these tips useful too.

All The Fun Parts

Really Nice Hugo Theme

this is not the first time i met Hugo and PaperMod. we are old friend.

PaperMod

there is something I dont like about PaperMod though, the page mobile layout is just OK, but I think I can bear with it.

Main `yaml` Configs

baseURL: https://hzionn.netlify.app/
languageCode: en-us
title: hzionn
theme: ["PaperMod"]
pagination:
  disableAliases: false
  pagerSize: 3

enableInlineShortcodes: true
enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false
enableEmoji: true

minify:
  disableXML: true
  # minifyOutput: true

outputs:
  home:
    - HTML
    - RSS
    - JSON

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: hzionn-digital-garden
  description: "ExampleSite description"
  keywords: [Blog, Portfolio, PaperMod]
  # author: Me
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: false
  ShowShareButtons: false
  ShowPostNavLinks: false
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: false
  ShowRssButtonInSectionTermList: true
  UseHugoToc: false
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: true
  tocopen: false

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "<link / abs url>"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "hzionn"
    icon: /apple-touch-icon.png
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Hi there \U0001F44B"
    Content: >
      I'm Zi-Onn.

      - ...

  socialIcons:
    - name: threads
      url: "https://threads.com/cs.murmur"
    - name: linkedin
      url: "https://linkedin.com/in/hzionn"
    - name: github
      url: "https://github.com/hzionn"
    - name: hackmd
      url: "https://hackmd.io/@hzionn"

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
      # SiteVerificationTag: "G-MQEYK0L706"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "summary", "content"]

menu:
  main:
    - identifier: archives
      name: Archive
      url: /archives/
      weight: 10
    - identifier: categories
      name: Categories
      url: /categories/
      weight: 15
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 20
    - name: Search
      url: /search/
      weight: 30
    - identifier: experiences
      name: Bio
      url: /experiences/
      weight: 35

# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  goldmark:
    renderer:
      unsafe: true
    extensions:
      extras:
        mark:
          enable: true
  highlight:
    noClasses: false

I Just Want to Highlight

A Font That Never Fails

Lora

Enable $\text{Latex}$ with Katex

math.html, extend_head.html, goldmark delimiters

And Some Narcissist Too

Google Analytics

The Endless Loop#

Just Do It Now#

All The Fun Parts#

Really Nice Hugo Theme#

Main yaml Configs#

I Just Want to Highlight#

A Font That Never Fails#

Enable $\text{Latex}$ with Katex#

And Some Narcissist Too#