Web on Andrew's Memory Blog

Migrating from Astro to Hugo

andrewmemoryblog@gmail.com (Andrew's Memory Blog) — Sun, 14 Dec 2025 00:08:05 -0700

For a while, I’ve been uncomfortable with Astro. I’m not a big fan of npm’s policy on security which is basically “yeah, just upload it here.” Every time I upgrade npm packages, they break. There are workarounds to some security issues with configurations like npm in a box but the developer experience for npm is still kind of like having a rash.

So I decided to give Hugo a shot.

Moving there was surprisingly easy. There were a few quirks. Here’s what I ended up doing:

Set up Hugo
#

I installed Hugo from the .deb that’s linked from gohugo.io/installation/linux. I’d have preferred to have installed from the Ubuntu package manager, but its version was… less than recent. I’ll have to rememer to update this manually.
Hugo doesn’t come with a default theme, so I had to pick one (from themes.gohugo.io/) or roll my own. I picked Blowfish because it has light and dark modes, has good docs, tags, and search.
I walked through the Blowfish installation instructions. I was very careful to avoid the npm tools that they provided — my whole reason for doing this was to get away from that.

Incidentally, I get a warning:

WARN Module "blowfish" is not compatible with this Hugo version: 0.141.0/0.152.2 extended; run "hugo mod graph" for more information.

It doesn’t seem to affect things.

Copy the old posts over
#

Next, I needed to copy my old posts into the new structure. That wasn’t too bad:

cp -R ~/andrewmemory-astromicroacademic/src/content/blog/ ~/andrewmemory-hugo/content/posts/

Fix the posts
#

Fix the time. After copying the posts over, I started to get errors left and right. Hugo is pickier about time formats than Astro. By default, Hugo uses 2025-12-14T00:08:05-0700. Astro was OK with 2025-12-14 00:08:05 GMT-7. Hugo doesn’t really care about the T, I discovered, so all I had to do was:

find . -name index.md -print0 | xargs -0 sed -i 's/ GMT-7/-0700/1'

Change from description to summary. I discovered that Hugo uses summary: where Astro uses description: in the front matter. So…

find . -name index.md -print0 | xargs -0 sed -i 's/description:/summary:/1'

Update internal links. Since Astro wants its blog posts in /blog/ and Hugo wants them in /posts/, I needed to update. I could probably have renamed posts to blog, but I figured, let’s go with the Hugo way. You might not want to do this. I had to undo it. Scroll down a few sections to see why.

find . -name index.md -print0 | xargs -0 sed -i 's|/blog/|/posts/|g'

Fix links to static files. Astro requires that you put static files in /public for them to be visible. Hugo apparently lets you keep them in their associated directories! So my post with a Perl script can just say [convertcsv.pl](convertcsv.pl). Nice! I copied the static assets into their appropriate directories.

Tweak code blocks to allow filenames
#

I had modified Astro to enable filenames on code blocks. I needed to do the same thing for Hugo. I found a few good references, particularly Roger Steve Ruiz’s blog. There were a few steps here:

Create directories ~/andrewmemory-hugo/layouts/_default and ~/andrewmemory-hugo/layouts/_default/_markup/.
Add a render-codeblock.html file there. I wanted the titles to stick out a little more, so I abused the <mark> tag. I also decided to set isVerbatim to false because I prefer it that way. I ended up with:

layouts/_default/_markup/render-codeblock.html

{{/* this file is exists at `layouts/_default/_markup/` in your Hugo project */}}
{{- $isVerbatim := false -}}
{{- if isset .Attributes "verbatim" -}}
{{- $isVerbatim = .Attributes.verbatim -}}
{{- end -}}
<figure class="highlight">
 {{- with .Attributes.title }}
 <figcaption>
 {{- if $isVerbatim -}}
 <span><mark>{{ . }}</mark></span> {{/* As a file name */}}
 {{- else -}}
 <span><mark>{{ . | markdownify }}</mark></span> {{/* As a code description */}}
 {{- end -}}
 </figcaption>
 {{- end }}
 {{- if transform.CanHighlight .Type }}
 <pre tabindex="0" class="chroma"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">
 {{- with transform.HighlightCodeBlock . -}}
 {{ .Inner }}
 {{- end -}}
 </code></pre>
 {{- else }}
 <pre tabindex="0"><code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ .Inner }}</code></pre>
 {{- end }}
</figure>

Finally, I needed to change the references from the old Astro syntax:

```bash:/usr/local/bin/file
My file contents
```

to:

```bash {title = "/usr/local/bin/file"}
My file contents
```

I didn’t have enough code blocks with filenames to script this, so I this by hand. I used this one-liner to find out where I needed to make changes:

find . -name index.md -print0 | xargs -0 grep '```' | grep '`.*:'

Move things to match the old site
#

Ok, it looks as if Hugo doesn’t have an easy way to alias a section, so I can’t define a global /blog/ that redirects to /posts/. If I put everything in /posts/ it will break existing links. I have to undo it. So much for the Hugo way…

Undo the sed that I did above:

find . -name index.md -print0 | xargs -0 sed -i 's|/posts/|/blog/|g'

Move the posts/ directory under content/ to blog/:

mv posts blog

Update the Blog link

./config/_default/menus.en.toml

...
[[main]]
 name = "Blog"
 pageRef = "blog" # was posts
 weight = 10
...

I’d love to add a link for the old RSS. But I can’t figure out how to rename it. Boo. I guess I can add that when I build the site.

Prettify the RSS feed
#

By default, the RSS that Hugo/Blowfish has is pretty spartan. I found a great blog post called Hugo RSS Improvements that got me started. Here’s what I did:

Create a file in /assets/img/ called rss_image.png. Mine is 475 by 475 pixels. I read on rss.com that Apple wants a minimum of 3000 by 3000. 🙄
Copy the theme’s XML from themes/blowfish/layouts/_default/rss.xml into layouts/_default/rss.xml.
Change the RSS to include the image under the <generator> line:

layouts/_default/rss.xml

...
 <image>
 <url>{{ $.Site.BaseURL }}img/rss_image.png</url>
 <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
 <link>{{ $.Site.BaseURL }}</link>
 </image>
...

Change the RSS <description> to include content rather than summaries:

layouts/_default/rss.xml

...
 <description>{{ .Content | html }}</description>
...

Now my RSS feed is 600 K and only going to grow, but I can read the blog from the RSS feed in AntennaPod.

Build the static site
#

On to building and testing. That’s easy:

killall hugo
cd ~/andrewmemory-hugo
rm -rf public resources
hugo --gc --minify
cd public
cp index.xml rss.xml # Yuck
python3 -m http.server &

Hey, it looks good! Everything works… except search. Hmm… there’s a lot of questions in the Hugo community about that. The RSS file is just copied, which means I’ll have to do that every time.

Is it possible that search isn’t working because I’m not under my domain? Close your eyes, take a breath, and try it out.

Install the static site
#

Blow away the existing site.
Upload everything in the new public/ to the site.

Images are broken
#

Hmm… that appears to be something weird with HostGator. I changed Hotlink Protection Management to block links to .png, but allowed direct URL requests. Don’t ask, that just has to happen. Websites -> Settings -> Hotlink Protection -> Manage -> Click .png, Click Allow direct requests

Fixing the Firefox 4 open tab / open window nonsense

andrewmemoryblog@gmail.com (Andrew's Memory Blog) — Fri, 15 Apr 2011 22:19:17 -0700

Firefox 4 has got it into its head that tabs are better than windows, despite the fact that tabs use up more UI and look ugly, while windows are nice and clean.

In order to promote their tab agenda, they’ve changed the order of the context menu so your muscle memory for “Open Link in New Window” now brings you “Open Link in New Tab”. Ugh.

Luckily, there is an answer for this.

Create a userChrome.css file in your profile/chrome directory (on Windows, C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\somethingrandom.default\chrome\):

#contentAreaContextMenu > * { -moz-box-ordinal-group: 2; } #context-openlink { -moz-box-ordinal-group: 1 !important; }

This doesn’t change the order under the file menu, but at least when you’re using the context menu it will work right.

Configuring a website on Apache2 with server-side includes

andrewmemoryblog@gmail.com (Andrew's Memory Blog) — Sat, 22 Jan 2011 14:37:23 -0700

I recently got myself involved in helping with a website for a local club. In order to maintain it, I wanted to set up an Apache instance at home as well.

Luckily, in Ubuntu 9.10, it’s almost all set up by default. The only changes I had to make were to change the DocumentRoot directory and enable server-side includes. Here’s what I did:

Changing the document root
#

First I edited /etc/apache2/sites-available/default to put my document root in DocumentRoot, and also changed the two directory references that did point to /var/www to my new document root. Then I made sure all the parents of my document root had r+x permission for the Apache user.

Turning on server-side includes
#

My hosting facility has server-side includes turned on for .html. This is not the best use of resources, but this website doesn’t get enough traffic to make a difference. So I added: AddType text/html .html AddHandler server-parsed .html Option Include (plus whatever options were there before) to the two directories that used to be /var/www and /. After that, I had to enable mod_include with: cd /etc/apache2/mods-enabled sudo ln -s ../mods-available/include.load include.load Then restart apache with sudo /etc/init.d/apache2 restart

Creating thumbnail images with convert

andrewmemoryblog@gmail.com (Andrew's Memory Blog) — Sat, 01 Jan 2011 17:32:26 -0700

A little while ago, I found I had a bunch of images that needed thumbnails that were 100×75. This isn’t hard to do - I used convert and a pair of bash for loops.

The core was a call to convert, which is part of ImageMagick.

convert -thumbnail 100x75 input.jpg thumbnail.jpg

All of my images happened to be 4:3 - if they hadn’t, I might have used 100x75! or rotated/resized them.

Next, all my files had numbers of the form file01..file09 file10 file11… etc. If you’re nuts, you try to figure out how to do this in a single for-loop with a condition for the first 9 elements that start with 0.

If you’re lazy like me, you use two loops, with a cursor-up in bash so you don’t have to type as much:

export INFILEPREFIX=file
export OUTFILEPREFIX=file
for i in {1..9}; do convert -thumbnail 100x75 ${INFILEPREFIX}0${i}.jpg ${OUTFILEPREFIX}0${i}t.jpg; done
for i in {10..25}; do convert -thumbnail 100x75 ${INFILEPREFIX}${i}.jpg ${OUTFILEPREFIX}${i}t.jpg; done

For the non-thumbnails, I resized as well, using -resize 800x600.

Scale your website images

andrewmemoryblog@gmail.com (Andrew's Memory Blog) — Sat, 01 Jan 2011 17:32:26 -0700

I just noticed that if you scale an image using width= and height= attributes of the img tag, Firefox 3.6 will (sometimes) put a thin border on the top and left of the image - something that you can’t get rid of with CSS/styling.

Weird - but a good rule seems to be scale your images to the correct size before using them in HTML.

This is different from the “border around link images” issue - which is easy enough to get around by using border-style: none in CSS.

Exposing the Firefox Location Bar behaviour

andrewmemoryblog@gmail.com (Andrew's Memory Blog) — Fri, 19 Feb 2010 00:13:42 -0700

On several machines, I’ve got Seamonkey 2.0.2 installed. It has some very nice fine-grained preferences to control what shows up in the location bar.

I’ve also got a netbook where I put Firefox 3.6 because I didn’t need everything that’s in Seamonkey. Firefox has really limited preferences to control what shows up in the location bar.

Luckily, both browsers behave the same way using about:config. So it’s possible to get Seamonkey’s fine-grained control on Firefox, as long as you don’t care about a UI to do it.

A very useful article can be found here: http://kb.mozillazine.org/Browser.urlbar.default.behavior.

I read that article, and was about to calculate the value I wanted, when I realized the simplest way to do it is to go to the Seamonkey install, set up the preferences the way you want (“Autocomplete from your browsing history as you type”, “Match only websites you’ve typed previously”, “Only match locations, not website titles”, “Match anywhere but preferring word boundaries”, “Automatically prefill the best match”, “Show list of matching results”).

Then look at the values on Seamonkey for

browser.urlbar.default.behavior

using about:config, and enter that value (and any others you care about) in Firefox using about:config on that browser.

In my case, I set browser.urlbar.default.behavior to 49 to get what I wanted.

Web on Andrew's Memory Blog

Migrating from Astro to Hugo

Set up Hugo #

Copy the old posts over #

Fix the posts #

Tweak code blocks to allow filenames #

Move things to match the old site #

Prettify the RSS feed #

Build the static site #

Install the static site #

Images are broken #