@Summitt Dweller’s Personal Blog - Pagefind

Rebranding CV to HAT with Pagefind

Mark McFate — Sat, 25 Jan 2025 08:43:21 -0600

Today I’m rebranding the Tama-Toledo Community Visioning (CV) site to Hometown Action Team (HAT) and adding Pagefind.

When doing so I get this build error…

Warning: Running in pre-1.0 compatibility mode. Pagefind 1.0 changes the default output directory from /_pagefind/ to /pagefind/ but references to the /_pagefind/ URL were found on your site, and the output directory is unconfigured. To preserve your setup, the search files have been written twice, to both /_pagefind/ and /pagefind/

To remove this warning, either update your script and style references to the new /pagefind/ URL or run Pagefind with --output-subdir _pagefind to ensure pre-1.0 behaviour

So, I am going to try changing all _pagefind references to just ‘pagefind’. Wish me luck

A Newer Pagefind Enabled Blog!

Mark McFate — Sun, 22 Dec 2024 10:43:32 -0600

It’s deja vu all over again. My timeline module doesn’t work with the current rendition of https://blog.SummittDweller.com and I can’t figure out what’s broken. So, I’ve resurrected my old personal blog project and updated with the meager content it was missing. That project has a working timeline but no Pagefind search, yet.

So, how might I ONCE AGAIN approach combining Hugo with Pagefind in the cloud? Well, A Powerful Blog Setup with Hugo and NPM* by Tom Hombergs looked like a promising place to start. The process that Tom advocates leverages a neat little package called hugo-bin.

*The links provided above and below are to a Wayback Machine capture of the original post.

Once Again…That Was Too Easy!

Wrapping this Hugo blog site in an NPM package was so easy that I forgot to document it… and maybe I really didn’t need too. Time to catch up, so here’s a brief sysnopsis of what I did…

Following Tom’s Excellent Advice

I started by studying A Powerful Blog Setup with Hugo and NPM and quickly found that I could easily follow it almost verbatim. Since I already had npm and Hugo installed I skipped ahead to the section titled “Setting Up a Hugo Project” and then to the npx and git commands there. My experience, mostly in commands, looked like this on my Mac Mini workstation.

  cd ~/GitHub/
  # Named the new project npm-blog-SummittDweller so it would not confilct with any of my existing `blog...` directories
  mkdir npm-blog-SummittDweller
  cd npm-blog-SummittDweller
  npx hugo new site . --force
  # Copied the contents of my old project into the new one and then removed whatever I no longer needed
  cp -fr ~/GitHub/blogs-SummittDweller/. .  
  # Installed Pagefind...
  npm install pagefind
  git init
  # I created a new empty repo in GitHub called npm-blog-SummittDweller, then...
  git remote add origin https://github.com/SummittDweller/npm-blog-sd 
  git add . 
  git commit -m "Initial commit of new npm-wrapped Hugo project"
  git push

Having secured a new repo I moved to running Hugo locally, then polishing my package.json scripts as Tom did. I now have a package.json that reads like this:

{
  "name": "npm-blog-sd",
  "version": "1.0.0",
  "description": "My personal (SummittDweller) blog built with Hugo inside an NPM package.  December 2024.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run hugo:build && npx pagefind --site public",
    "do:build": "hugo -d public && npx pagefind --site public",
    "azure:build": "hugo -d public --baseURL=\"https://azure-static-web-apps-ashy-rock-0f18efc0f\" && npx pagefind --site public",
    "clean": "npm run hugo:clean",
    "serve": "npm run hugo:build && npx pagefind --site public --output-subdir ../static/_pagefind && npm run hugo:serve",
    "hugo:build": "hugo -d public",
    "hugo:serve": "hugo server",
    "hugo:clean": "rm -rf build resources public"
  },
  "author": "Mark A. McFate",
  "license": "ISC",
  "dependencies": {
    "hugo-bin": "^0.137.0",
    "pagefind": "^1.2.0"
  }
}

It Works!

Now I just use npm run serve to build the Hugo site, index it with Pagefind, and serve it locally at http://localhost:1313.

A Staging Site in Azure

I can simply push changes to the main branch of the npm-blog-sd repo to trigger an Azure (aka GitHub Actions) rebuild, indexing and deployment of the site to this address.

Errors?

So, it took lots of trial-and-error to get the Azure configuration straight. First there were issues with deployment tokens, so I rewound the project and got that fixed. Then, since this blog uses SASS I needed to run the extended version of Hugo, or more specifically, hugo-bin-extended. I fixed that, apparently, with the addition of…

  "dependencies": {
    "hugo-bin-extended": "latest",
    "pagefind": "^1.2.0"
  }

…in package.json. That hugo-bin-extended key replaced hugo-bin and I set the version to latest.

Last of the Errors?

The changes mentioned above left me with two deprecation errors…

ERROR deprecated: site config key paginate was deprecated in Hugo v0.128.0 and will be removed in Hugo 0.141.0. Use pagination.pagerSize instead.
WARN  Raw HTML omitted while rendering "/github/workspace/content/about.md"; see https://gohugo.io/getting-started/configuration-markup/#rendererunsafe
You can suppress this warning by adding the following to your site configuration:
ignoreLogs = ['warning-goldmark-raw-html']
ERROR deprecated: .Site.Social was deprecated in Hugo v0.124.0 and will be removed in Hugo 0.141.0. Implement taxonomy 'social' or use .Site.Params.Social instead.

This post was very helpful for working with my submodule theme!

Success!

Well, somewhat. My site at https://ashy-rock-0f18efc0f.4.azurestaticapps.net/ is visible now, but the theme isn’t right. I suspect that is because my hugo.yml file still sets the baseURL to “https://blog.summittdweller.com” and we are not quite there yet. Setting the baseURL to “https://ashy-rock-0f18efc0f.4.azurestaticapps.net/" and let’s see what happens… Bingo! Now, I just need to add a search bar to expose the Pagefind results. Done!

What follows is obsolete, it's from `npm-rootstalk`, and does NOT apply to this blog!

A New Production Branch

Pushing to production is just as simple, I just have to push changes to the new production branch of the code and my app spec at DigitalOcean (see below) takes care of building, indexing, and deploying to https://rootstalk.grinnell.edu.

That DO app spec reads like this:

alerts:
- rule: DEPLOYMENT_FAILED
- rule: DOMAIN_FAILED
domains:
- domain: rootstalk.grinnell.edu
  type: PRIMARY
- domain: prairiejournal.grinnell.edu
  type: ALIAS
envs:
- key: TZ
  scope: RUN_AND_BUILD_TIME
  value: America/Chicago
- key: HUGO_MATOMO_ID
  scope: RUN_AND_BUILD_TIME
  value: "15"
ingress:
  rules:
  - component:
      name: npm-rootstalk
    match:
      path:
        prefix: /
name: npm-rootstalk
region: nyc
static_sites:
- build_command: npm run build
  environment_slug: node-js
  github:
    branch: production
    deploy_on_push: true
    repo: Digital-Grinnell/npm-rootstalk
  name: npm-rootstalk
  source_dir: /

It’s heavenly! And that’s all for now.

A New Pagefind Enabled Blog!

Mark McFate — Wed, 18 Dec 2024 08:31:49 -0600

So, node and npm are maybe not “all the rage” these days, but they do the job nicely for me.