Hugo on Janusworx

Moved From Papermod to Blowfish

feedback@janusworx.com (Mario Jason Braganza) — Fri, 24 Jul 2026 08:30:00 +0530

Intended Audience

Me.
This is a sorta-kinda living document, a record of my idiosyncratic decisions to first move to, and then bend the Blowfish theme to my needs.

Update (2026-07-24) : RSS updates, Miscellanea, some editing.

Blowfish theme logo

I changed my blog theme from Papermod to Blowfish.

Why move to Blowfish?
#

Papermod, to my mind, is perfection. And I outgrew it. That’s all there is to the why.
Papermod caters to the needs of a blog, and I think my blog is slowly turning into a multi section website.
I want menus, and possibly submenus and Papermod does not do them.
The finished outcome, while not as pretty and uniform as the old Papermod site, makes writing and managing it all, much simpler.

Blowfish specific things for future Jason to note.
#

Big Picture things
#

The theme does a lot. Most of which I don’t think I need.¹
The aim is to match what my site looked with Papermod, as closely as possible.
Everything CSS is in assets/css/custom.css, rather than multiple CSS files as it was with Papermod.
Pagefind powers search on the site. The inbuilt search is disabled in main.toml.
Footnotes use Littlefoot; so they appear as popups, and the need to scroll up and down the page is reduced.

Configuration
#

Blowfish separates everything out in its config. Lots of toml files in there.

Base config is in hugo.toml, theme parameters are in params.toml, menus in menus.XX.toml and language + translation related stuff is in languages.XX.toml ²
main.toml sets the theme, the baseURL and I’ve added a section to limit RSS entries to only the last 50 items.
The author parameters along with the social link set, as well as the logo, are in languages.XX.toml. I have duplicated them. One for EN and one for FR. The logo that it requires, is in the assets/logo directory.
Menus and submenus in menus.XX.toml. Duplicated. The English menus have English names and the French, French ones.
Parameters; the header is set to basic. Every other option creates a sticky header of some sort. Lots of other changes. Most are self explanatory. Turned off “Hero” options everywhere, to stick to a plain, basic layout as much as possible.
My split of the various configuration files for environments (base, development & production) have stayed the same with no changes.

Content Structure
#

Directories and subdirectories for each section.
Make sure each section has a corresponding index.XX.md for static pages or _index.XX.md for list pages. This, I think (but am not sure) has fixed my old, nagging issue of page navigation overflowing. I would keep going next, in the Talks section for example, and when I reached the end, it would show me another entry from some other section. Now the front/back buttons stay restricted to the section they are in.

Archetypes
#

All the archetypes have been slightly tweaked. They now also include a template line for an image. It uses the theme’s figure shortcode for images.

i18n (Internationalisation)
#

The internationalisation options are easier here. Just defining a term somewhere and then referring to it here just works.
For e.g., I use search_placeholder as a term in the search layout and then in i18n/en.yaml I have, search_placeholder: "Search for something …" while i18n/fr.yaml gives the same term a different spin, search_placeholder: "Rechercher des articles …"

Layout Overrides
#

RSS
#

Have tweaked the RSS layout a teensy bit. My version is in layouts/_default/rss.xml, which includes the full text of the post, instead of just a summary.

<!-- <description>{{/* .Summary | transform.XMLEscape | safeHTML */}}</description> -->
 <description>{{ .Content | transform.XMLEscape | safeHTML }}</description>

Have restricted RSS feed generation for posts in the Notes and Miscellanea section. They won’t appear in the RSS feed unless I want them to. Most of them are just streams of consciousness, to help me get on with my day. Only a few are exceptions, that I want published.
I even disable sitemap generation for those “important to me, but useless for thee” posts with this bit of metadata in each post³

sitemap:
 disable: true

So I have then taken advantage of this fact, to exclude these posts from having entries in the RSS feed, by telling Hugo to only look at posts where such a key does not exist; which basically, is everything else.

<!-- {{/* range $pages */}} -->
 {{ range where $pages "Sitemap.Disable" "ne" true }}

Search
#

This pulls in the script and the styles for Pagefind, which I use for searching the blog. Layout is in layouts/_default/search.html.
Also note, then when working on search locally, first create an index with pagefind and move it to the static folder because our normal way of working is to render it all in memory.
- do a hugo build
- then do pagefind_extended --site public
- then mv public/pagefind static/pagefind
- then rm -rf public
- and then start the hugo server like we normally do

Littlefoot
#

Footnotes are powered by Littlefoot. Have used layouts/partials/extend-footer.html to pull in the Littlefoot script and layouts/partials/extend-footer.html to grab the CSS.

Redirect
#

An old redirect template to redirect from one section to the other is still in place in the layouts/redirect directory

Shortcodes
#

Most of the old shortcodes made it over. Retired my image and caption shortcodes in favour of using Blowfish’s version. Also created an hsgallery shortcode, so that I could continue using my old Hugo Shortcode Gallery to create image galleries. The gallery shortcode conflicts with Blowfish’s own, which I don’t like and so won’t use.

Static + Tools
#

Fonts and Littlefoot reside in the static directory, along with all my images.
There’s also a tools directory which contains the Pagefind binary. This does not get published obviously. But the Forgejo action uses this to generate an index for the site and then sends the whole thing off to the VM.

Themes
#

Contains Blowfish and Hugo Shortcode Gallery, added as git submodules. I dropped Hugo Admonitions, because Blowfish has them already.

CSS
#

All in assets/css/custom.css

Import fonts: Valkyrie for the site and Source Code Pro for code.
Tweaked the Janusworx up left on my site, and changed all the nav bar items to use Valkyrie Caps.
Dark mode links were not contrasty enough. So changed the colour and added an underline on hover.
Added a class to the figure tag, so I could center the pics I use.
Added an indent to the numbered list items on the Annual Book List pages, so that the numbers stay under each month.
Style littlefoot footnotes, so that the button is slightly smaller and higher, and the notes use Valkyrie, along with a couple of other tiny tweaks.
Style the Blowfish box, and the results, on the search page
Main thing to note. Use !important; liberally. Changes don’t always cascade down correctly.

Miscellanea
#

Go Templates:
#

Use ```go-html-template as the language hint to the code fence to display Go template code correctly. (like I needed to in this post for e.g.)
If it is pure Go Template stuff with little to no html, another alternative is ```go-text-template
I could not just comment out Go template code with HTML comment markers . The Hugo live server kept crashing on me with weird EOF errors, until I figured this out. The Go template block needs a comment marker inside the the {{ … }} section like so, {{/* … */}}.
E.g. {{/* range $pages */}}

Feedback on this post?
Mail me at feedback at this domain.
P.S. Subscribe to my mailing list!

famous last words! ↩︎
XX is the language code. I have EN for English and FR for French. So menus.fr.toml for e.g. ↩︎
I have modified the notes archetype, so this is always pre filled and set. ↩︎

You Can Now Search this Blog

feedback@janusworx.com (Mario Jason Braganza) — Tue, 23 Jun 2026 14:24:24 +0530

Intended Audience

Me. In case I want to retrace the big idea tomorrow

tldr: https://janusworx.com/search
#

Being the lazyass that I am, I used to depend on search engine indexes to find something on my own blog. (First google, then DuckDuckGo.)
Kushal, having https://search.kushaldas.in/ has always made me jealous though.
And now, the days of finding something relevant on my blog, on the first search are long gone. Search engines today are a pale shadow of what they used to be. The current load of crap actually makes me long for the days of Altavista!

So, I decided to get off my butt, and go do something about it, because everytime I want something, my blog is one of the first places I search.
For e.g. when writing this post, I needed to look up how to add line numbers to my code blocks. Search helped me find it :)

I went to the Hugo website and decided to implement the first search tool¹ they suggested: Pagefind.
Well, I did that since Pagefind took care of the only thing I’m anal about. It keeps everything local and under my control. If not, I’d have kept looking for something else.
What it (Pagefind) does, is parse the site, Hugo builds for me, and create a search index along with some more goodies (an api for search as well as UI components) in a bundle. The rendered html and the bundle together are now the artifact that my site is made up of.

The Plan
#

Get Pagefind and install it into a tools subdirectory in my blog’s directory, so I always have it handy (and the Forgejo action can get its grubby paws on it when it wants to run the publishing workflow)
Create an entry in my menu, so I can go clicky to a search page.
Create said search page.
Make search work.
Make the page resemble the rest of the blog as much as possible.

Installing it and wiring it all up
#

1. Installation
#

This is the easy part. Pagefind is a single binary, which I shoved into the tools subdirectory.

2. Creating an entry for search in the navigation menu
#

I edited my Hugo config (mine is called hugo.yaml), and added search as a menu item.
More shifted downwards, as did its weight.

menus:
 main: # elided config
 - identifier: search
 name: search
 url: /search
 weight: 60
 - identifier: more
 name: more …
 url: /more/
 weight: 70

3. Creating the search page.
#

This was a two step process.

a. I needed a placeholder page that I could render some layout (a template) into.
#

This was search.md which lives in my content directory. This is all it contains …

1
2
3
4
5


---
title: Search
layout: search
url: /search/
---

See the key that says layout on line 3? This is looking for a layout called search which is what we now create …

b. Creating the search layout.
#

Papermod already ships with a layout called search. Which I did not want, because it is meant for use with another local search engine called lunr.js.
Hugo can override whatever file your theme provides, by letting you create your own versions of said file in the layouts directory. Hugo will then look at that instead of the theme’s file.
Over the years I’ve gotten dangerous enough by using Hugo’s lovely channel for discourse. Between that, and Hugo’s documentation as well as Pagefind’s own help page, I rustled up a layout file called search.html which lives in my layouts/_default directory. This is what it contains …

{{ define "main" }}

<link rel="stylesheet" href="/pagefind/pagefind-component-ui.css">
<script type="module" src="/pagefind/pagefind-component-ui.js"></script>


<div class="main">
 <article class="post-single">
 <header class="post-header">
 <h1 class="post-title">{{ .Title }}</h1>
 </header>

 <div class="post-content search-content">
 <pagefind-searchbox id="searchbox"
			 autofocus="true"
			 shortcut="/"
			 placeholder='{{ i18n "search_placeholder" }}'>
 </pagefind-searchbox>
 </div>

 </article>
</div>

<script>
 // we’re waiting for the pagefind-searchbox component to be registered 
 customElements.whenDefined('pagefind-searchbox').then(() => {
 const box = document.querySelector('pagefind-searchbox');
 // shadowRoot input, or a delegatesFocus component may expose it differently
 const tryFocus = () => {
 const input =
 box.shadowRoot?.querySelector('input') ??
 box.querySelector('input');
	// search for input boxes in two different ways above
	// and if it finds one focus it below
 if (input) {
 input.focus();
 } else {
 // component rendered but input not yet in DOM — wait one more frame
	 // wait for the shado
 requestAnimationFrame(tryFocus);
 }
 };
 // try one more time
 requestAnimationFrame(tryFocus);
 });
</script>

{{ end }}

This creates the box on the search page, ready to take input and show results.

Update (2026-06-24): The eagle eyed amongst you, have figured out this code has changed between yesterday and today. I used Pagefind’s documentation to simplify what I had yesterday even more and then got one of the llms to write a script that focuses the input box when the page loads, so that we can just start typing in whatever we need to search.

4. Make the page resemble the rest of the blog as much as possible.
#

Doing things a bit out of order and finishing up with the page first.
Leaned on Pagefind’s docs as well as Chatgpt, Claude and Gemini for this part to create a CSS file, that looks pretty native to my blog. I’ve called it include-pagefind.css and it lives in the assets/css/extended subdirectory.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67


:root {
	/* you don’t really need to use `pf-font`, 
	if you don’t have a custom font.
	for some reason, it wouldn’t render the font I specified here, 
	so I forced it with `!important` */
 --pf-font: your-font-name-here !important; 

 --pf-text: var(--primary);
 --pf-text-secondary: var(--secondary);
 --pf-text-muted: var(--secondary);

 --pf-background: var(--theme);
 --pf-border: var(--border);
 --pf-border-focus: var(--primary);

 --pf-hover: var(--tertiary);

 --pf-mark: var(--primary);

 --pf-border-radius: 8px;

 --pf-input-height: 48px;
 --pf-input-font-size: 1rem;

 --pf-result-title-font-size: 1rem;
 --pf-result-excerpt-font-size: 0.90rem;

 --pf-shadow-sm: none;
 --pf-shadow-md: none;
 --pf-shadow-lg: none;
}


.search-content {
 margin-top: 2rem;
}

pagefind-input {
 display: block;
 margin-bottom: 1.5rem;
}

pagefind-summary {
 display: block;
 margin-bottom: 1rem;
}

pagefind-results {
 display: block;
 margin-top: 1rem;
}


pagefind-results a {
 text-decoration: none;
}

pagefind-results article {
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 1rem;
 background: var(--entry);
}

pagefind-results article:hover {
 background: var(--tertiary);
}

5. Make Search Work.
#

This is a 3 step process

a. Build the blog.
#

Easy peasy. hugo build and we have our blog rendered in the public subdirectory.

b. Get Pagefind to create its index in the build directory.
#

This is easy as well.

./tools/pagefind --site public

and Pagefind creates a pagefind subdirectory in our public directory where it creates its search index after reading all the html.
All I need to do now, is just …

c. Publish!
#

Ok, I lied a teensy bit. I don’t have to do steps a. and b. because they are part of step c.
The Forgejo action checks out my committed files, pulls in Hugo from a private package repo, builds the site, then runs Pagefind to generate the index² and finally uses rysnc to sync it with the VM. Here’s the relevant section of the action.

# lots of stuff elided …

jobs:
 build-and-deploy:
 runs-on: my-big-box

 env:
 HUGO_VERSION: ${{ vars.HUGO_VERSION }}
 steps: # lots of snipped stuff …
 - name: Checkout the website repo
 uses: actions/checkout@v4
 with:
 submodules: recursive
 fetch-depth: 1
 
 - name: Build website with Hugo
 env:
 HUGO_ENVIRONMENT: production
 run: |
 hugo \
 --gc \
 --minify

 - name: Build the Pagefind search index
 run: |
 tools/pagefind \
 --site public

I thought the indexing would take a lot of time and was hesitant to use it as part of a regularly run Forgejo action workflow, but several runs show that the index generation only increases the time by at a couple of seconds at most. This is amazing!

Now I can search my own words, on my own blog, to my hearts content!

Feedback on this post?
Mail me at feedback at this domain.

P.S. Subscribe to my mailing list!

as on 2026-06-23 ↩︎
this is why i chucked it into the tools subdirectory and committed it. ↩︎

Hugo Redirect From Post in One Section to Another

feedback@janusworx.com (Mario Jason Braganza) — Thu, 06 Nov 2025 08:34:36 +0530

Problem
#

I have a post in one section of my site, say notes and miscellanea
That is my canonical post.
But I also need it to show up in the work section of my site, possibly with a another name.
A Hugo alias in the yaml front matter does not work, since both sections exist and Hugo gets confused.

Solution
#

Make sure layouts/redirect/single.html exists within your Hugo folder structure and it contains just this line …

{{- template "alias.html" (dict "Permalink" .Params.target) -}}

Create your original post as usual
Then go create a post in your other¹ section with the following metadata:

---
title: <Your title here>
#date autogenerated by my archetype. if missing, add date
date: 2025-11-06T08:30:54+05:30 
type: redirect
target: <url-to-redirect-to>
summary: <Optional text, that will appear in the sectiones listing page>
---

The date field is critical. The post might not appear where you expect it, if it’s absent.
If not date, then you might need to use weight. One of the two is needed.
In my case, the metadata looked like this:

---
title: "The Plan for My New Hetzner VM"
date: 2025-11-06T08:30:54+05:30
type: redirect
target: /nm/2025-11-06/
summary: Alone and helpless, like you've lost your fight 
---

Done! You can see an entry for “The Plan for My New Hetzner VM” in my work section as you see in the pic below. Clicking that will redirect to the actual post in my Notes and Miscellanea section!

Tada 🎉

Feedback on this post?
Mail me at feedback at this domain or [continue the discourse here][2].

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!

in my case, work ↩︎

Forgejo Workflow Action to Publish Hugo Blog

feedback@janusworx.com (Mario Jason Braganza) — Mon, 09 Jun 2025 15:09:16 +0530

I’d gotten this working earlier and wanted to post it up.
And then promptly forgot about it.
Until today that is, when I wanted to make changes to it.

Here it is for posterity.
The newest change is that the action now runs every six hours.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


name: Build and Deploy Janusworx website
on:
 schedule:
 - cron: '0 */6 * * *'
 workflow_dispatch:
 push:
 branches:
 - main

jobs:
 build-and-deploy:
 runs-on: intel # make sure there are runners tagged "intel" on your network or replace this with something of your own

 env:
 HUGO_VERSION: ${{ vars.HUGO_VERSION }}
 steps: 
 - name: Install wget & rsync
 run: apt-get update && apt-get install wget rsync -y

 - name: Install Hugo
 run: |
 wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
 && dpkg -i ${{ runner.temp }}/hugo.deb
 
 - name: Checkout the website repo
 uses: actions/checkout@v4
 with:
 submodules: recursive
 fetch-depth: 0
 
 - name: Build website with Hugo
 env:
 HUGO_ENVIRONMENT: production
 TZ: Asia/Kolkata
 run: |
 hugo \
 --gc \
 --minify
 
 - name: Install SSH key
 run: |
 mkdir -p ~/.ssh
 echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
 chmod 600 ~/.ssh/id_ed25519
 echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
 chmod 644 ~/.ssh/known_hosts

 - name: Deploy website with rsync
 env:
 REMOTE_HOST: ${{ vars.REMOTE_HOST }}
 REMOTE_USER: ${{ vars.REMOTE_USER }}
 REMOTE_PATH: ${{ vars.REMOTE_PATH }}
 run: |
 rsync -avz --delete public/ $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH

Notes:
It needs a few variables set, in the repo (repo->Settings->Actions->Variables), which are the details I need (Hugo version, Remote Host IP, Remote path to copy the built output to, and the Remote user to use for SSH) to push via rsync to the host.
Hugo version is in there, because Hugo breaks things all the time, so I upgrade cautiously.

It also needs a couple of secrets, set in the repo (repo->Settings->Actions->Secrets) to enable rsync to copy. (SSH_KNOWN_HOSTS and SSH_PRIVATE_KEY). Also best if this is a dedicated private key just for copying. Running ssh-keyscan "your-host-name-or-ip" > known_host_data.txt should dump the data you’d need for SSH_KNOWN_HOSTS

With the changes I made today, the workflow can publish

on demand
every 6 hours
every time I commit to the repo

I added time based publishing, so that I could publish future dated posts as and when the time rolls around.
With this, I think I’m done tinkering with my blog, with the exception of moving it out of my home network and out on to my VM, so that I can truly publish from anywhere. That is a big heft for me currently and a job for future Jason.

Feedback on this post?
Mail me at feedback at this domain or [continue the discourse here][3].

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!
P.P.S. Feed my insatiable reading habit.

Hack Hugo Post Metadata With Python

feedback@janusworx.com (Mario Jason Braganza) — Mon, 03 Feb 2025 09:33:37 +0530

A while back, I rejigged the sections on my site to better reflect how I think and write.
Which meant, all the urls, on all my posts changed, since they now used the new category as a slug, instead of ye old /blog.

For e.g. https://janusworx.com/blog/using-hugo-variables-to-help-with-mailto-links-in-hugo/ …
was now at, https://janusworx.com/work/using-hugo-variables-to-help-with-mailto-links-in-hugo/

After searching a bit, I found that Hugo supported aliases. For me, it would redirect the original /blog path url to its new location
Ass I had to do, was add an aliases: ["/blog/old-post-slug"] line to each post’s metadata.¹
Line 4 in the snippet below shows, what I added to fix the post above.

1
2
3
4
5
6
7
8


---
title: "Using Hugo Variables to Help With Mailto Links in Hugo"
date: 2024-05-30T18:17:35+05:30
aliases: ["/blog/using-hugo-variables-to-help-with-mailto-links-in-hugo"]
categories: ["work"]
tags: [100WordHabit, Dgplug, Hugo]
summary: Shortcodes! Hugo Variables in Shortcodes!
---

I did not want to do this by hand for 800+ posts.
One stroke of luck for me, was that I let Hugo use its default behaviour of generating url slugs from the file names. So even if the category slugs had changed (from /blog to /work or from /blog to /personal), the url slugs would stay the same. Which meant, I could whip up a script to run through all my markdown posts and add the alias line.
So I did.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


from pathlib import Path

INPUT_FOLDER = Path("old-posts-folder")
OUTPUT_FOLDER = Path("modified-posts-folder")

for each_file in INPUT_FOLDER.iterdir():
 with open(each_file, 'r') as file_to_read:
 alias_derived_from_file = each_file.stem
 contents_as_list = file_to_read.readlines()
 contents_as_list.insert(3, f"aliases: [\"/blog/{alias_derived_from_file}\"]\n")
 with open(Path(OUTPUT_FOLDER, each_file.name), 'w+') as file_to_write:
 file_to_write.writelines(contents_as_list)

It takes all the posts from my old folder, inserts the alias line and puts them into a new folder.² In essence, take each file, figure out the url slug from the file name, read in the contents as a list, insert my alias at position 3 (fourth actually. zero based indexing) of the list (below the title and date) and then write it all out to a new file.

I ran it, published the site and then went to check on the old urls with bated breath.
Hurrah, it all worked :)

it’s a list, so I can add more aliases if I want to ↩︎
no sense in botching up my originals :) ↩︎

Tmux Start Session Maximized With Three Panes

feedback@janusworx.com (Mario Jason Braganza) — Sat, 01 Feb 2025 09:27:25 +0530

So I got tired of starting up a dedicated tmux session to manage all the work related to my writing sessions. Over the past few months, I’ve boiled it down to three.
And it still irks me that I have to …

Launch Terminal
Launch Tmux
Split it into three windows err … panes.
Go to the top left pane and launch Hugo server
Switch to the right pane and then launch Emacs with whatever new post I want to write today.

So of course, a Rube Goldberg-esque, tiny bash-pipey monster took form. It now resides, chained to an alias, hssx¹ in my .bash_aliases file

1
2
3


alias hssx='cd /path/to/my/hugo/folder && \
xdotool windowsize $(xdotool getactivewindow) 100% 100% && \
tmux new-session \; split-window -h \; select-pane -l \; split-window -v \; select-pane -U \; send-keys "hugo serve" C-m \; select-pane -R'

The first line switches to my hugo folder
The second calls xdotool and maximises the terminal window
And the last line is a series of instructions to the tmux command. I’ve split it below for readability.

tmux new-session \; #Tmux start a new session
split-window -h \; # Split the window into two vertical panes
select-pane -l \; # Switch to the left pane
split-window -v \; # Split that into two horizontal panes
select-pane -U \; # Select the upper pane
send-keys "hugo serve" C-m \; # Type in `hugo serve` followed by Enter
select-pane -R # Select the right pane

And boom!

Click pic for a larger version

hugo start session and x just because all my aliases have ended with x for years and years ↩︎

Notes Now Has No RSS Feed

feedback@janusworx.com (Mario Jason Braganza) — Sat, 04 Jan 2025 16:34:20 +0530

Finally figured out how to disable RSS feeds on a post by post basis.

I needed to do this for my stream of consciousness / wip / progress notes in the Notes and Miscellanea section I did not want to disable the whole section, because some posts, I do want to leak out.

What it boiled down to was getting the RSS template to ignore sites with some parameter set in the front matter. Most posts on the web do a rss_disabled: true or something to that effect.

Joe Mooring over on the Hugo Discourse logically pointed out that I’d want such posts to be disabled in the sitemap as well, so I’d do well to just piggy back off of that.

So all I had to do was set the following in the my front matter

sitemap:
 disable: true

and then configure the embedded RSS template¹ to just range through pages that didn’t have that parameter set, like so …

{{- range where $pages "Sitemap.Disable" "ne" true }}

The original line would’ve been something like

{{- range $pages }}

You’ll need to create a new feed file by copying the contents of the embedded template to a file called rss.xml in the layouts/_default/ directory

Once that’s done, all should be hunky dory.
Posts with this frontmatter, will now no longer appear in RSS feeds or the sitemap.
To make things simpler, I edited this sections archetype, so that the next time I create a new Notes & Miscellenea post, all of this metadata is already set for me.

If you already have it defined in your theme, then override it. ↩︎

Some Site Housekeeping (New Sections and RSS Feeds)

feedback@janusworx.com (Mario Jason Braganza) — Sat, 14 Sep 2024 11:36:16 +0530

Hard at work, on the site
Click the image, to embiggen

If you look at the site today, you’ll see that ye olde blog section has disappeared.
I’ve replaced it with three sections, Work, Personal and Reading.
I’ve done this primarily for me.

While I want all my writing in one place, I want them organised in piles that correspond with the three major modes of my brain.
Work to hold everything I consider work.
Reading for the bookworm in me.
And finally personal for everything else.

The problem (my problem, in my mind) with the old blog was too much mental whiplash when I read the blog. I would go from poetry to docker to antifragility to photos with every turn of the page.
I didn’t like it.
Ergo, the reorganisation.

Every one in their own pretty place now.
Click the image, to embiggen

So now, whenever I am browsing my posts in the work section, I see only tech, and computers and docker and programming and all that good stuff.
Same with the personal stuff and the reading.

How does this affect you, my kind and gentle reader?
#

If you are a subscriber to the email list, nothing changes. I know I’ve been lax with updates, but hopefully this reorg should break up the log jam and help me write more.
If you just come here to the site, once in a while to read through, hopefully, you’ll find it easy just like me, to read posts without too much cognitive whipsawing.
And finally, if you subscribe via RSS, you my friend are probably affected.
The main feed, with all articles, still remains the same, so if you drink from the firehose, nothing changes.
If you’re subscribed to a tag specific feed, like Emacs or DGPLUG, nothing changes.
The only change is that the blog feed has disappeared. In its place are three spanking new feeds, representing my new sections.
And that about does it. Happy Reading!

Feedback on this post? Mail me at feedback at this domain

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!
P.P.S. Feed my insatiable reading habit.

Using Hugo Variables to Help With Mailto Links in Hugo

feedback@janusworx.com (Mario Jason Braganza) — Thu, 30 May 2024 18:17:35 +0530

The feedback email address seems to be getting traction and I’m getting more mail every week.

I wanted to make it easier on myself and for the kind folks who write in, by including the title of the post in the subject of the email.
Right now, every one tells me what post they are talking about, which as I said in exceedingly kind of the folks who write in. My posts seem to be reaching really considerate people :)

So a teensy bit of head-scratching later, I remembered I use shortcodes to inject custom HTML into my pages. I remembered Hugo has variables I could access. And I remembered mailto links let me add a subject parameter to the link.

So, 1+2+3=Sucess! (Or so I hoped)

The How
#

I looked up the variable, I needed to get at the post’s title. It’s called .Page.Title
I created a hpt.html in my Hugo’s layouts/shortcodes directory to hold the little snippet that’d get typed in the email’s subject field. This is all it contains:
Feedback on post: {{ .Page.Title }}
Hugo will grab this snippet whenever it runs and put in the post’s title in place of the placeholder.
And then I can use that in a mailto link like so, [feedback at this domain](dummyemail@dummydomain.local?subject="{{< hpt >}}")¹

And tada! 1+2+3 does indeed equal success! You can see in action, by clicking on the link below to send me feedback 🙂

This is a markdown formatted link. You can ofcourse use HTML ↩︎

Note to Self Footnotes Using Littlefoot.js

feedback@janusworx.com (Mario Jason Braganza) — Wed, 28 Feb 2024 08:10:36 +0530

Courtesy dothegreenthing, CC BY-NC 2.0, on Flickr

I have this amazing urge never to leave well enough alone.¹
The blog uses an amazing theme, called PaperMod.
And ofcourse, like I said, because I can’t leave well enough alone, I’ve customised it heavily.²
The fonts are different, there are various kinds of slight colour changes, I bullied Aditya into showing me how to build a Menu, there are lots of custom Hugo shortcodes and there were footnotes powered by a nifty little Javascript library called littlefoot.js.

Now everything was fine and dandy.
There are folks who do leave well enough alone. Their blogs stay up and running for years on end, held together with nothing more than spit and baling wire.
Those folks aren’t me, sadly. Aditya keeps improving the theme and I really wanted the new shiny. So I went and got it.
And everything broke!
I got weird artifacts. RSS broke. Fonts broke. Footnotes broke.³

I’ve managed to put everything back together, over the past week, and I just got footnotes working again yesterday.
So a few notes to myself, on what to do, when I break it again.⁴
Footnotes today, and the rest later …

So here goes,

The litlefoot.js repo has excellent documentation. That’s where you pulled everything from (for when you wonder, just how you figured all the CSS out)
You download a static copy with a npm install --save littlefoot and then stick it into Hugo’s static folder
Copy the extend_head.html from the theme’s layout/partials into your own. You should already have an extend_footer.html since you put in PaperMod’s hamburger stuff in there.
Adapt the Usage from a CDN step to directly access it from /littlefoot/dist/… instead of UNPKG. Put the CSS link into your extend_head.html and the JS into extend_footer.html
We want the footnotes to be numbers, rather than floating ellipses. So modify the default (blank) script call in extend_footer.html, to the stuff below. This is verbatim from the docs.

<script type="application/javascript">
 littlefoot.littlefoot(
 {
 buttonTemplate: `
 <button
 aria-label="Footnote <% number %>"
 class="littlefoot__button"
 id="<% reference %>"
 title="See Footnote <% number %>"
 />
 <% number %>
 </button>
 `
 }
 )
</script>

We want to style it a teensy bit, so those styles go into extend_head.html. For some reason, it does not pick the footnote styling correctly when you put stuff into your normal assets/css/extended/ folder.

<!--Custom littlefoot styles-->
<style>
 .littlefoot {
		/*the --attributes come from the littlefoot.js docs*/
		/*Change button background to something that works in both modes*/
 --button-background-color: #666; 
		/*Change padding to make the button rounder*/
 --button-padding: 0 0.35rem;
		/*The footnote ought to be italicised*/
 --popover-font-style: italic;
		/*Make the popover work with my theme’s colour scheme*/
 --popover-background-color: var(--theme);
 --popover-text-color: var(--primary);
 /*the oldstyle numerals used everywhere else, don’t look good here
		Neither do they align properly in the box.
		So switch them to normal*/
		font-variant-numeric: normal;
		/*Italic numerals for the footnotes*/
 font-style: italic;
 }

 .littlefoot__button {
		/*very subjective. 
		try to get the numerals centred as much as I can.*/
 line-height: 1;
 vertical-align: middle!important;
 }
</style>

Et voilà! Footnotes galore!

It looks a little weird, a little like a billie goat walked across my post, pooping pellets across the page.⁵
But it is my kind of weird now.
And I love it :)

what we in the Mumbaiyya vulgar, would call, “Gaand mein keeda”.
Please for the love of God, don’t look that up. Very not safe. ↩︎
Heavily, as in heavily for a guy who doesn’t quite know what he’s doing. ↩︎
All my fault obviously, with all the custom stuff. Nothing to do with the theme proper. ↩︎
in the far, far, far, future; future Jason! Not any time soon, you hear! ↩︎
“Pooping pellets on the posted page”, Now there’s a tongue twister 😂 ↩︎

Get Hugo to Show Images in Links When Shared on Social Networks

feedback@janusworx.com (Mario Jason Braganza) — Sun, 11 Feb 2024 19:45:52 +0530

Whenever I post a link to one of my posts on the fediverse or share it with my friends on Signal, I just get a plain vanilla link box

I wanted those rich embeds, other folk seemed to have, on the same mediums, that I would share my links on.
Looking around for how to go about doing this, led me to ogp.me, which taught me the whys and wherefores.
Looking around, a bit more for how to do this with Hugo, led me to this thread, which had this helpful comment by Kaushal Modi, which made be search the Hugo documentation which finally led me here.

I figured all I needed to do then was just to link to the image¹ I wanted in the metadata section of my post, like I did for this one.²

title: "Get Hugo to Show Images in Links When Shared on Social Networks"
date: 2024-02-11T19:45:52+05:30
categories: ["work"]
tags: ["hugo"]
images: 
 - "/images/2024/op-image-on-link-2.png"

Et voilà! Rich image previews on links!

or a list of images, if you so choose ↩︎
I use yaml. The docs have examples for toml and json formats as well ↩︎

Viewing Hugo Server Output Remotely

feedback@janusworx.com (Mario Jason Braganza) — Sun, 11 Feb 2024 15:18:13 +0530

I’ve been living a little dangerously when posting stuff on the blog.
While it’s true that I compose my posts locally on my desktop, with a locally installed Hugo, I always catch a ton of things that I miss, after I publish a post. Nearly every single time.

So the process then becomes …

Open the post on the server in Emacs (after logging in, via ssh)
Make an edit.
Build and publish.
Reload the page and re-read the post.
Find a typo. Fix it.
Repeat steps 3 & 4.
Keep the Emacs pane to keep editing and open another terminal pane, just to build and deploy.
Twenty three edits later … Be ok with what I have. (with a build and deploy, and reload and reread every couple of edits)
Do a final build and deploy

Having done this, for God knows how long now, I’m used to this workflow and decided to just lean into it.
But while I loved my edit, build, deploy, reload, reread, workflow, I felt like I was tempting the fates, everytime I did it. Besides I did not like messing with the live website like that.

So I wondered, if the way I did it locally, could be kinda sorta done remotely.
When I write posts locally, all I need to do is run hugo server in a terminal and it spins up a local server, with the all the posts, built and rendered in memory for speedy access.
Could I have that? But remote? Could I run hugo server on my server and view the results in my browser from anywhere?
About an hour of exploration later, I did have it up and running!

Here’s what I did, after delving into Hugo’s server command options

Created a subdomain (drpr.janusworx.com) and pointed it to my server. (this is where I’ll see my temporary, work-in-progress, results whenever I run hugo server on my server)
Used Nginx as a proxy to point to it. (Also serves as my SSL termination point, freeing Hugo from the burdens of HTTPS/SSL drama)
Spun up Hugo with hugo serve -D -b https://drpr.janusworx.com --appendPort=false --liveReloadPort=443 where …
a. -D builds posts marked with drafts
b. -b tells Hugo the hostname and path to the root of the blog (in my case, https://drpr.janusworx.com)
c. --appendPort is set to false, which stops appending the port number to the url (happens by default, http://localhost:1313)
d. --liveReloadPort is set to my SSL/TLS port, so that I can watch changes live with every edit.

And everything worked!
Except for the live reloading. That bit just refused to work. I could make changes and then go manually reload the web page and it would update. Grr! So near, yet so far!
Some more exploration led to Pothi Kalimuthu’s extremely helpful comment on Github …

Where I realised that Hugo’s LiveReload script (that reflects changes) needs a location in my Nginx config.
So a bit of copying and pasting and adapting and tada! 🎉

This blog post was written entirely on the server, with me watching the changes live as they happened …

And once this was done, I could just do a single, final, build and deploy to publish.

Huginn: the Rube Goldbergness of Updating Hugo

feedback@janusworx.com (Mario Jason Braganza) — Mon, 13 Mar 2023 19:35:06 +0530

Click the pic to embiggen.
Rube Goldberg illustration via James Vaughan

Ended up too sick to even tinker, since I last wrote.
Well enough now, to scratch out some prose to get my brains in gear.
Let’s start with Huginn adventure #1.
Buckle up!

Background
#

I found Huginn, and am using it as my man friday.¹

The “Problem”
#

I run Hugo on ~~two~~ three machines.
I’m tired of updating to the latest release manually.
The computer can do it for me!

Why this way? Why? Why?!
#

It’s fun!
Yes, there are other (most likely simpler) ways to do it, but Huginn is my new shiny hammer … and well you know!
Did I tell you it’s fun? :)

How now brown cow?
#

Some more background:

I could just apt install, but I’m too posh for that 😂 I want the latest version of Hugo. And the extended version at that.
I depend on two more helpers.
a. Syncthing syncs the folder that the Hugo deb package downloads to, across all my machines
b. Pushover sends me push notifications. Huginn integrates with it.

Having said that, here’s a pic of my four step scenario, followed by the output of each step.

Scrape the Hugo github releases page to get the title.²

Get the latest release title³ and fashion a url out of it.

Download Hugo to a folder.

Send myself a push notification.⁴

And tada!

So we done? No, you silly goose!

We’re done downloading the installer. Said installer now needs installing.
So my very imaginatively titled install-hugo.sh script⁵, which runs once a day via a crontab entry …

takes the file,
checks to see if it’s downloaded in the last day
and if so, installs it.

Mind you, it needs root privileges. And then it also …
4. deletes any stray debs more than a few days old.⁶

#! /usr/bin/env bash

cd /path/to/hugo/deb/file

# Install deb from the last 24 hours
find *.deb -maxdepth 1 -mmin -1440 | xargs -d '\n' dpkg -i

# Remove debs more than 2 days old
find *.deb -maxdepth 1 -mtime +2 | xargs -d '\n' rm -rf 

And now we’re done :)

Holy shiny hammer, Batgirl! It worked!

The scenario, should you install Huginn and want to import and play with, as well as the shell script are here, on Github.

Note: I had originally used the RSS agent in step one, instead of the Website agent I use now, and that was much easier. But it would detect the new feed entry and then just sit there hatching eggs, not doing anything. I wish I had a snapshot (of the missed events, not hatched eggs) but I digress. The website agent, for all its hacky xpath quackery works.

Feedback on this post? Mail me at feedback@janusworx.com

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!
P.P.S. Feed my insatiable reading habit.

it could have been girl friday too, but I call mine Bertuccio, after Edmond Dantes’ man friday ↩︎
I cannot believe, I go scrape a website and learn all that xpath voodoo, just to get a measly text string. ↩︎
And here’s where Huginn helps. It remembers the last title. And only proceeds if something has changed. ↩︎
the push notification is just like that. something whimsical for me. It’s independent of the download. I should probably have called it Step 3a. or 2b. Never mind now. ↩︎
which is also synced and available across all three machines ↩︎
I let them be for a couple of days, in case a machine is not online that day. ↩︎

What I Learned Today (9th of February, 2023)

feedback@janusworx.com (Mario Jason Braganza) — Thu, 09 Feb 2023 19:22:28 +0530

Regex
#

Started doing regex exercises, so i don’t get bored doing only python. will alternate them for now
Using Practice Makes Regexp. I have only the book though. It’s now expanded to include video solutions too. Highly recommend any of Reuven’s courses
Set up environment and did one exercise which was to look up the user’s input in a dictionary (a word dictionary. not a programming dictionary)

Linux Mint
#

Yesterday’s work was for naught

Devops
#

Kubernetes, began doing some exercises
Set up the environment today
Spoke with a friend about practicing Ansible / Devops stuff
Learnt about putting in environment variables into a docker compose file and then using them in a Django container

Hugo
#

Diddled with the code element font size on the blog, to make it look a little larger

Urdu
#

Learnt about the “tashdiid” symbol that helps add emphasis to a consonant

Physical Fitness
#

Nearing the end of my month long journey.
Have gotten over the pain hump, but the personal trainer isn’t quite sympatico with my needs. He’s a good egg, but we seem to be talking past each other. Wonder what to do when my time is up mid week next.
Did legs today. Went well. Jogged 10m after. Walked 30m after that.

What I Learned Today (8th of February, 2023)

feedback@janusworx.com (Mario Jason Braganza) — Wed, 08 Feb 2023 20:20:06 +0530

Don’t know if it’s the gym or the regular work beat, but I seem to be waking up later and later everyday. I don’t know what to do about this. I feel a little anxious about not having enough hours in the day.

Python
#

Why use comprehensions? Because it reads better.
Like I advice the young ones in DPGLUG on writing.
Write short, choppy sentences.
They read better.
With my problem sets …
- I should stop trying to generalise in advance and solve the specific problem first.
- Read stuff carefully. Don’t do more than is necessary
- Solutions take time to understand too. Budget the time

Linux Mint
#

Nemo, the file browser in Linux Mint always opens the home directory, when I click on it and there’s no apparent way to change it to a preferred directory. I want it to always open Downloads

~~A little bit of web spelunking led to an acceptable work-around.~~
1. Change the command form nemo %U to nemo Downloads
  And that does it!

Update
#

2023-02-09: Does not work. Will look for some other approach. Right now, with the workaround it opens a Downloads window alongside any other folder I click on 😂

Hugo
#

Added a plain, hamburger menu to this blog, using Aditya’s helpful instructions over on the PaperMod Discord.
With all the extra nav items, I’ve added to the header the menu would overflow on my iPhone (and probably on other folks’ phones too). So if this page scooches narrow enough, it will change the links on top to a plain menu.

Huginn / RSS
#

I often have sites that have no RSS feeds, but they’re still interesting enough to me that I want to keep tabs on them for anything new.
While I wrote a tiny program to scrape and generate a custom RSS feed to get my Poetry fix, I needed something more robust, if I wanted to do this with lots of sites.
I realised that my Huggin instance could do that for me. Huginn is documented pretty well, that even a slowpoke like me, could figure out a fix for himself, inside an hour
I also learnt something fun. How do I choose a specific, nested, div on the page when all of them are similarly named? By using the power of XPath! I found it to be a more robust way of picking something from a web page, compared to its alternatives.
It’s also pretty easy to at least get a basic XPath selection. Just inspect your element in your browser’s web inspector and a right/context click should normally give you the option to copy a link as an XPath. Getting to an href link in the div I wanted, led to something like /html/body/div[1]/div[1]/div/div/div/main/div/div[1]/div/header/h2/a/@href and BAM! I got the link!
This solves a really big problem for me. So once again, I’m pretty chuffed today as well :)

Urdu
#

Got done with the “siin” group of letters today.
It is getting more and more confusing to read, but I’m sure I’ll slowly get over it with practice.

Physical Fitness
#

More Cardio today
I’ve gotten comfortable doing an hour of active cardio at around 160, without worrying that my heart would burst. Now to focus on doing the same hour at a slower heart rate, over time.
The pain’s almost gone. Let’s see what the coming days hold.

What I Learned Today (6th of February, 2023)

feedback@janusworx.com (Mario Jason Braganza) — Mon, 06 Feb 2023 19:31:33 +0530

Everything went to hell in a handbasket today.
Time was short.
I got up late.
I forgot, I had physio.
So most things got slightly abbreviated or dropped.

Python
#

Did not complete my assignment.
Flunked it again.
But on the plus side, those 45 minutes were some of the hardest thinking and iterating, I have done in weeks. So there’s that.
And on the plusser¹ side, I am proud of having stopped and then looked for help.
That was my biggest learning for the day.

Hugo
#

I need to write about what I actually did in another post.
But I created a custom Table of Contents for my Reading page, by hacking my theme’s template and layout. It was fun.
Long story short, the theme has the ability to create a table of contents by reading all the headers elements in the page. I restricted it to just the H1 and H2 elements.²

Urdu
#

Did the “vaao” group of letters today

Physical Fitness
#

Did gym and basic physio for my back.
Wiped out!

Yes, that is the technical term for even more ↩︎
It would have gotten too unwieldy otherwise ↩︎

Notes to Self, on Self Hosting Fonts on My Hugo Blog

feedback@janusworx.com (Mario Jason Braganza) — Sun, 09 Oct 2022 14:32:28 +0530

Writing this down, so that I will not struggle the next time¹, I have to do this.

I use Valkyrie for everything on the blog in various weights, except for code and preformatted stuff, which uses Source Code Pro Medium. Both are WOFF2 fonts.
Anything in Hugo’s assets/css/extended folder will be picked up by Hugo and bundled into a single CSS file.
The fonts are in subdirectories in the static/fonts/font-name folder. Anything in the static folder shows up at the root of the site. ~/mjb/blog/static/images/test.jpg will become /images/test.jpg
I’ve created an embed-font-name.css file in the css folder above, with embed instructions generously provided by Matthew Butterick in his font documentation for Valkyrie. I adapted the same for Source Code Pro as well. Here’s a sample of my embed-source-code-pro.css

1
2
3
4
5
6
7
8


@font-face {
 font-family: 'Source Code Pro Medium';
 font-style: normal;
 font-weight: medium;
 font-stretch: normal;
 font-display: auto;
 src: url('/fonts/source-code-pro/SourceCodePro-Medium.woff2') format('woff2');
}

Finally, I created a zz-include-css.css file, which I use to overide the default CSS, so I can use my custom fonts. Since it starts with a zz it comes after the files above, that start with embed, in the final munged and minified CSS file.
These are my instructions to have most text rendered with Valkyrie and code as Source Code Pro Medium²

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


#top {
 font-family: valkyrie;
 font-variant: oldstyle-nums;
}

.post-content pre, code {
 font-family: 'Source Code Pro Medium';
 font-style: medium;
 font-weight: 500;
}

Look! So pretty :)

hopefully, never! ↩︎
I figured out what to target by inspecting the final web page in Firefox ↩︎

Line Numbers in Hugo Codeblocks

feedback@janusworx.com (Mario Jason Braganza) — Sat, 17 Sep 2022 15:16:19 +0530

I want my code blocks on the blog to sometimes have line numbers.
Looking at the Hugo docs here and here led me to the linenos argument.

While we’d start our code blocks like (```python)¹, all I need more is to add the line number argument like so.

Vanilla code block …

print(f"""
	“It’s silly to try to escape other people’s faults. 
	They are inescapable. Just try to escape your own.”
	— Marcus Aurelius
	""")

print(f"""
	“Just that you do the right thing. 
	The rest doesn’t matter.” 
	– Marcus Aurelius
	""")

Now, using the linenos option, I can be all fancy to show …

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


print(f"""
	“It’s silly to try to escape other people’s faults. 
	They are inescapable. Just try to escape your own.”
	— Marcus Aurelius
	""")

print(f"""
	“Just that you do the right thing. 
	The rest doesn’t matter.” 
	– Marcus Aurelius
	""")

All I did was, start my code block with a ( ```python {linenos=true} )²

Hurrah!

don’t type the round brackets, they’re just there, so I can see/show what I am doing. ↩︎
once again, ignore the round brackets ↩︎

Drafts App Needs Escaping if I Am to Use Hugo Shortcodes

feedback@janusworx.com (Mario Jason Braganza) — Wed, 14 Sep 2022 14:35:09 +0530

When I finally figured out how to get line breaks working on my microblog, I ran into another sort of hiccough, when I tried doing that from my phone.
I use the Drafts app on my phone and tablet to slice and dice all manner of text and to send it to various locations as I please.

One of those is a workflow, that lets me shoot text to a folder on my server which is then published (via a script) on the microblog.
And everytime I typed my {{< hbr >}} Hugo shortcode to let me have a line break in that post¹, it would just publish gibberish² instead of giving me said break.

A bit of twiddling and experimenting led me to the solution.
If I escaped the leading { character with a \, so that I typed \{{< hbr >}}, it then worked just fine!

P.P.P.S. I need to escape my Hugo shortcodes with /* */ if I want to display them in my posts. Like so, {{/* some-shortcode */}}

when it gets published on the blog, that is. ↩︎
rather, ascii representations of said characters, but gibberish is the correct technical term ↩︎

Line Breaks on My Microblog

feedback@janusworx.com (Mario Jason Braganza) — Wed, 31 Aug 2022 21:20:14 +0530

I use a (not quite) hidden blog to collect all sorts of bits and bobs and to (selectively and automatically) publish them to my fediverse or twitter accounts.

The one thing that constantly bugged me, was that it would not accept line breaks to differentiate between paragraphs.
Like this post, here.

I don’t know if it’s my theme or a Hugo thing.
And try as I might, I couldn’t quite figure it out.
Since I don’t quite have the time to dig into the code, I just decided to add a couple of <br> tags. And that did the trick! ¹

And now it all looks as it should!

I rolled it into a shortcode, which has a <br> followed by a couple of spaces, but that is absolutely not necessary ↩︎

Setting Canonical URLs in Hugo

feedback@janusworx.com (Mario Jason Braganza) — Sun, 17 Jul 2022 21:57:42 +0530

I steal quite a bit from other folk, to put on my blog.¹
Case in point, is my last post where I stole the image from Tom Gauld.
Or a few Seth Godin posts, somewhere on the blog, that I have posted in their entirety.

While I do credit them in the post, I wished there was a way, I could programmatically tell the search engines and the bots of the world that I did in fact, steal from someplace and that they should actually be looking over there and leading people there.
A little bit of searching, reavealed that there is in fact, such a way to do it.
It’s called the Canonical URL.
In a nutshell, it tells the machines to guide folk there, because that is the source of truth.

And this is where my move to Hugo came in handy.
Hugo makes doing this a breeze.
The idea revolves around processing a canonical tag that we add to the front matter of said post.
Like so …

canonical: "the source html link to the original content."

Now to have Hugo process that, we add the following code snippet to the head section of our blog’s template.
In my case, I copied head.html from my theme’s layouts/partials folder to my own layouts/partials in the blog’s structure and modified it by adding this code block.²

{{- if isset .Params "canonical" -}}
 <link rel="canonical" href="{{ .Params.canonical }}" />
{{- else -}}
 <link rel="canonical" href="{{ .Permalink }}" />
{{- end }}

And that about does it.
I stole this code snippet from a CloudCannon blog post.
And if you check the HTML source for this post of mine, you’ll see that the canonical site, does indeed point to CloudCannon’s site.

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!
P.P.S. Feed my insatiable reading habit.

because just being on the web, for as long as I have, I know bitrot is a thing. ↩︎
if you do have a canonical line in the post, make sure to comment it out ↩︎

All About the Move to Hugo

feedback@janusworx.com (Mario Jason Braganza) — Fri, 13 May 2022 20:00:00 +0530

I finally got done, moving the blog from Nikola to Hugo today.
I already wrote about why I did it.
These are a few more thoughts about what went into the endeavour; and some colophonesque details.

One, really small hope, is that it will help me learn Go.
The DevOps world that I now seek to enter, speaks Go.
I also, now run two Go programs that are indispensible to me, Hugo and Miniflux.
And being the control freak, that I am, I’d love to tweak them to just how I like it.
Nikola did help learn me Python, after all.

Speaking of Nikola, I’ve used it for close to four years now, until I moved.
I was a refugee from a self hosted Ghost install. ¹
I love it to death.
It’s done all I’ve asked of it … and more.
And it’s been fast and stable all these years.
The community (primarily Chris) have been kind and patient and really helpful.
Chris and Roberto and the rest of the gang, have built something rugged and enduring.

So other than having something fun to do while I was down in the dumps, why did I move to Hugo?
I like to learn by reading.
So other than practicing Go, the best way to learn it would be to read code.
And what better place to read code, than that of the tool I use to write? ²

Another point, is that I probably outgrew what Nikola gave me out of the box, and customizing it (and learning how to) was something that I just couldn’t quite wrap my head around.
While Hugo is probably the same way and its documentation is not quite as structured as Nikola’s, it is pretty popular and I can get answers to what I want to do, really, really quickly. ³
And Hugo has an awesome book, to learn from.

So, how did the move go?

I wrote a tiny bespoke Python script, ⁴ to convert all my Nikola front matter to Hugo front matter.
That took me half a day, but it converted 677 posts, that I was dreading, I’d have to do by hand and would take me weeks.
I wrote another bespoke script to convert some gnarly tags that Hugo choked on.
And just like that, my biggest boulder just fell into place.
That left me free to write a couple of what Hugo calls, Shortcodes, to ease my writing.
I started with shortcode (a custom horizontal rule) and ended up with four! ⁵
I customised the base as well as the theme’s config to make the site look like I wanted it; (from its various options.)
And I added some custom CSS, to have custom horizontal rule and footnote styles, change the look of the links in the menu up top, style my subscribe form, and
Included the beautiful font you are reading this in.

In a word, slow, steady, iterative progress until I was done.

And who and what inspired me and who do I owe gratitude to?

Priyanka Saggu, for egging me on to do this project.
Bhavin Gandhi turned me onto the awesomeness that was Hugo.
Pradyun Gedam for making me green with envy, with his minimalistic blog and the thoughtful touches he made. ⁶
Navendu Pottekkat, whose code, ~~I stole~~ helped me style my subscribe page.
Bjørn Erik Pedersen and Steve Francia and the rest of the gang, for making Hugo
Aditya Telange, for the making the pretty, pretty, little PaperMod theme.
Kushal Das, for sharing my love of typography and beating me to a custom font on his website.
Matthew Butterick, for the gorgeousness, that is Valkyrie. The site originally used the beautiful Charter, but while it looked fetching on Windows and MacOS, it would not render as nicely on Linux machines. ⁷
With Valkyrie, that no longer is the case. I have something beautiful to look at, all day! ⁸
Robin Williams, for teaching me all about CRAP and everthing I know about type and design.

They decided to move their editor away from being purely Markdown. I get why they did it. But it just wasn’t for me. I wanted something simple. ↩︎
sorta kinda, like learning about cars, by looking under the hood of your own car, like in the old days ↩︎
even with something as weird and esoteric as the site refusing to build, because of emacs crapping in the content folder ↩︎
related post coming later … ↩︎
the aforementioned horizontal rule, two to center images and captions and one for my subscription ask at the bottom of the post. ↩︎
Nearly everything I did here, I cribbed from his blog config ↩︎
which ofcourse, is where I spend my entire day. ↩︎
I was hesitant to plonk down the money for Valkyrie. But I forgot all about that, once I saw my words rendered in the font. So, I am chalking this down to an investment. Besides Matthew’s prices are value for money (I’m just a little broke at the moment, hence the quibbling) and his usage license is generous. ↩︎

Begin Again

feedback@janusworx.com (Mario Jason Braganza) — Fri, 06 May 2022 20:23:09 +0530

Moved over from Nikola, to Hugo today.

In two minds about what to do with all the old posts. Do I just shed them all, like I’ve done in the past? Or work to move them over?

Maybe, tomorrow’ll bring clarity.

In the meanwhile, this is a house under construction, y’all!
Stuff does not work, stuff looks wonky, and stuff both, looks wonky and doesn’t work.
I’ll be at it, on and off, over the next few weeks, trying to make this home.

Why did I do this?
Because I’ve been in a disheartening rut of sorts.
The long slog, to switching careers and all the learning that goes with it, is weighing me down.
So I wanted to do something fun.
Ergo, Hugo’s my new toy.

The blog looks the way it does, thanks to the good people at Hugo Headquarters and Aditya Telange’s PaperMod.
And I know of all this fanciness, thanks to my two young friends who run Hugo themselves, Bhavin Gandhi, and Pradyun Gedam.

Hugo on Janusworx

Moved From Papermod to Blowfish

Why move to Blowfish? #

Blowfish specific things for future Jason to note. #

Big Picture things #

Configuration #

Content Structure #

Archetypes #

i18n (Internationalisation) #

Layout Overrides #

RSS #

Search #

Littlefoot #

Redirect #

Shortcodes #

Static + Tools #

Themes #

CSS #

Miscellanea #

Go Templates: #

You Can Now Search this Blog

tldr: https://janusworx.com/search #

The Plan #

Installing it and wiring it all up #

1. Installation #

2. Creating an entry for search in the navigation menu #

3. Creating the search page. #

a. I needed a placeholder page that I could render some layout (a template) into. #

b. Creating the search layout. #

4. Make the page resemble the rest of the blog as much as possible. #

5. Make Search Work. #

a. Build the blog. #

b. Get Pagefind to create its index in the build directory. #

c. Publish! #

Hugo Redirect From Post in One Section to Another

Problem #

Solution #

Forgejo Workflow Action to Publish Hugo Blog

Hack Hugo Post Metadata With Python

Tmux Start Session Maximized With Three Panes

Notes Now Has No RSS Feed

Some Site Housekeeping (New Sections and RSS Feeds)

How does this affect you, my kind and gentle reader? #

Using Hugo Variables to Help With Mailto Links in Hugo

The How #

Note to Self Footnotes Using Littlefoot.js

Get Hugo to Show Images in Links When Shared on Social Networks

Viewing Hugo Server Output Remotely

Huginn: the Rube Goldbergness of Updating Hugo

Background #

The “Problem” #

Why this way? Why? Why?! #

How now brown cow? #

What I Learned Today (9th of February, 2023)

Regex #

Linux Mint #

Devops #

Hugo #

Urdu #

Physical Fitness #

What I Learned Today (8th of February, 2023)

Python #

Linux Mint #

Update #

Hugo #

Huginn / RSS #

Urdu #

Physical Fitness #

What I Learned Today (6th of February, 2023)

Python #

Hugo #

Urdu #

Physical Fitness #

Notes to Self, on Self Hosting Fonts on My Hugo Blog

Line Numbers in Hugo Codeblocks

Drafts App Needs Escaping if I Am to Use Hugo Shortcodes

Line Breaks on My Microblog

Setting Canonical URLs in Hugo

All About the Move to Hugo

Begin Again

Why move to Blowfish?
#

Blowfish specific things for future Jason to note.
#

Big Picture things
#

Configuration
#

Content Structure
#

Archetypes
#

i18n (Internationalisation)
#

Layout Overrides
#

RSS
#

Search
#

Littlefoot
#

Redirect
#

Shortcodes
#

Static + Tools
#

Themes
#

CSS
#

Miscellanea
#

Go Templates:
#

tldr: https://janusworx.com/search
#

The Plan
#

Installing it and wiring it all up
#

1. Installation
#

2. Creating an entry for search in the navigation menu
#

3. Creating the search page.
#

a. I needed a placeholder page that I could render some layout (a template) into.
#

b. Creating the search layout.
#

4. Make the page resemble the rest of the blog as much as possible.
#

5. Make Search Work.
#

a. Build the blog.
#

b. Get Pagefind to create its index in the build directory.
#

c. Publish!
#

Problem
#

Solution
#

How does this affect you, my kind and gentle reader?
#

The How
#

Background
#

The “Problem”
#

Why this way? Why? Why?!
#

How now brown cow?
#

Regex
#

Linux Mint
#

Devops
#

Hugo
#

Urdu
#

Physical Fitness
#

Python
#

Linux Mint
#

Update
#

Hugo
#

Huginn / RSS
#

Urdu
#

Physical Fitness
#

Python
#

Hugo
#

Urdu
#

Physical Fitness
#