Forem: Sardorbek Imomaliev

Tailwind in Your Buns

Sardorbek Imomaliev — Mon, 16 Mar 2026 18:48:56 +0000

My background is mostly in backend development; frontend is not my forte, but when I tried TailwindCSS in one of my previous projects, I really liked it. I decided to use it in my blog as well.

Like before, I will start by going through the official guide.

Installing TailwindCSS

The guide says to install TailwindCSS via npm but I am going to use Bun instead.

$ bun install --dev tailwindcss @tailwindcss/cli

Update site's .gitignore

Because the site folder will also contain files for Bun, I need to ensure that .gitignore includes configuration for it as well. If you are creating a new project via bun init, you get gitignore added as your .gitignore. But in our case, because we are using bun install it won't be added. So I will be adding it manually.

diff --git a/site/.gitignore b/site/.gitignore
index a6e26ad..517d145 100644
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -1,3 +1,4 @@
+# Hugo
 # Copied from: https://github.com/github/gitignore/blob/main/community/Golang/Hugo.gitignore
 # License: CC0 1.0 Universal

@@ -14,3 +15,42 @@ hugo.linux

 # Temporary lock file while building
 /.hugo_build.lock
+
+# Bun
+# Copied from: https://github.com/oven-sh/bun/blob/main/src/cli/init/gitignore.default
+# License: MIT
+
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

Update site's configuration

Paste the code provided in Step 2.

diff --git a/site/hugo.toml b/site/hugo.toml
index 1087dd9..8e24de2 100644
--- a/site/hugo.toml
+++ b/site/hugo.toml
@@ -7,6 +7,23 @@ title = 'Blog'

   [[module.imports]]
     path = 'github.com/imomaliev/blog/theme'
+  [[module.mounts]]
+    source = 'assets'
+    target = 'assets'
+  [[module.mounts]]
+    disableWatch = true
+    source = 'hugo_stats.json'
+    target = 'assets/notwatching/hugo_stats.json'
+
+[build]
+  [build.buildStats]
+    enable = true
+  [[build.cachebusters]]
+    source = 'assets/notwatching/hugo_stats\.json'
+    target = 'css'
+  [[build.cachebusters]]
+    source = '(postcss|tailwind)\.config\.js'
+    target = 'css'

 [caches]
   [caches.images]

Update CSS entry file

Step 3 asks to create a new CSS file, but my theme already has main.css. So I will be updating it instead.

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 166ade9..cae7ba4 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -1,3 +1,6 @@
+@import "tailwindcss";
+@source "hugo_stats.json";
+
 body {
   color: #222;
   font-family: sans-serif;

Process CSS with TailwindCSS CLI

Update theme/layouts/_partials/head/css.html with code from Step 4.

diff --git a/theme/layouts/_partials/head/css.html b/theme/layouts/_partials/head/css.html
index d76d23a..075e64e 100644
--- a/theme/layouts/_partials/head/css.html
+++ b/theme/layouts/_partials/head/css.html
@@ -1,9 +1,12 @@
 {{- with resources.Get "css/main.css" }}
-  {{- if hugo.IsDevelopment }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
-  {{- else }}
-    {{- with . | minify | fingerprint }}
-      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+  {{- $opts := dict "minify" (not hugo.IsDevelopment) }}
+  {{- with . | css.TailwindCSS $opts }}
+    {{- if hugo.IsDevelopment }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}">
+    {{- else }}
+      {{- with . | fingerprint }}
+        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+      {{- end }}
     {{- end }}
   {{- end }}
 {{- end }}

Update theme/layouts/_partials/head.html with code from Step 5.

diff --git a/theme/layouts/_partials/head.html b/theme/layouts/_partials/head.html
index 02c2240..13f1cd6 100644
--- a/theme/layouts/_partials/head.html
+++ b/theme/layouts/_partials/head.html
@@ -1,5 +1,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
-{{ partialCached "head/css.html" . }}
+{{ with (templates.Defer (dict "key" "global")) }}
+  {{ partial "head/css.html" . }}
+{{ end }}
 {{ partialCached "head/js.html" . }}

TailwindCSS is installed and configured.

Install Typography plugin

One of the reasons I prefer using TailwindCSS is its typography plugin.

$ bun install --dev @tailwindcss/typography

And add plugin to theme/assets/css/main.css

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index cae7ba4..66b0f49 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @source "hugo_stats.json";
+@plugin "@tailwindcss/typography";

 body {
   color: #222;

Update workflow to use Bun instead of Node

Bun provides an official GitHub Action and the guide how to use it. I've gone through .github/workflows/hugo.yaml and updated it to use Bun instead of Node.js

diff --git a/.github/workflows/hugo.yaml b/.github/workflows/hugo.yaml
index d8cc26d..a240bb0 100644
--- a/.github/workflows/hugo.yaml
+++ b/.github/workflows/hugo.yaml
@@ -23,7 +23,7 @@ jobs:
     env:
       GO_VERSION: 1.25.5
       HUGO_VERSION: 0.154.4
-      NODE_VERSION: 24.12.0
+      BUN_VERSION: 1.3.7
       TZ: Europe/Oslo
     steps:
       - name: Checkout
@@ -36,10 +36,10 @@ jobs:
         with:
           go-version: ${{ env.GO_VERSION }}
           cache: false
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
         with:
-          node-version: ${{ env.NODE_VERSION }}
+          bun-version: ${{ env.BUN_VERSION }}
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5
@@ -57,10 +57,11 @@ jobs:
         run: |
           echo "Go: $(go version)"
           echo "Hugo: $(hugo version)"
-          echo "Node.js: $(node --version)"
-      - name: Install Node.js dependencies
+          echo "Bun: $(bun --version)"
+      - name: Install Bun dependencies
         run: |
-          [[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true
+          cd site/
+          [[ -f bun.lock ]] && bun install --frozen-lockfile || true
       - name: Configure Git
         run: |
           git config core.quotepath false

The setup is complete; we are ready to style our site.

Coding in Style

Sardorbek Imomaliev — Sun, 01 Mar 2026 13:10:03 +0000

With my blog "going public" I can finally start writing. My next step was going to be adding TailwindCSS, I started working on that and immediately noticed that my editor, neovim, applies the wrong indentation, so we are going to fix that first.

I can update the indentation configuration in neovim, but I think a much nicer option and better convention would be to set up .editorconfig.

EditorConfig

Create .editorconfig
```
$ touch .editorconfig
```

Configure EditorConfig for available file types.

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..2a0efbf
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,21 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+
+[*.md]
+# Two or more spaces at the end of the line are parsed as hard line break
+trim_trailing_whitespace = false
+indent_style = space
+indent_size = 4
+
+[*.{html,css,js,yaml,yml,toml}]
+indent_style = space
+indent_size = 2

Commit our changes.

$ git add .editorconfig
$ git commit -m 'configure EditorConfig'

Neovim supports .editorconfig out of the box¹, but it doesn't automatically enforce specified coding style. To ensure better code consistency, let's set up pre-commit with the editorconfig-checker hook.

pre-commit

Create .pre-commit-config.yaml
```
$ touch .pre-commit-config.yaml
```

Add hooks

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 0000000..931910f
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,13 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+-   repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v6.0.0
+    hooks:
+    -   id: check-yaml
+    -   id: check-toml
+    -   id: check-added-large-files
+-   repo: https://github.com/editorconfig-checker/editorconfig-checker
+    rev: v3.6.0
+    hooks:
+    -   id: editorconfig-checker

Make sure we are using the latest versions.

$ pre-commit autoupdate
$ git add -u
$ pre-commit install
$ git commit -m 'configure pre-commit'

Run pre-commit on the whole repo.

$ pre-commit run --all-files
check yaml...............................................................Passed
check toml...............................................................Passed
check for added large files..............................................Passed
run editorconfig-checker.................................................Failed
- hook id: editorconfig-checker
- exit code: 1

site/content/devlog/show-your-work.md:
    19: Wrong amount of left-padding spaces(want multiple of 4)
    23-24: Wrong amount of left-padding spaces(want multiple of 4)
    37-39: Wrong amount of left-padding spaces(want multiple of 4)
    41-43: Wrong amount of left-padding spaces(want multiple of 4)
    45-47: Wrong amount of left-padding spaces(want multiple of 4)
    50-52: Wrong amount of left-padding spaces(want multiple of 4)

6 errors found
site/content/devlog/create-a-site.md:
    64-66: Wrong amount of left-padding spaces(want multiple of 4)

1 errors found
site/content/devlog/dogfooding-a-theme.md:
    45-47: Wrong amount of left-padding spaces(want multiple of 4)
    62: Wrong amount of left-padding spaces(want multiple of 4)
    64: Wrong amount of left-padding spaces(want multiple of 4)
    67: Wrong amount of left-padding spaces(want multiple of 4)

4 errors found

These ones I do not consider errors; maybe this is a bug?

After a bit of digging, it turns out this is expected behavior. But I do not like it, so I will disable it.

Fixing editorconfig-checker for markdown

editorconfig-checker can't be configured per filetype, but luckily for me, I can sidestep this by having two separate editorconfig-checker hooks with different arguments for different filetypes. One for markdown only, another for all other filetypes.

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 931910f..95b7c80 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -11,3 +11,11 @@ repos:
     rev: v3.6.0
     hooks:
     -   id: editorconfig-checker
+        name: run editorconfig-checker excluding markdown
+        exclude_types: [markdown]
+    -   id: editorconfig-checker
+        name: run editorconfig-checker for markdown
+        # Disable indent size check for code block
+        # See https://github.com/editorconfig-checker/editorconfig-checker/issues/351
+        args: [-disable-indent-size]
+        types_or: [markdown]

Let's try it

$ pre-commit run --all-files
check yaml...............................................................Passed
check toml...............................................................Passed
check for added large files..............................................Passed
run editorconfig-checker excluding markdown..............................Passed
run editorconfig-checker for markdown....................................Passed

All green, perfect!

editorconfig-checker does checking only

I purposefully added multiple new lines at the end of site/hugo.toml to see how editorconfig-checker will autoformat it and found out it does not have autoformatting capabilities (and does not consider multiple new lines as an error 🤦‍♂️). Which is a bummer; I specifically chose this hook in the hope of using it instead of prettier for autoformatting, because recent versions of prettier broke integration with pre-commit². I think instead of wasting more time on this sidequest I should stop, but I want to add a couple of helper hooks to remediate basic autoformatting issues.

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 95b7c80..588ef57 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -4,9 +4,14 @@ repos:
 -   repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v6.0.0
     hooks:
+    -   id: trailing-whitespace
+        # Two or more spaces at the end of the line are parsed as hard line break
+        exclude_types: [markdown]
+    -   id: end-of-file-fixer
     -   id: check-yaml
     -   id: check-toml
     -   id: check-added-large-files
+    # TODO: replace with autoformating hook
 -   repo: https://github.com/editorconfig-checker/editorconfig-checker
     rev: v3.6.0
     hooks:

Future considerations

Replace editorconfig-checker with another tool that actually has autoformatting.
Project Idea: I can write an editorconfig-checker replacement with autoformatting based on TreeSitter.
Add a pre-commit workflow for GitHub Actions or use https://pre-commit.ci.

Helping Github and Cloudflare Shake Hands

Sardorbek Imomaliev — Tue, 24 Feb 2026 20:15:36 +0000

I am using Cloudflare DNS for my domain, and I did not know that there were additional steps I needed to take for the domain to work properly and have HTTPS enabled.

To pass the DNS check on GitHub's side, disable proxying through Cloudflare.

From this:

To this:

If you not do this GitHub will yell at you with:

Domain's DNS record could not be retrieved. For more information, see documentation (InvalidDNSError).
Add CNAME for www record.

Otherwise, you will see this error:
Wait until GitHub Pages's settings see new DNS records.
Check the "Enforce HTTPS" setting.
GitHub's interface is very finicky so after you are sure everything looks good, close it and do not touch it anymore.

[!warning]
Re-enabling Claudlfare proxying will cause certificate renewal to fail, so keep these DNS records "DNS Only".

Troubleshooting

If after all this GitHub still is not happy, try switching Cloudflare's TLS config from "Automatic" to "Full".

Show Your Work

Sardorbek Imomaliev — Sun, 15 Feb 2026 18:08:04 +0000

Our blog is a few steps away from being ready to see the world¹.

Configure the site

diff --git a/site/hugo.toml b/site/hugo.toml
index 4dba0ec..7d59855 100644
--- a/site/hugo.toml
+++ b/site/hugo.toml
@@ -1,6 +1,6 @@
-baseURL = 'https://example.org/'
+baseURL = 'https://imomaliev.com/'
 languageCode = 'en-us'
-title = 'My New Hugo Site'
+title = 'Blog'

 [module]
   replacements = 'github.com/imomaliev/blog/theme -> ../../theme'

Follow all the steps in the Host on GitHub Pages guide.

Update workflow to build in and publish from site directory.

diff --git a/.github/workflows/hugo.yaml b/.github/workflows/hugo.yaml
index 20e1d20..d8cc26d 100644
--- a/.github/workflows/hugo.yaml
+++ b/.github/workflows/hugo.yaml
@@ -74,6 +74,7 @@ jobs:
             hugo-
       - name: Build the site
         run: |
+          cd site/
           hugo \
             --gc \
             --minify \
@@ -88,7 +89,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v4
         with:
-          path: ./public
+          path: ./site/public
   deploy:
     environment:
       name: github-pages

Configure a custom domain apex domain.

We are going to publish our site via GitHub Actions, so we can skip setting CNAME in step 4. And on step 5 we will set AAAA records.
Verify the domain with GitHub.
And we are live!

Title is inspired by the book of the same name ↩

Almost Ready to Write

Sardorbek Imomaliev — Sun, 08 Feb 2026 12:09:29 +0000

We have the site, we have the theme, and according to the quickstart guide, we are ready to add content. But in actuality, not quite yet.

Start by deleting skeleton posts that were added with the theme.

$ git rm -r theme/content/posts
$ git add -u
$ git commit -m 'delete skeleton posts'

Default Hugo site and theme skeletons use TOML front matter, but I prefer using YAML, mainly because GitHub does not support TOML and JSON rendering in front matter¹.

Hugo has a handy tool to automatically convert between front matter styles.
```
$ cd site/
$ hugo convert toYAML --unsafe
$ cd ..
```
We need to run with the --unsafe flag; otherwise, it gives an error:
```
ERROR command error: Unsafe operation not allowed, use --unsafe or set a different output path
```

Update archetypes to use YAML front matter in the site and theme; example below.

diff --git a/theme/archetypes/default.md b/theme/archetypes/default.md
index 25b6752..c84c25b 100644
--- a/theme/archetypes/default.md
+++ b/theme/archetypes/default.md
@@ -1,5 +1,5 @@
-+++
-date = '{{ .Date }}'
-draft = true
-title = '{{ replace .File.ContentBaseName "-" " " | title }}'
-+++
+---
+title: "{{ replace .File.ContentBaseName `-` ` ` | title }}"
+date: "{{ .Date }}"
+draft: true
+---

Add our first section.

I will call it Devlog and here I will write my blog development journey.

$ mkdir theme/content/devlog
$ touch theme/content/devlog/_index.md

Add section's front matter to theme/content/devlog/_index.md

---
title: "Devlog"
---

And show it in menu

diff --git a/theme/hugo.toml b/theme/hugo.toml
index 5c26950..dccaed7 100644
--- a/theme/hugo.toml
+++ b/theme/hugo.toml
@@ -9,8 +9,8 @@ title = 'My New Hugo Site'
     weight = 10

   [[menus.main]]
-    name = 'Posts'
-    pageRef = '/posts'
+    name = 'Devlog'
+    pageRef = '/devlog'
     weight = 20

   [[menus.main]]

Final touch.

Cleanup site/content/_index.md which contains content for the home page.
We are ready to write and ready to publish.

Comment in "consistency: hugo new site uses config.toml, but YAML for content" issue ↩

Dogfooding a Theme

Sardorbek Imomaliev — Sun, 01 Feb 2026 14:50:46 +0000

We've already created the Hugo site and pushed it to GitHub. Now is the time to set up our theme.

Quickstart suggests using an existing theme, but I want to create a custom one. I will store it in the same git repo because I do not have current plans of sharing it but still want it to be in a separate folder from the site.

Create a theme skeleton in the project root.

$ hugo new theme --themesDir . theme
$ git add theme
$ git commit -m 'hugo new theme --themesDir . theme'

Instead of setting the theme via theme config in hugo.toml I will be importing it as a Hugo module. But first we need to initialize the theme as a Go module.
```
$ cd theme
$ hugo mod init github.com/imomaliev/blog/theme
$ cd ..
$ git commit -m 'intitialize theme as a module'
```

Now we are ready to initialize the site's module system.

$ cd site
$ hugo mod init github.com/imomaliev/blog
$ cd ..
$ git commit -m 'initialize the hugo module system'

Add module imports.

diff --git a/site/hugo.toml b/site/hugo.toml
index 7e568b8..f106f4e 100644
--- a/site/hugo.toml
+++ b/site/hugo.toml
@@ -1,3 +1,7 @@
 baseURL = 'https://example.org/'
 languageCode = 'en-us'
 title = 'My New Hugo Site'
+
+[module]
+  [[module.imports]]
+    path = 'github.com/imomaliev/blog/theme'

Finally, because our theme is in the same repo, we can just use replacements.

diff --git a/site/hugo.toml b/site/hugo.toml
index f106f4e..4dba0ec 100644
--- a/site/hugo.toml
+++ b/site/hugo.toml
@@ -3,5 +3,7 @@ languageCode = 'en-us'
 title = 'My New Hugo Site'

 [module]
+  replacements = 'github.com/imomaliev/blog/theme -> ../../theme'
+
   [[module.imports]]
        path = 'github.com/imomaliev/blog/theme'

Commit changes.

$ git add -u
$ git commit -m 'import local theme'

Now we can run the dev server.
```
$ hugo server -D
```

Create a Site

Sardorbek Imomaliev — Wed, 28 Jan 2026 22:26:43 +0000

I will start at the very "beginning" and go through the official quickstart guide. My goal is to achieve the same results so I can start blogging ASAP but I will be doing it a bit differently than how it is outlined in the guide. I will explain my decisions along the way. So let's create the Hugo site.

The quickstart docs suggest creating a new site skeleton and initializing git in the created site's root.

$ hugo new site quickstart
$ cd quickstart
$ git init

In my opinion, this is not as good as having a separate folder that will contain the site. Modern blogs have pretty complex folder structures and require additional folders that store CI configs, helper scripts, and other stuff that is part of the blog project but not part of the blog's site.

I start by creating an empty repo first.
```
$ git init blog
$ cd blog
```
Then add an empty initial commit.
```
$ git commit --allow-empty -m 'empty initial commit'
```
Why? It is just better convention in case you want to rewrite history from the beginning. ¹²³

Yes, in most cases you can do git rebase -i --root, but this won't work if you need to split the initial commit into separate ones.

Now we are ready to create a site skeleton.

$ hugo new site site
$ hugo add site
$ git commit -m 'hugo new site site'

Set up .gitingore for site

If you didn't know, GitHub stores common .gitignore files at https://github.com/github/gitignore. It is a good practice to set it up right away to avoid accidentally adding junk to the repo.

$ curl -o site/.gitignore https://raw.githubusercontent.com/github/gitignore/refs/heads/main/community/Golang/Hugo.gitignore
$ git add site/.gitignore

I also add the link to the source and license at the top.

diff --git a/site/.gitignore b/site/.gitignore
index 86c95ef..b1f826c 100644
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -1,6 +1,3 @@
+# Copied from: https://github.com/github/gitignore/blob/main/community/Golang/Hugo.gitignore
+# License: CC0 1.0 Universal
+
 # Generated files by hugo
 /public/
 /resources/_gen/

Commit changes.

$ git add -u
$ git commit -m 'add .gitignore for site'

Create an empty GitHub repository

Call it blog

Push the code

$ git remote add origin git@github.com:imomaliev/blog.git
$ git push -u origin HEAD

Fresh Start

Sardorbek Imomaliev — Wed, 28 Jan 2026 22:23:44 +0000

I tend to be overly obsessive and pedantic when it comes to finding answers, especially when I'm looking for a "better" way to do something. I sometimes spend hours falling deeper into the rabbit hole of a perfectionist's spiral: a quick web search for one question can lead to dozens of open tabs. I constantly get sidetracked by the cascade of follow-up questions that appear one after another, steering me further and further from my original goal. I'd describe it as an unshakeable belief that there must be a better option, which causes intense frustration when you can't find it—or worse, when you know it's just out of reach.

I've learned to work through this feeling and keep it at bay, especially at work, but sometimes it's so strong that it cripples my productivity and creativity. I'm pretty sure many people would relate: instead of actually doing something, I spend more time thinking about and researching how to do it more efficiently or correctly. Some may call it procrastination or even a clinical issue, but after years of fighting it I decided to embrace it by creating a safe space for these obsessive tendencies to run wild. I cautiously believe this approach may actually improve my long-term productivity.

However, going full ~~manic~~ perfectionist from the start proved to be too much. I tried to restart my blog in October 2025, but after two weeks I became overwhelmed trying to address every little detail. There are so many decisions to make in any project, so I will start simple and use familiar technologies and approaches just to get things moving. Last time I struggled with consistency mostly because I tried to do everything perfectly, which ultimately drowned me.

My plan is to start with these decisions:

Use Hugo SSG
Host the source code on GitHub
Publish the blog via GitHub Pages

I'll record the progress of "Building the plane while flying it" as a Devlog section in my blog.

The strongest principle of the blog's growth lies in the human choice to deploy it

Sardorbek Imomaliev — Sat, 03 Sep 2022 11:21:53 +0000

The strongest principle of growth lies in the human choice¹

Build Hugo With GitHub Action

It is time to put our blog on the internet. Source code is stored on GitHub, so hosting it on the GitHub Pages seems like the easiest way to achieve that. A good starting point will be just using official Hugo docs.

We will need to configure our workflow to properly build TailwindCSS which is used in this project, and also I would like to use my own domain name instead of provided one.

Workflow from example

Documentation provides an example workflow file that uses GitHub Actions for Hugo action in the "Build Hugo With GitHub Action" section. It is ok to use it, but I will use combination of 2 examples (1, 2) from GitHub Actions for Hugo's README because it has one for projects using PostCSS.

name: GitHub Pages

on:
    push:
        branches:
            - main # Set a branch to deploy
    pull_request:

jobs:
    deploy:
        runs-on: ubuntu-20.04
        concurrency:
            group: ${{ github.workflow }}-${{ github.ref }}
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: true # Fetch Hugo themes (true OR recursive)
                  fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: '0.91.2'
                  # extended: true

            - name: Setup Node
              uses: actions/setup-node@v3
              with:
                  node-version: '14'

            - name: Cache dependencies
              uses: actions/cache@v2
              with:
                  path: ~/.npm
                  key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
                  restore-keys: |
                      ${{ runner.os }}-node-

            - run: npm ci

            - name: Build
              run: hugo --minify

            - name: Deploy
              uses: peaceiris/actions-gh-pages@v3
              if: ${{ github.ref == 'refs/heads/main' }}
              with:
                  github_token: ${{ secrets.GITHUB_TOKEN }}
                  publish_dir: ./public

We will save it as .github/workflows/gh-pages.yaml. NOTE: I prefer using yaml extension instead of yml²

Updating workflow to make it work in our project

The workflow file I copied from GitHub Actions for Hugo action wouldn't work for our project structure. Additionally, I would like to make some improvements. Mainly

Add comments for the parts that are new to me or may be confusing in the future
Add links to documentation for used actions
Update and freeze actions' and packages' versions. I decided to use the same versions that I am using locally.
Add working-directory: ./blog option to jobs because actual blog source files not located in the root of the project, but in the blog/ directory.
Remove unused parts of the workflow

but some changes may not be so obvious, so let's discuss them

Using setup-node action's cache option

In the copied example, npm caching is done via actions/cache@v2 action. But we can simplify our workflow by dropping this step and using built-in functionality for caching

diff --git a/.github/workflows/gh-pages.yaml b/.github/workflows/gh-pages.yaml
index 401fd33..3ddf6dd 100644
--- a/.github/workflows/gh-pages.yaml
+++ b/.github/workflows/gh-pages.yaml
@@ -26,18 +26,17 @@ jobs:
                   hugo-version: '0.91.2'
                   # extended: true

+            # https://github.com/actions/setup-node
             - name: Setup Node
               uses: actions/setup-node@v3
               with:
-                  node-version: '14'
-
-            - name: Cache dependencies
-              uses: actions/cache@v2
-              with:
-                  path: ~/.npm
-                  key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-                  restore-keys: |
-                      ${{ runner.os }}-node-
+                  node-version: '18.7.0'
+                  cache: npm
+                  # The action defaults to search for the dependency file (package-lock.json,
+                  # npm-shrinkwrap.json or yarn.lock) in the repository root, and uses its
+                  # hash as a part of the cache key.
+                  # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-data
+                  cache-dependency-path: ./blog/package-lock.json

I thought that this change will be useful for all "Setup Hugo" users, so I've created PR with these changes to update action's example. PR was accepted right away.

so if you follow the same steps as I did, you will not have to do this manually 😎.

Building blog in node environment

For some reason, when the blog built normally via hugo --minify PostCSS does not pick up TailwindCSS's styles. I solve this by running hugo server and build from NPM's environment via custom npm run build script.

diff --git a/.github/workflows/gh-pages.yaml b/.github/workflows/gh-pages.yaml
index 401fd33..3ddf6dd 100644
--- a/.github/workflows/gh-pages.yaml
+++ b/.github/workflows/gh-pages.yaml
@@ -39,10 +39,13 @@ jobs:
                   restore-keys: |
                       ${{ runner.os }}-node-

-            - run: npm ci
+            - name: Install npm dependencies
+              working-directory: ./blog/
+              run: npm ci

             - name: Build
-              run: hugo --minify
+              working-directory: ./blog/
+              run: npm run build

             - name: Deploy
               uses: peaceiris/actions-gh-pages@v3
diff --git a/blog/package.json b/blog/package.json
index 4a4876d..49334d7 100644
--- a/blog/package.json
+++ b/blog/package.json
@@ -1,6 +1,7 @@
 {
   "scripts": {
-    "start": "hugo --source src server --baseURL http://localhost/"
+    "start": "hugo --source src server --baseURL http://localhost/",
+    "build": "hugo --source src --minify"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.4",

Use Ubuntu 22.04

You also may have noticed that we are using Ubuntu 22.04. On August 9, 2022 this version become generally available.

I started by using runs-on: ubuntu-22.04 in this workflow to check if everything works ok. It run without any issues. After that I created PRs to add support for ubuntu-22.04 and ubuntu-latest version to GitHub Actions for Hugo and GitHub Pages Action

Final diff of changes

diff --git a/.github/workflows/gh-pages.yaml b/.github/workflows/gh-pages.yaml
index 401fd33..3ddf6dd 100644
--- a/.github/workflows/gh-pages.yaml
+++ b/.github/workflows/gh-pages.yaml
@@ -11,42 +11,48 @@ on:

 jobs:
     deploy:
-        runs-on: ubuntu-20.04
+        runs-on: ubuntu-22.04
+        # Ensure that only a single job or workflow
+        # https://docs.github.com/en/actions/using-jobs/using-concurrency
         concurrency:
+            # workflow - The name of the workflow.
+            # ref - The branch or tag ref that triggered the workflow run.
             group: ${{ github.workflow }}-${{ github.ref }}
         steps:
             - uses: actions/checkout@v3
               with:
-                  submodules: true # Fetch Hugo themes (true OR recursive)
                   fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod

+            # https://github.com/peaceiris/actions-hugo
             - name: Setup Hugo
               uses: peaceiris/actions-hugo@v2
               with:
-                  hugo-version: '0.91.2'
-                  # extended: true
+                  hugo-version: '0.101.0'

+            # https://github.com/actions/setup-node
             - name: Setup Node
               uses: actions/setup-node@v3
               with:
-                  node-version: '14'
-
-            - name: Cache dependencies
-              uses: actions/cache@v2
-              with:
-                  path: ~/.npm
-                  key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-                  restore-keys: |
-                      ${{ runner.os }}-node-
-
-            - run: npm ci
+                  node-version: '18.7.0'
+                  cache: npm
+                  # The action defaults to search for the dependency file (package-lock.json,
+                  # npm-shrinkwrap.json or yarn.lock) in the repository root, and uses its
+                  # hash as a part of the cache key.
+                  # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-data
+                  cache-dependency-path: ./blog/package-lock.json
+
+            - name: Install npm dependencies
+              working-directory: ./blog/
+              run: npm ci

             - name: Build
-              run: hugo --minify
+              working-directory: ./blog/
+              run: npm run build

+            # https://github.com/peaceiris/actions-gh-pages
             - name: Deploy
               uses: peaceiris/actions-gh-pages@v3
               if: ${{ github.ref == 'refs/heads/main' }}
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
-                  publish_dir: ./public
+                  publish_dir: ./blog/src/public

Deploy to GitHub Pages

The workflow we added will create gh-pages branch in our repo automatically after the first run. All that left to do is to update repository configuration to use this branch for GitHub Pages. By default, Pages should pick up and deploy files from the gh-pages branch, but due to GITHUB_TOKEN limitation we need to set Pages's branch manually. Read more in the GitHub Pages Action's docs.

I wanted to configure GitHub Pages using terraform because this project already uses it to configure this repository. But currently, due to how GitHub provider for terraform is written, configuring Pages requires some fiddling and will not work on the first run. During my research into how I could achieve declarative configuration for Pages, I found out that GitHub recently added actions that allow deploying to Pages without additional branch. I like this new approach better and in the future I will switch to it, but for now I decided to configure Pages manually as suggested by GitHub Pages Action that we are using.

Bugs

There are few bugs that I stumbled upon while applying these changes to my blog and writing about them

YAML multistring rendering

While I was re-reading this article to find issues in my spelling. I noticed something weird

this is definitely a bug. I started looking into it. At first, I thought the issue is in Hugo itself, but after trying to make minimal reproducible example I was falling deeper and deeper in the rabbithole of dependencies. Turns out the issue was 4 layers deep.

Hugo -> goldmark -> goldmark-highlighting -> chroma

And there is already a bug report

key: |
    value

I may have tried to fix it, but I think it may take way too much time because I do not have any experience with Go. So, I will leave this issue as is for now. Maybe in the future it will be a fun project to practice Go development.

baseURL causing images with leading `/` render incorrectly

I noticed that after deployment images were broken after further research it became clear that this happens because we are using baseURL with path - https://imomaliev.github.io/blog/. This is known behavior. It does look like a bug to me, but maintainers decided to close this issue as "wontfix" for now. In the future, I am planning to host this blog on my domain without additional path in baseURL, but for now I fixed it by using relative paths instead ones starting with leading /.

-![setup hugo PR](/building-the-blog-while-flying-it/07-the-strongest-principle-of-the-blogs-growth-lies-in-the-human-choice-to-deploy-it/setup-hugo-pr.png)
+![setup hugo PR](./setup-hugo-pr.png)

So, another future exercise for myself will be to bring this issue to proper resolution in Hugo itself.

No custom domain for now

This article is already becoming pretty big, I think we will switch this blog to use custom domain in some other time. My plan is to do this via terraform as well, so stay tuned for this series.

If you're going to blog about something, do it with style

Sardorbek Imomaliev — Mon, 08 Aug 2022 07:34:00 +0000

If you're going to do something, do it with style!¹

Where are my styles?

We've just installed TailwindCSS to our project and ready to start adding styles to make it look better, but for some reason it now looks worse than before we installed it.

Before	After

The Preflight configuration is a culprit who "stole" our styles. I've dealt with it on one of my different series Vite vue ts tailwind template. I am going to quote docs here:

Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

Basically to have consistent styles across all browsers some elements have extra styles, some have disabled styles and some like headings for example are unstyled completely.

With that out of the way, let's start styling our blog, and to help us speed things up we are going to use the official TailwindCSS typography plugin.

Adding typography plugin

Install plugin

$ npm install --save-dev @tailwindcss/typography

Add plugins entry in tailwind.config.js

diff --git a/blog/tailwind.config.js b/blog/tailwind.config.js
index 9d0ca2f..586083d 100644
--- a/blog/tailwind.config.js
+++ b/blog/tailwind.config.js
@@ -4,5 +4,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/typography')],
 }

Now we can add prose styles to our html.

diff --git a/blog/src/layouts/_default/single.html b/blog/src/layouts/_default/single.html
index 560541c..6cc083d 100644
--- a/blog/src/layouts/_default/single.html
+++ b/blog/src/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article>
+    <article class="prose">
         <h1>{{ .Title }}</h1>
         {{ .Content }}
     </article>

right away we see improvements

We will take it one step further by centering content and adding breakpoint modifiers.

diff --git a/blog/src/layouts/_default/single.html b/blog/src/layouts/_default/single.html
index 560541c..6cc083d 100644
--- a/blog/src/layouts/_default/single.html
+++ b/blog/src/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <article class="prose">
+    <article class="prose prose-sm prose-table:table-fixed lg:prose-lg xl:prose-xl 2xl:prose-2xl mx-auto">
         <h1>{{ .Title }}</h1>
         {{ .Content }}
     </article>

much better. You may have noted that I also added prose-table:table-fixed element modifier. This is to ensure that our tables in articles will be fixed size.

Adding styles to headers

For now, we will just increase header sizes

diff --git a/blog/src/layouts/index.html b/blog/src/layouts/index.html
index 4fbcad1..9c1cdd3 100644
--- a/blog/src/layouts/index.html
+++ b/blog/src/layouts/index.html
@@ -1,8 +1,10 @@
 {{ define "main" }}
-    <h1>{{ .Site.Title }}</h1>
+    <h1 class="text-5xl font-bold">{{ .Site.Title }}</h1>
     {{ range .Pages }}
         <article>
-            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+            <h2 class="text-4xl underline">
+                <a href="{{ .Permalink }}">{{ .Title }}</a>
+            </h2>
         </article>
     {{ end }}
 {{ end }}

and do the same in blog/src/layouts/_default/list.html

Automatic Class Sorting with Prettier

Having utility css classes in html can be very verbose and cumbersome. It is easy to make our code hard to follow. To help us with that, we can automatically sort them.

We are using prettier as pre-commit hook so instead of installing prettier-plugin-tailwindcss as npm dependency we will add it as additional_dependency for our prettier hook.

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index b8b2f7f..0b88113 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -26,6 +26,7 @@ repos:
             additional_dependencies:
                 - "prettier@2.7.1"
                 - "prettier-plugin-go-template@0.0.13"
+                - "prettier-plugin-tailwindcss@0.1.12"

Typography plugin classes not sorted

For some reason, @tailwindcss/typography's classes not sorted. I tried different options, but couldn't make it work. I have started discussion, this looks like a bug to me, but maybe I am missing something.

To fly you need a tailwind

Sardorbek Imomaliev — Wed, 20 Jul 2022 15:47:07 +0000

Why TailwindCSS

In one of my previous projects, I fell in love with TailwindCSS. I know that this is a very controversial framework for some, but for me, personally, as a backend developer of 11 years, it was the first time I had a fun time adding styles to the frontend. I even created vue-ts template with it, as a part of another articles' series.

Asset management in Hugo

There are few ways to add CSS library to our blog, because Hugo supports multiple ways to do asset management. If you used TailwindCSS before you may know that to better integrate with other build tools, like webpack, Vite etc., it supports PostCSS out of the box. Luckily for us, Hugo supports it as well. We are going to install TailwindCSS as a PostCSS plugin and then use Hugo's PostCSS pipe to integrate it to our blog. With this plan in mind, let's get started.

Install TailwindCSS

We start with following official docs in a blog/ folder.

Install TailwindCSS and PostCSS

$ npm install --save-dev tailwindcss postcss autoprefixer

Add .gitignore file for Node.js projects
Create configuration files.
```
$ npx tailwindcss init --postcss
```
added --postcss option to initialize a postcss.config.js file as well.

Configure your template paths. Our only content files located in blog/src/layouts folder.

diff --git a/blog/tailwind.config.js b/blog/tailwind.config.js
index 32e3abd..7b5a700 100644
--- a/blog/tailwind.config.js
+++ b/blog/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: ["./src/layouts/**/*.html"],
   theme: {
     extend: {},
   },

Add the Tailwind directives to your CSS

$ mkdir -p blog/src/assets
$ touch !$/main.css

and then update newly created blog/src/assets/main.css

diff --git a/blog/src/assets/css/main.css b/blog/src/assets/css/main.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/blog/src/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

also, we are going to update .editorconfig, .pre-commit-config.yaml and .prettierrc.yaml to enable support for css file type.

Configure Hugo to use PostCSS

Now we have installed TailwindCSS, we are ready to start configuring our blog to use it via PostCSS pipe.

From the docs

Hugo Pipe’s PostCSS requires the postcss-cli JavaScript package to be installed in the environment (npm install -g postcss postcss-cli) along with any PostCSS plugin(s) used (e.g., npm install -g autoprefixer).

Install postcss-cli
```
$ npm install --save-dev postcss-cli
```

Add link tag with our processed CSS to blog/src/layouts/partials/head.html

diff --git a/blog/src/layouts/partials/head.html b/blog/src/layouts/partials/head.html
index b9f74a6..556a0cf 100644
--- a/blog/src/layouts/partials/head.html
+++ b/blog/src/layouts/partials/head.html
@@ -3,4 +3,6 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ .Site.Title }}</title>
+    {{ $css := resources.Get "css/main.css" | resources.PostCSS }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}" />

Add scripts command to package.json to run hugo in NPM environment. By default, Hugo will search for node_modules/

From Hugo 0.78.1 the start directory for resolving NPM packages (aka. packages that live inside a node_modules folder) is always the main project folder.

but because of our project structure we need to run hugo as npm command. We will use start as command name because npm has shorthand for it.
```
diff --git a/blog/package.json b/blog/package.json
index 3f40e6d..5b5d864 100644
--- a/blog/package.json
+++ b/blog/package.json
@@ -1,4 +1,7 @@
 {
+    "scripts": {
+        "start": "hugo --source src server --baseURL http://localhost/"
+    },
     "devDependencies": {
         "autoprefixer": "^10.4.7",
         "postcss": "^8.4.14",
```
Profit!

We now have a blog that uses TailwindCSS.

Basic content render

Sardorbek Imomaliev — Tue, 19 Jul 2022 04:48:14 +0000

Sane defaults

Previously in this series, we created a new Hugo site and copied scaffold of the default theme to our layout folder. Now let's update our templates to have great HTML defaults. I would suggest reading the great article Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project which dives a little deeper into this topic. But for our case, we will just base our default template on Vite's boilerplate template for Vue.

First, we will add lang="en" attribute to html tag, specifying that content will be in English. I plan to make this blog support multiple languages, my main language is Russian, but my mother tong is Uzbek. And I hope in the future to write articles in these languages as well. As Hugo's Lookup Order page states (to be honest not directly) all template lookups in Hugo start with layouts/_default/baseof.html template. This fact also could be deduced by finding a template with html tag in it in created layouts folder.

diff --git a/blog/src/layouts/_default/baseof.html b/blog/src/layouts/_default/baseof.html
index 7b0d566..94c5dfe 100644
--- a/blog/src/layouts/_default/baseof.html
+++ b/blog/src/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     {{- partial "head.html" . -}}
     <body>
         {{- partial "header.html" . -}}

After that, we will update head tag in layouts/_default/head.html following existing structure.

diff --git a/blog/src/layouts/partials/head.html b/blog/src/layouts/partials/head.html
index e69de29..b9f74a6 100644
--- a/blog/src/layouts/partials/head.html
+++ b/blog/src/layouts/partials/head.html
@@ -0,0 +1,6 @@
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ .Site.Title }}</title>
+</head>

Here we've

added meta tag to specify default character encoding
added link to our future favicon
added another meta tag for viewport configuration to render the width of the page to the width of the device's screen
added title tag to set our pages title.

You could also check what Hugo's team suggest in their docs

GoHTML templates

Now we are ready to configure our default Kind templates to show content. Let start with our landing page - layouts/index.html. Default baseof.html contains usage of block construct, if you used any other templating language this should pretty familiar. Basically, this allows us to have overridable parts of the base template. Here, for example, we have {{- block "main" . }}{{- end }}, meaning we could redefine this portion. Read the docs on Base Templates and Blocks for better understanding. I will just show the final result:

`index.html`

diff --git a/blog/src/layouts/index.html b/blog/src/layouts/index.html
index e69de29..728b791 100644
--- a/blog/src/layouts/index.html
+++ b/blog/src/layouts/index.html
@@ -0,0 +1,8 @@
+{{ define "main" }}
+    <h1>{{ .Site.Title }}</h1>
+    {{ range .Pages }}
+        <article>
+            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+        </article>
+    {{ end }}
+{{ end }}

Our blog now renders its title, from the config.toml on the landing page and all pages for the current level (only "Building the blog while flying it" series link currently) with a link. "This is not my first rodeo", so personally I find the template above is pretty straight forward. But if you are new to templating I suggest digging into the official docs for template functions and template variables.

`_default/list.html`

Following the same logic, we will update our list Kind template. To show current page's Title and render all child pages.

--- a/blog/src/layouts/_default/list.html
+++ b/blog/src/layouts/_default/list.html
@@ -0,0 +1,8 @@
+{{ define "main" }}
+    <h1>{{ .Title }}</h1>
+    {{ range .Pages }}
+        <article>
+            <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+        </article>
+    {{ end }}
+{{ end }}

`_default/single.html`

And finally, we will render actual content of our articles in _default/single.html

--- a/blog/src/layouts/_default/single.html
+++ b/blog/src/layouts/_default/single.html
@@ -0,0 +1,6 @@
+{{ define "main" }}
+    <article>
+        <h1>{{ .Title }}</h1>
+        {{ .Content }}
+    </article>
+{{ end }}

Update articles for accessibility

Previously I was using a single hashtag # in my articles for this blog to denote headings, but from now on I will use two ##, meaning all articles' sections will be rendered with heading level 2. This is recommended by dev.to's editor for improving accessibility and also this allows us to render our article content properly where the title of the articles will be rendered as <h1> and all heading of the sections as <h2>.

Hooray!

We have an actual working blog that could be hosted somewhere and people would be able to read it. But we will do the actual hosting some other time, for now we will continue building the blog itself and posting about it in my series on dev.to

Forem: Sardorbek Imomaliev

Tailwind in Your Buns

Installing TailwindCSS

Update site's .gitignore

Update site's configuration

Update CSS entry file

Process CSS with TailwindCSS CLI

Install Typography plugin

Update workflow to use Bun instead of Node

Coding in Style

EditorConfig

pre-commit

Fixing editorconfig-checker for markdown

editorconfig-checker does checking only

Future considerations

Helping Github and Cloudflare Shake Hands

Troubleshooting

Show Your Work

Almost Ready to Write

Dogfooding a Theme

Create a Site

Fresh Start

The strongest principle of the blog's growth lies in the human choice to deploy it

Build Hugo With GitHub Action

Workflow from example

Updating workflow to make it work in our project

Using setup-node action's cache option

Building blog in node environment

Use Ubuntu 22.04

Final diff of changes

Deploy to GitHub Pages

Bugs

YAML multistring rendering

baseURL causing images with leading / render incorrectly

No custom domain for now

Links

If you're going to blog about something, do it with style

Where are my styles?

Adding typography plugin

Adding styles to headers

Automatic Class Sorting with Prettier

Typography plugin classes not sorted

Links

To fly you need a tailwind

Why TailwindCSS

Asset management in Hugo

Install TailwindCSS

Configure Hugo to use PostCSS

Links

Asset management in Hugo

Install TailwindCSS

Configure Hugo to use PostCSS

Basic content render

Sane defaults

GoHTML templates

index.html

_default/list.html

_default/single.html

Update articles for accessibility

Hooray!

Links

baseURL causing images with leading `/` render incorrectly

`index.html`

`_default/list.html`

`_default/single.html`