Pagefind on Github Pages?

[ndeville]

I am currently using Stork (with Pelican as SSG) but running into issues with a large index file for a 500 pages site.

Pagefind looks like a potential great alternative.

Before I go ahead and switch, can someone confirm if it can be deployed on Github Pages?

I'm puzzled by this part:

The last required step is to run Pagefind after building your site on your CMS or hosting platform.
If you’re a CloudCannon user, add a [.cloudcannon/postbuild](https://cloudcannon.com/documentation/articles/extending-your-build-process-with-hooks/) file containing the npx command above (minus the --serve flag). 
For other platforms, set up an equivalent command to run after your site build — 
the end goal is that Pagefind will run after every build of your site before it is deployed.

[bglw]

Hello 👋

There are a few paths here.

The best possible path is to use the GitHub Pages via Actions workflow that is somewhat recent. This replaces the default Deploy from a branch pages setup, and instead gives you an action that can run arbitrary commands that then deploy to pages as normal.

If that isn't possible/desirable, some people will run Pagefind locally before pushing: If you check out Bryce Wray's Pagefind article, in the update section he covers a way to run Pagefind and output the index directory somewhere that the site build can then re-ingest it. This would make your local flow:

1. Build site locally
2. Index the built site with Pagefind
3. Place the _pagefind bundle directory somewhere such that building the site outputs it as an asset
4. Commit & push

Ultimately, the workflow is very similar to Stork (or other frontend search libraries) in that Pagefind outputs some static files to host, so whatever your current setup is should work fine for Pagefind. The main differences are:

• Rather than a single search index file, Pagefind outputs a directory _pagefind full of all files needed for search
• Rather than having config and reading source files, Pagefind ingests a folder of static HTML (typically the end result of an SSG build)

Hopefully that helps explain things! If need be I can look at putting an example together for the GitHub Pages via Actions workflow, as it's definitely the best experience and this question comes up enough that it would be good to have an example on hand 🙂 Let me know

[ndeville]

Thanks Liam for the detailed answer! I also watched your video - clever solution!

I'm fine with building locally - I can add this step in my shell script (with the other command lines needed for Pelican).

I went ahead and tried to implement Pagefind yesterday evening but could not make it work.

It appears the issue is that Github Pages does not include folders prefixed with _ upon deployment - see https://github.com/orgs/community/discussions/23640

So the _pagefind folder is in my Github repo (see https://github.com/notes-nicolasdeville/notes-nicolasdeville.github.io) but gets ignored upon build (using the default Github Pages Actions that gets triggered when repo is updated).

What is the cleanest way to address this?

[bglw]

No worries!

When you run the Pagefind CLI, pass in a Bundle directory option like --bundle-dir hooray (instead of the implied default --bundle-dir _pagefind)

Then if you're using the Pagefind UI, just update the style and script tags to point to /hooray/... instead of /_pagefind/... 🙂

[ndeville]

That was easy! It's working now 😁
Thank you so much and great work on this library! 👍🏼🙏🏼
Now onto configuring it to tweak results..