Blogging with orgmode, hugo and nix

How I yet again decided to set up another iteration of this blog. This time using nix, hugo and of course orgmode..

Introduction

This is my third attempt of setting up an easy to use blogging workflow. The first time I chose to try out use ox-hugo as well as github pages. Initially everything worked, but I quickly stopped writing posts because my initial setup using a single orgmode file with ox-hugo did not match my notetaking workflow, where I basically generate a bunch of random files and some of them get reworked or updated enough for me to think about publishing them. Also I wasn’t particularly happy about hugo, especially since I didn’t find a theme that I liked, so in the end I decided to put together my own, which was basically exactly what I had planned on not doing. Ideally I just want to publish my content without having to take care of anything else than the content I produce (apart from the whole theming I also took a short dive into hugos templating, when I tried to include an RSS feed and it simply wasn’t fun).

Kind of fed up with my initial attempt at creating a blog at some point I revisited the idea. This time I only shortly looked at hugo, but kind of had the idea in mind of using only emacs to set up everything. This time I took a closer look at org-publish and decided to build my own little solution, what I came up with was oblivious, a small 100 LoC shell script that in conjunction with emacs and org-mode can - probably among other things - function as a static site generator. Basically org-publish is used to define the way the website looks like, and a bunch of language-agnostic fetchers as well as templating snippets are defined (all using various built-in features of orgmode) and then emacs is executed using the oblivious command loading/tangling the org-file containing all the logic and settings that make up the site. I also included some some hackish lines that “infect” a users emacs config so one can start exporting everything using org-publish. Guess I’m part of the old and venerable society of static site generator generators now - yay!

This post describes my current setup in detail, I also link to the shell.nix as well as the config.yml at the end so anyone should be able to set up a similiar site pretty quickly.

Getting started the nix way

Since my little excursion into org-publish I have increasingly worked with NixOS and since totally oblivious to me after a reinstall my static site generator stopped working I started looking for another blogging workflow yet again, this time I revisited the idea of using hugo, but I wanted to do it in a nix way: set up a shell.nix file that generates my hugo environment. There are a bunch of examples on how to write such a nix file:

I started out with an empty directory:

mkdir blog && cd blog

After I found myself a theme that seems to be nice and regularly updated, I started out with this shell.nix:

{ pkgs ? import <nixpkgs> {} }:

with pkgs;

let

  hugo-theme-papermod = runCommand "hugo-theme-papermod" {
    pinned = builtins.fetchTarball {
      name = "hugo-theme-papermod"; # Store path name
      url = https://github.com/adityatelange/hugo-PaperMod/archive/master.tar.gz;
      sha256 = "03171mbdikjpx7f6m8ga9xgb62a7ars030dwpxv249vxs4zd2lq4"; # Hash obtained using `nix-prefetch-url --unpack <url>`
    };
    patches = [];

    preferLocalBuild = true;
  }
  ''
    cp -r $pinned $out
    chmod -R u+w $out

    for p in $patches; do
      echo "Applying patch $p"
      patch -d $out -p1 < "$p"
    done
  '';
in

  mkShell {
    buildInputs = [
      hugo
    ];

  shellHook = ''
    mkdir -p themes
    ln -snf "${hugo-theme-papermod}" themes/hugo-theme-papermod
  '';
  }

This fetches the most up to date version of the theme as tarball, then optionally applies patches to that tarball and finally creates an item in the nix-store that contains the most recent patched version of the theme.

This is especially interesting because using standard unix patches, it is possible to keep the configuration that is specific to the blog separate from the code of the theme.

Note that the link inside fetchTarball always points to the most recent version of the theme, so that executing nix-shell will fail due to containing the wrong sha checksum whenever there is an update on the theme repo. In this case the correct checksum can be retrieved like this:

$ nix-prefetch-url --unpack https://github.com/adityatelange/hugo-PaperMod/archive/master.tar.gz
unpacking...
[0.2 MiB DL]
path is '/nix/store/kr5m0bbs9sj8zvlx3ymm4ffiif3jvkwj-master.tar.gz'
0b8m1n2vn29mmgc9l2jpw9aiqbixh4nihsw0h43b04qwzh22ngaj

First create a new hugo site using nix-shell:

~/blog$ nix-shell -p hugo
~/blog$ hugo new site .
~/blog$ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── shell.nix
├── static
└── themes

After making sure the checksum in shell.nix is correct and a nix-shell can be opened inside the blog directory in order to set up the themes directory:

~/blog$ nix-shell
unpacking 'https://github.com/adityatelange/hugo-PaperMod/archive/master.tar.gz'...
these derivations will be built:
  /nix/store/jx1ra8dxlhrp3q1imxpl93pn862p9nsb-hugo-theme-papermod.drv
building '/nix/store/jx1ra8dxlhrp3q1imxpl93pn862p9nsb-hugo-theme-papermod.drv'...
[nix-shell:~/blog]$ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── shell.nix
├── static
└── themes
    └── hugo-theme-papermod -> /nix/store/1vmg77dsz9rjwccjw2wqjhp4vpsgh49n-hugo-theme-papermod

Now we can start setting up our blog: At this point I added a blog/org directory to house my posts (I hardlink the notes I want to publish from my notes directory here) and blog/patches in order to house the patches that customize the site to my liking.

In order to get started, remove the config.toml and instead lets grab the example configuration from the themes wiki page and set it up. At this point I added images to the blog/static folder, cause that is apparently the root location from where they are fetched by the config:

baseURL: "https://oblivious.observer"
title: oblivious observer
paginate: 5
theme: hugo-theme-papermod

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

minify:
    disableXML: true
    minifyOutput: true

params:
    env: production # to enable google analytics, opengraph, twitter-cards and schema.
    title: oblivious.observer
    description: "a blog"
    author: Me
    # author: ["Me", "You"] # multiple authors
    images: ["<link or path of image for opengraph, twitter-cards>"]

    defaultTheme: auto # dark, light
    disableThemeToggle: false

    ShowReadingTime: true
    ShowShareButtons: false
    disableSpecial1stPost: false
    comments: false
    hidemeta: false
    showtoc: false
    tocopen: false

    assets:
        # disableHLJS: true # to disable highlight.js
        # disableFingerprinting: true
        favicon: "/observer.png"
        favicon16x16: "/observer.png"
        favicon32x32: "/observer.png"
        apple_touch_icon: "/observer.png"
        safari_pinned_tab: "/observer.png"

    label:
        text: "Oblivious Observer"
        icon:  /observer.png
        iconHeight: 35

    # profile-mode
    profileMode:
        enabled: true # needs to be explicitly set
        title: Oblivious Observer
        subtitle: "simply a tech block.."
        imageUrl: "/observer.png"
        imageWidth: 120
        imageHeight: 120
        imageTitle:
        buttons:
            - name: Posts
              url: posts
            - name: Tags
              url: tags
            - name: Search
              url: search

    # home-info mode
    homeInfoParams:
        Title: "Hi there"
        Content: just a tech block..

    socialIcons:
        - name: github
          url: "https://github.com/observer"
        - name: rss
          url: "/index.xml"

    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
        keys: ["title", "permalink", "summary", "content"]

outputs:
    home:
        - HTML
        - RSS
        - JSON # is necessary


menu:
    main:
            #        - identifier: categories
            #          name: categories
            #          url: /categories/
            #          weight: 10
        - identifier: search
          name: search
          url: /search/
          weight: 19
        - identifier: tags
          name: tags
          url: /tags/
          weight: 20
        - identifier: rss
          name: rss
          url: /index.xml
          weight: 21
          #        - identifier: example
          #          name: example.org
          #          url: https://example.org
          #          weight: 30

# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
# pygmentsUseClasses: true
# markup:
#     highlight:
#         # anchorLineNos: true
#         codeFences: true
#         guessSyntax: true
#         lineNos: true
#         style: monokai

Setting up Doom Emacs

From now on posts can be generated using ox-hugo. In order to set up ox-hugo on doom emacs, add a few lines to the configuration and use the doom script to install the packages:

$ cat << EOF >> ~/.doom.d/packages.el
(package! ox-hugo)
EOF
$ cat << EOF >> ~/.doom.d/packages.el
(use-package! ox-hugo
  :after ox)
EOF
$ ~/.emacs.d/bin/doom sync

Using `ox-hugo` from Emacs

Then in order to post create a org file in blog/org or link one from somewhere else in there, write something and press C-c C-e H H in order to export a blog post. Only make sure you have set up the minimal necessary tags for ox-hugo, which seems to be #+HUGO_BASE_DIR:

#+HUGO_BASE_DIR: ~/blog
#+hugo_tags: NixOS orgmode hugo
#+hugo_custom_front_matter: :ShowToc true

Note that the theme specific options, such as ShowToc, can be set using hugo_custom_front_matter.

Patching / Changing the theme

Now at this point the idea would be to patch the theme before it is generated, however there is another option: Hugo allows for Overrides, basically replace any file in the theme directory with another one that can be found under the same path inside your site directory structure and you automatically override that part of the theme.

Although I initially planned to make a bunch of patches which I keep inside of a patch directory, I decided against that for now. Initially I think I’d like to keep everything inside of a single shell.nix file.

Font Awesome Fingerprint and About Icons

Initially I added in an additional icon so I could link to my public key as well as an icon where I can link to a description on how this blog is built. Icons in the Papermod theme are defined by adding in svg code into blog/themes/hugo-theme-papermod/layouts/partials/svg.html. Inside the shellHook this can be done with a single sed statement:

# add the font awesome fingerprint icon as gpg icon (source: https://fontawesome.com/icons/fingerprint)
# also add the address card icon as about icon      (source: https://fontawesome.com/icons/address-card)
mkdir -p layouts/partials

sed '/^{{- else if $icon_name -}}.*/i{{- else if (eq $icon_name "gpg") -}}\n\<svg aria-hidden\=\"true\" focusable\=\"false\" data-prefix\=\"fas\" data-icon\=\"fingerprint\" class\=\"svg-inline--fa fa-fingerprint fa-w-16\" role\=\"img\" xmlns\=\"http:\/\/www.w3.org\/2000\/svg\" viewBox\=\"0 0 512 512\"\>\<path fill\=\"currentColor\" d\=\"M256.12 245.96c-13.25 0-24 10.74-24 24 1.14 72.25-8.14 141.9-27.7 211.55-2.73 9.72 2.15 30.49 23.12 30.49 10.48 0 20.11-6.92 23.09-17.52 13.53-47.91 31.04-125.41 29.48-224.52.01-13.25-10.73-24-23.99-24zm-.86-81.73C194 164.16 151.25 211.3 152.1 265.32c.75 47.94-3.75 95.91-13.37 142.55-2.69 12.98 5.67 25.69 18.64 28.36 13.05 2.67 25.67-5.66 28.36-18.64 10.34-50.09 15.17-101.58 14.37-153.02-.41-25.95 19.92-52.49 54.45-52.34 31.31.47 57.15 25.34 57.62 55.47.77 48.05-2.81 96.33-10.61 143.55-2.17 13.06 6.69 25.42 19.76 27.58 19.97 3.33 26.81-15.1 27.58-19.77 8.28-50.03 12.06-101.21 11.27-152.11-.88-55.8-47.94-101.88-104.91-102.72zm-110.69-19.78c-10.3-8.34-25.37-6.8-33.76 3.48-25.62 31.5-39.39 71.28-38.75 112 .59 37.58-2.47 75.27-9.11 112.05-2.34 13.05 6.31 25.53 19.36 27.89 20.11 3.5 27.07-14.81 27.89-19.36 7.19-39.84 10.5-80.66 9.86-121.33-.47-29.88 9.2-57.88 28-80.97 8.35-10.28 6.79-25.39-3.49-33.76zm109.47-62.33c-15.41-.41-30.87 1.44-45.78 4.97-12.89 3.06-20.87 15.98-17.83 28.89 3.06 12.89 16 20.83 28.89 17.83 11.05-2.61 22.47-3.77 34-3.69 75.43 1.13 137.73 61.5 138.88 134.58.59 37.88-1.28 76.11-5.58 113.63-1.5 13.17 7.95 25.08 21.11 26.58 16.72 1.95 25.51-11.88 26.58-21.11a929.06 929.06 0 0 0 5.89-119.85c-1.56-98.75-85.07-180.33-186.16-181.83zm252.07 121.45c-2.86-12.92-15.51-21.2-28.61-18.27-12.94 2.86-21.12 15.66-18.26 28.61 4.71 21.41 4.91 37.41 4.7 61.6-.11 13.27 10.55 24.09 23.8 24.2h.2c13.17 0 23.89-10.61 24-23.8.18-22.18.4-44.11-5.83-72.34zm-40.12-90.72C417.29 43.46 337.6 1.29 252.81.02 183.02-.82 118.47 24.91 70.46 72.94 24.09 119.37-.9 181.04.14 246.65l-.12 21.47c-.39 13.25 10.03 24.31 23.28 24.69.23.02.48.02.72.02 12.92 0 23.59-10.3 23.97-23.3l.16-23.64c-.83-52.5 19.16-101.86 56.28-139 38.76-38.8 91.34-59.67 147.68-58.86 69.45 1.03 134.73 35.56 174.62 92.39 7.61 10.86 22.56 13.45 33.42 5.86 10.84-7.62 13.46-22.59 5.84-33.43z\"\>\<\/path\>\<\/svg\>\n{{- else if (eq $icon_name "about") -}}\n\<svg aria-hidden\=\"true\" focusable\=\"false\" data-prefix\=\"far\" data-icon\=\"address-card\" class\=\"svg-inline--fa fa-address-card fa-w-18\" role\=\"img\" xmlns\=\"http:\/\/www.w3.org\/2000\/svg\" viewBox\=\"0 0 576 512\"\>\<path fill\=\"currentColor\" d\=\"M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H48V80h480v352zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2zM360 320h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8z\"\>\<\/path\>\<\/svg\>' themes/hugo-theme-papermod/layouts/partials/svg.html > layouts/partials/svg.html

Add comments

I’m using utteranc.es as commenting system, which in turn uses the github API to store the comments inside of github issues. Since I’m using github pages anyway, I’m alright with this and prefer it to third party commenting systems.

In order to set up utterances a utterances.json has to be generated inside the blog/public folder, also a partial with the utteranc.es setup has to be created:

cat << EOF > ~/blog/public/utterances.json
{
  "origins": [
    "https://oblivious.observer",
    "https://observer.github.io"
  ]
}
EOF

cat << EOF > ~/blog/layouts/partials/comments.html
<!-- Comments area start -->
  <script src=https://utteranc.es/client.js
    repo=observer/observer.github.io
    issue-term=url
    label=💬
    theme=photon-dark
    crossorigin=anonymous
    async>
  </script>
<!-- Comments area end -->
EOF

I knid of like the idea of not having a footer that screams how and using which technology the site is built on every post, so I chose to remove it, there is this post explaining my workflow in detail as well as a short tl;dr I link to in the about page (probably look at the link in the about page, this one will probably be forgotten and outdated in no time). To remove the footer sed can be used:

sed '/<footer/,/<\/footer/d' themes/hugo-theme-papermod/layouts/partials/footer.html > layouts/partials/footer.html

Add a CNAME file

In order to make sure the site is published under its custom domain, a CNAME file has to be created inside the public directory:

mkdir -p ~/blog/public
cat << EOF > ~/blog/public/CNAME
oblivious.observer
EOF

Image Magic with `imagemagick`

The Papermod themes config.yml contains a few lines that can be used to set up image files such as the sites favicon in the blog/static directory. Since I basically started out with only a single 16x16 png file, I decided to try setting everything up using the shell.nix.

Initially I converted the image to text using base64:

blog/static$ base64 observer.png
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9
kT1Iw0AYht+mikUqCnYQcchQXbQgKuKoVShChVArtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB
8AfEydFJ0UVK/C4ptIjxjuMe3vvel7vvAKFeZprVMQ5oum2mEnExk10Vu14RQh/NUYgys4w5SUrC
d3zdI8D3uxjP8q/7c/SoOYsBAZF4lhmmTbxBPL1pG5z3iSOsKKvE58RjJl2Q+JHrisdvnAsuCzwz
YqZT88QRYrHQxkobs6KpEU8RR1VNp3wh47HKeYuzVq6y5j35C8M5fWWZ67SGkMAiliBBhIIqSijD
Rox2nRQLKTqP+/gHXb9ELoVcJTByLKACDbLrB/+D37218pMTXlI4DnS+OM7HMNC1CzRqjvN97DiN
EyD4DFzpLX+lDsx8kl5radEjoHcbuLhuacoecLkDDDwZsim7UpCWkM8D72f0TVmg/xboXvP61jzH
6QOQpl4lb4CDQ2CkQNnrPu8Otfft35pm/34AiXxysDj1F4kAAAAGYktHRAD/AP8A/6C9p5MAAAAJ
cEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfkCBAQLiQKSqHnAAAAGXRFWHRDb21tZW50AENyZWF0
ZWQgd2l0aCBHSU1QV4EOFwAAAiRJREFUOMulk7FO40AQhj/HS7wGOQYSB6KIiCJFGioKLKFDouYx
eCiKE+/ASyCBeAOEIlEQhDf2OSRKNo7XvgJiHXdX3f3NjGa0M//M/GuFYVgaYwAoigJjDGVZUhQF
AIvFgr29PYwxGGPQWpNlGb7vk+c5AuDk5IQkSXAch9FoxPb2Nt1uF4DHx0eCIMC2bYwxzOdzkiRh
Z2eHp6cnapPJhNFoRK/XYzab0e12CcOQg4MDpJR0Oh3SNOXw8JBer4eUkuPjY7IsoygKrKOjo1JK
+U8jTKdTxKbjMFaqKlCr1bAsC2MMUkpMlhG9vlYxYduUQBrHdPb3EX6jwYYQCCEAKgswXywA2HRd
8jwnW60A2BCCra0tsiz7WOK383P6/T7NZhOAOI4B2N3dBaDdbgMQRRHtdpsoigD4fnWFWC6XjMdj
xuMxv+Pi4oI4jkmSpIqt/clkgmVZHwxarRb9fv+PAmsmd3d3/A0/0hRhWRZBEDAYDDg9PQXg+vqa
ZrNZFQjDEIDLy0sAbm5uGA6HvDw/U4MSpRTq8xIAg8Gg8td7+RVBEKCUYrlcIlarnHq9jtaa29tb
AJRSVfe1Bar8cDjEGPMh5XQ2A0BKWbHQWn+Z/ezsDM/zUEqhtcbzPFzX5eXtDeE4DovPewOUZYnj
OF/0YNs20+kUAM/z0Frz/v5OWZaIer2O67rc399XD9YMWq0WAA8PD1VuLftGo4Hv+1j/+51/Agiw
QFrcT1GrAAAAAElFTkSuQmCC

Then in shell.nix define a string:

...
  observer-16x16 = ''
    iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9
    kT1Iw0AYht+mikUqCnYQcchQXbQgKuKoVShChVArtOpgcukfNGlIUlwcBdeCgz+LVQcXZ10dXAVB
    8AfEydFJ0UVK/C4ptIjxjuMe3vvel7vvAKFeZprVMQ5oum2mEnExk10Vu14RQh/NUYgys4w5SUrC
    d3zdI8D3uxjP8q/7c/SoOYsBAZF4lhmmTbxBPL1pG5z3iSOsKKvE58RjJl2Q+JHrisdvnAsuCzwz
    YqZT88QRYrHQxkobs6KpEU8RR1VNp3wh47HKeYuzVq6y5j35C8M5fWWZ67SGkMAiliBBhIIqSijD
    Rox2nRQLKTqP+/gHXb9ELoVcJTByLKACDbLrB/+D37218pMTXlI4DnS+OM7HMNC1CzRqjvN97DiN
    EyD4DFzpLX+lDsx8kl5radEjoHcbuLhuacoecLkDDDwZsim7UpCWkM8D72f0TVmg/xboXvP61jzH
    6QOQpl4lb4CDQ2CkQNnrPu8Otfft35pm/34AiXxysDj1F4kAAAAGYktHRAD/AP8A/6C9p5MAAAAJ
    cEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfkCBAQLiQKSqHnAAAAGXRFWHRDb21tZW50AENyZWF0
    ZWQgd2l0aCBHSU1QV4EOFwAAAiRJREFUOMulk7FO40AQhj/HS7wGOQYSB6KIiCJFGioKLKFDouYx
    eCiKE+/ASyCBeAOEIlEQhDf2OSRKNo7XvgJiHXdX3f3NjGa0M//M/GuFYVgaYwAoigJjDGVZUhQF
    AIvFgr29PYwxGGPQWpNlGb7vk+c5AuDk5IQkSXAch9FoxPb2Nt1uF4DHx0eCIMC2bYwxzOdzkiRh
    Z2eHp6cnapPJhNFoRK/XYzab0e12CcOQg4MDpJR0Oh3SNOXw8JBer4eUkuPjY7IsoygKrKOjo1JK
    +U8jTKdTxKbjMFaqKlCr1bAsC2MMUkpMlhG9vlYxYduUQBrHdPb3EX6jwYYQCCEAKgswXywA2HRd
    8jwnW60A2BCCra0tsiz7WOK383P6/T7NZhOAOI4B2N3dBaDdbgMQRRHtdpsoigD4fnWFWC6XjMdj
    xuMxv+Pi4oI4jkmSpIqt/clkgmVZHwxarRb9fv+PAmsmd3d3/A0/0hRhWRZBEDAYDDg9PQXg+vqa
    ZrNZFQjDEIDLy0sAbm5uGA6HvDw/U4MSpRTq8xIAg8Gg8td7+RVBEKCUYrlcIlarnHq9jtaa29tb
    AJRSVfe1Bar8cDjEGPMh5XQ2A0BKWbHQWn+Z/ezsDM/zUEqhtcbzPFzX5eXtDeE4DovPewOUZYnj
    OF/0YNs20+kUAM/z0Frz/v5OWZaIer2O67rc399XD9YMWq0WAA8PD1VuLftGo4Hv+1j/+51/Agiw
    QFrcT1GrAAAAAElFTkSuQmCC
  '';
...

Then add imagemagick to the buildInputs and finally add some lines in order to make sure create a bunch of upscaled images using imagesmagicks point filter:

...
    buildInputs = [
      hugo imagemagick
    ];

...

    mkdir -p static
    for size in 16x16 32x32 64x64 128x128 256x256 512x512; do
      echo '${observer-16x16}' | base64 -d | convert - -filter point -resize $size static/observer-$size.png
    done
...

I’m pretty sure this is not exactly how to do it the nix way, since we kind of circumvent the nix store, but I still need learn the language.

Finally set up the new filenames in the config:

    assets:
        favicon: "/observer-16x16.png"
        favicon16x16: "/observer-16x16.png"
        favicon32x32: "/observer-32x32.png"
        apple_touch_icon: "/observer-512x512.png"
        safari_pinned_tab: "/observer-512x512.png"

    label:
        text: " "
        icon:  /observer-64x64.png
        iconHeight: 35

    # profile-mode
    profileMode:
        ...
        imageUrl: "/observer-512x512.png"
        ...

Release Process using `gpg`

The last time I set up a blog I started signing the files inside the public directory using gpg. Let’s add something similiar to the shellHook in shell.nix:

...
    # let's define an alias to release the blog content. However since
    # bash aliases do not support parameters, lets use a function instead
    release() {
      if [ "$1" == "the" ] && [ "$2" == "kraken" ]; then
        cd ~/blog
        for f in $(find -L public/ | grep '.sig$'); do
          rm $f
        done
        hugo
        for f in $(find -L public/ | grep -v ".git"); do
          if ! [ -d "$f" ]; then
            gpg -u 48A1CC122B2B6E37FDA4B7B474344F2BCE39AA5D --output $f.sig --detach-sig $f
          fi
        done
        cd -
      else
        echo '
          ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▄▄███░░░░░
          ░░▄▄░░░░░░░░░░░░░░░░░░░░░░░░░███████░░░░
          ░░███▄░░░░░░░░░░░░░░░░░░░░░▄█████▀░█░░░░
          ░░▀█████▄▄▄▄▀▀▀▀▀▀▀▀░▄▄▄▄▄███▀▀░▀███░░░░
          ░░░░███▀▀░░░░░░░░░░░░░░▀▀▀███░░░░██▀░░░░
          ░░░░██░░░░░░▄░░░░░░░░░░░░░░░▀▀▄▄███░░░░░
          ░░░░▄█▄▄████▀█░█▄██▄▄░░░░░░░░░████▀░░░░░
          ░░░▄████████░░░██████▄▄▄▄░░░░░████░░░░░░
          ░░░███░█░▀██░░░▀███░█░░███▄▄░░░░▀█░░░░░░
          ░░░████▄███▄▄░░░███▄▄▄█████▀░░░░░██░░░░░
          ░░▄████▀▀░▀██▀░░░▀█████████░░░░░░██░░░░░
          ░░▀███░░░▄▄▀▀▀▄▄░░░░▀██████░░░░░░░█░░░░░
          ░░░███░░█░░░░░░░▀░░░░▀███▀░░░░░░░░█░░░░░
          ░░░████▄▀░░░░░░░░▀░░░████▄░░░░░░░░░█░░░░
          ░░░██████▄░░░░░░░░░▀▀████▀░░░░░░░░░█░░░░
          ░░▄█████████▀▀▀▀░░░░░░░░░░░░░░░░░░░▀█░░░
          ░░███████████▄▄▄▄░░░░░░░░░░░░░░░░░░░█▄░░
          ░░████████▀▀▀▀▀▀░░░░░░░░░░░░░░░░░░░░░█▄░
          ░░████████▄▄░░░░░░░░░░░░░░░░░░░░░░░░░░█░
          ░▄███████▄▄░░░░░░░░░░░░░░░░░░░░░░░░░░░░█
          ░▀▀▀▀▀▀▀▀▀█▀▀▀░░░░░░░░░░░░░░░░░░░░░░░░░█
          NOPE.. use them correct words human..
        '
      fi
    }
...

Perfect! Finally I’ve found a use for the phrase release the kraken. After executing the release function, I still have to add the files inside blog/public to the git repository and push them.

Pushing all the things

In order to publish my posts, I defined another little function inside the shellHook, which generates a git commit of the blog/public repo (which contains the github pages link) and pushes everything using an ssh-key that I keep inside my password store:

...
    publish() {
      if [ "$1" == "all" ] && [ "$2" == "the" ] && [ "$2" == "things" ]; then
        cd ~/blog/public
        git add .
        git commit -m "$(date '+%s' | perl -lpe '$_=join " ", unpack"(B8)*"')"
        ssh-agent bash -c 'ssh-add - <<< $(pass oblivious.observer/github/ssh-key-pair | grep -v "ssh-ed25519"); git push'
        cd -
      else
        echo '
        ... the same grumpy art as above ...
        NOPE.. use them correct words human..
        '
      fi
    }
...

`shell.nix` and `config.yml`

If by any chance someone here stumbles over this post, here are the shell.nix as well as the config.yml I’m currently using, you should be able to get up and running from using these files as well as this blog post pretty easy. In case you do, feel free to drop me a line :)

Introduction#

Getting started the nix way#

Setting up Doom Emacs#

Using ox-hugo from Emacs#

Patching / Changing the theme#

Font Awesome Fingerprint and About Icons#

Add comments#

Removing the html-footer#

Add a CNAME file#

Image Magic with imagemagick#

Release Process using gpg#

Pushing all the things#

shell.nix and config.yml#