@Summitt Dweller’s Personal Blog - Azure

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.

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

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

cd ~/GitHub/
# Named the new project npm-blog-sd so it would not confilct with any of my existing `blog...` directories
mkdir npm-blog-sd
cd npm-blog-sd
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/blog-sd/. .  
# Installed Pagefind...
npm install pagefind
git init
# I created a new empty repo in GitHub called npm-blog-sd, 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?

  "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!

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

A New Production Branch

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.

Streamlit Ghost Azure Resources

Mark McFate — Thu, 01 Jun 2023 13:49:18 +0000

I’ve got Mackenzie looking at Streamlit as a means of building a mobile-friendly app that I can use to create posts like this one. That app will need to allow me to edit a TITLE and Markdown BODY fields, capture location and time, and post all of that information to my personal blog… preferably from my cell phone. I’ve captured some possible resources and guidance in https://www.one-tab.com/page/71iaDADxT-eLEOx15qeVnQ.

Wrap EVERYTHING in NPM!

Mark McFate — Fri, 19 May 2023 22:27:00 +0000

So, node and npm seem to be all the rage these days, and perhaps for good reason. I recently fell in love with Eleventy/11ty over Hugo because it’s Javascript, not Go, and it’s elegantly simple with tons of flexibility. I recently tried to add Pagefind search to a Hugo static web site (see https://static.grinnell.edu/dlad-blog/posts/143-significant-rootstalk-retooling/). If Rootstalk, an Azure Static Web App was framed in node.js, as both Eleventy and Pagefind are, there would be no problem. The Azure scripts used to deploy those frameworks are far more customizable than Hugo, and there’s documentation to prove it.

So, how might I 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.

That Was Too Easy!

Wrapping my Hugo 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

cd ~/GitHub/
# Named the new project npm-rootstalk so it would not confilct with any of my existing `rootstalk...` directories
mkdir npm-rootstalk      
cd npm-rootstalk
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/rootstalk/. .  
# Installed Pagefind...
npm install pagefind
git init
# I created a new empty repo in GitHub called npm-rootstalk, then...
git remote add origin https://github.com/Digital-Grinnell/npm-rootstalk 
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-rootstalk",
  "version": "1.0.0",
  "description": "Rootstalk website built with Hugo and the Lightbi theme inside an NPM package.  May 2023.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run hugo:build && npx pagefind --source public",
    "do:build": "hugo -d public && npx pagefind --source public",
    "azure:build": "hugo -d public --baseURL=\"https://yellow-wave-0e513e510.3.azurestaticapps.net/\" && npx pagefind --source public",
    "clean": "npm run hugo:clean",
    "serve": "npm run hugo:build && npx pagefind --source public --bundle-dir ../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.102.0",
    "pagefind": "^0.12.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-rootstalk repo to trigger an Azure (aka GitHub Actions) rebuild, indexing and deployment of the site to this address.

A New Production Branch

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 Pagefind Problem?

Mark McFate — Wed, 10 May 2023 14:33:09 +0000

Not Just a Hugo Issue

Take note of the question mark at the end of the title, otherwise it could be somewhat misleading. This is not really a problem with Hugo, but one with cloud deployment of Hugo static apps, particularly as an Azure Static Web App.

The Nutshell

As you may know from post 143, I have successfully installed and configured Pagefind in Rootstalk, but thus far it only works locally. When I try to deploy Pagefind to the cloud, specifically as an Azure Static Web App, I can’t make it work because there’s no apparent way to invoke the necessary npx pagefind... command AFTER Hugo compiles the site, but BEFORE the site gets deployed. Azure leverages GitHub Actions to build Hugo sites, but that process also involves some custom/proprietary Azure scripts. Therein lies the problem.

The Azure script auto-detects the presence of a Hugo project, or any one of many other platforms. That makes the process super-easy to use, but nearly impossible to “customize”. Azure does provide some configuration variables to influence the script behavior, most notably there’s an app_build_command variable that looks promising, but it only works for node builds, and not for Hugo.

Three Possible Solutions

I can reasonably see three possible solutions to this dilema. In order of simplicity they are:

1. Skip Azure and Deploy Only to DigitalOcean

Ultimately, Rootstalk’s production instance is a DigitalOcean (DO) static web app, Azure is only used for “staging” of a locally viable Rootstalk instance. DO doesn’t use GitHub Actions, a drawback in my book, so its build script, called an “App Spec” in DO, is a little more “open”. The critical portion of the App Spec I use to deploy Rootstalk in DO reads like this:

static_sites:
- build_command: hugo -d public

That’s it, just a simple hugo -d public command. So, in theory I should be able to just change that to read:

static_sites:
- build_command: hugo -d public && npm_config_yes=true npx pagefind --source "public" --bundle-dir ../static/_pagefind

It’s basically just a “compound” command to run npx immediately after hugo is done compiling.

The problem with this very simple solution, assuming it even works, is that it’s somewhat unique to Rootstalk which is already deployed to DigitalOcean. Other Hugo projects, and I have many like this blog, that need Azure or another cloud provider other than DO, would not benefit from this fix.

Update 12-May-2023: Same Problem Exists in DigitalOcean

Well, I tried. I attempted to push my Pagefind additions to Rootstalk forward directly into production on DigitalOcean. Unfortunately, that failed in similar fashion to what I saw in Azure. It all works locally, but DigitalOcean, like Azure, has no way of “detecting” that my Hugo project has an NPM component, and therefore takes no steps to build NPM or Pagefind into my solution.

So, I’m moving on to option #2 below. Wish me luck.

2. Wrap Hugo in `npm`

So, node and npm seem to be all the rage these days, and perhaps for good reason. I recently fell in love with Eleventy/11ty because it’s Javascript, not Go, and it’s elegantly simple with tons of flexibility. If my Azure Static Web App was framed in node.js, as both Eleventy and Pagefind are, there would be no problem. The Azure scripts used to deploy those frameworks are far more customizable than Hugo, and there’s documentation to prove it.

So, how might I approach something like this? Well, A Powerful Blog Setup with Hugo and NPM by Tom Hombergs looks like a promising place to start. The process that Tom advocates leverages a neat little package called hugo-bin.

If strategy #1 fails I’ll certainly give this #2 a try. Even if #1 works, I might give this strategy a spin if/when I re-tool this blog.

Update 29-May-2023: NPM is GREAT!

Since my first option (above) failed very quickly, I moved on to this option and I honestly think I might transition every static site that I have to be wrapped inside NPM, it works wonderfully and is a really attractive solution for so many ills!

I’m going to document my experience with NPM wrapped around Hugo and will post that document here soon, probably as Wrap EVERYTHING in NPM!.

3. Transition from Hugo to Eleventy

Reasonable? Yes. A lot of work? That’s relative. The right thing to do? Probably.

So, it’s already been done, see This Blog in Eleventy + Ghost and Searching for a Search Solution. That’s all I’m going to say about this option, a definite maybe.

That’s all folks… for now.

Wrapping Hugo in NPM

Mark McFate — Tue, 09 May 2023 23:13:09 +0000

I ran into a big road block with implementation of Pagefind in Rootstalk today… everything works fine in development, but I can’t easily deploy to Azure because there’s no way to “inject” Pagefind into an Azure Static Web App build before the “public” content gets deployed. I can generate the Pagefind parts after deployment, but that does me no good.

Tomorrow I need to have a look at my Rootstalk DigitalOcean deployment to see if what I already have might work there (DO uses a build script that I can add an npx... command to). If that fails I need to look back at https://www.blogtrack.io/blog/powerful-blog-setup-with-hugo-and-npm/ to see if there’s a solution there for me.

-/-/-/

location: Toledo, IA

Rename Azure Subscription

Mark McFate — Sat, 04 Feb 2023 09:36:17 -0600

Today I plan to follow the guidance found in Rename Azure Subscriptions and Find Your Environments Faster to fix the name of my personal Azure subscription 1, and maybe more. That’s a horrible name, I know!

Done! The new subscription name is SummittDweller Pay-As-You-Go. Much better!

Gating My Content

Mark McFate — Mon, 30 Jan 2023 14:45:01 -0600

Gating Content in JAMstack Sites

This section’s title was borrowed from a Stackbit article with the same title, Gating Content in JAMstack Sites. Working through that article to password protect some of the content at https://Wieting.TamaToledo.com is my tech pursit today.

Nope, Not on Netlify

😦 Last evening I took a shot at implementing the Netlify Identity tricks from the aforementioned article, but could not easily get it to work. The problem, I think, is that the https://Wieting.TamaToledo.com on Netlify already uses Netlify Identity for authentication of my Netlify CMS forms, and adding a second, separate instance of that service isn’t trivial and perhaps isn’t even feasible. I also tried implementing some quick Staticrypt CLI protection but that also failed. Netlify does provide a really quick and painless solution, but it costs $20/month, at a minimum, to enable it.

New Staticrypt Strategy?

So, my next shot at this will involve creating a new Eleventy site just for the Wieting’s protected content. Wish me luck and follow along here if you like.

Trying Azure DevOps

I recently created a personal Azure account, registered to summitt.dweller@gmail.com, and last evening (January 31, 2023) I took a dive into Azure DevOps under that account. The “welcome” email that I received says I now have an “organization” URL at https://dev.azure.com/summittdweller.

I jumped into Azure DevOps because it looks like within that environment I can establish a Content Management System (CMS) not unlike the NetlifyCMS (or perhaps it IS NCMS) that I run for the Wieting Theatre, hosted with Netlify.com. I really like NetlifyCMS, but thus far I’ve had limited success with it, and ONLY at Netlify.com where the user authentication process is nicely streamlined. I hope that Azure DevOps has user authentication that’s just as easy to manage, and at less cost.

So, I guess the strategy now is to see what Azure DevOps has to offer, rather than venturing further with Staticrypt.

That’s a TEMPORAY wrap, this post isn’t finished just yet.

@Summitt Dweller’s Personal Blog - Azure

Rebranding CV to HAT with Pagefind

A Newer Pagefind Enabled Blog!

Once Again…That Was Too Easy!

Following Tom’s Excellent Advice

It Works!

A Staging Site in Azure

Errors?

Last of the Errors?

Success!

A New Production Branch

A New Pagefind Enabled Blog!

That Was Too Easy!

Following Tom’s Excellent Advice

It Works!

A Staging Site in Azure

Errors?

Last of the Errors?

Success!

A New Production Branch

Streamlit Ghost Azure Resources

Wrap EVERYTHING in NPM!

That Was Too Easy!

Following Tom’s Excellent Advice

It Works!

A Staging Site in Azure

A New Production Branch

A Pagefind Problem?

Not Just a Hugo Issue

The Nutshell

Three Possible Solutions

1. Skip Azure and Deploy Only to DigitalOcean

Update 12-May-2023: Same Problem Exists in DigitalOcean

2. Wrap Hugo in npm

Update 29-May-2023: NPM is GREAT!

3. Transition from Hugo to Eleventy

Wrapping Hugo in NPM

Rename Azure Subscription

Gating My Content

Gating Content in JAMstack Sites

Nope, Not on Netlify

New Staticrypt Strategy?

Trying Azure DevOps

2. Wrap Hugo in `npm`