Pagefind

static site search

31 Oct 2022

Aiming to replace Stork for my Pelican-powered static site. [Nic Note: This site]

Asked question regarding support of Github Pages:

Setup

Requires Node.js with npx.

Install from:

Not working with code snippet provided on Pagefind homepage.
Seems like an issue with CSS and JS paths.
Copied .js and .css files to Pelican theme/js and theme/css.
This works (currently Live), ie search input and output appear.. but empty. 404 on https://notes.nicolasdeville.com/_pagefind/pagefind-ui.css (which I should have tried and figured out at the previous step!) - which means the standard Github Actions worfklow triggered by Github Pages does not include the folder when deploying? ๐Ÿค”
Downloaded the Artifact (ie root folder content of the website on server) from Github Pages, and indeed the folder _pagefind is not included, despite being present in the main Github branch used as source for the default Github Actions workflow that generates Github Pages. Confirmed that folders prefixed with _ do not get included in the build: https://github/orgs/community/discussions/23640
How to get it included?
Asked: https://github/CloudCannon/pagefind/discussions/126

02 Nov 2022

Working now, using:

npx -y pagefind --source "/Users/USER/path/to/folder/with/html/files" --bundle-dir pagefind

The last pagefind argument defines the name of the folder to be created, overriding the default _pagefind which did not work because Github Pages ignores folders prefixed with _ upon deployment.

output:

.
โ”œโ”€โ”€ filter
โ”œโ”€โ”€ fragment
โ”œโ”€โ”€ index
โ”œโ”€โ”€ pagefind-entry.json
โ”œโ”€โ”€ pagefind-ui.css
โ”œโ”€โ”€ pagefind-ui.js
โ”œโ”€โ”€ pagefind.en_4dc9564564.pf_meta
โ”œโ”€โ”€ pagefind.en_8ba44c3efa.pf_meta
โ”œโ”€โ”€ pagefind.en_a9db73dbfe.pf_meta
โ”œโ”€โ”€ pagefind.en_eca087938c.pf_meta
โ”œโ”€โ”€ pagefind.en_fbece7798f.pf_meta
โ”œโ”€โ”€ pagefind.js
โ”œโ”€โ”€ wasm.en.pagefind
โ””โ”€โ”€ wasm.unknown.pagefind

Next steps:

  • exclude folders from search index (eg author, tag, etc..)
  • show only sections with results
  • show categories without having to expand each
  • focus: true on load
  • navigate results with keyboard

exclude folders from search index

Asked on Github: https://github/CloudCannon/pagefind/discussions/127

Is there a way to exclude (sub)folders or specific files from the index?

I'm getting duplicate results because the same article will show up in different folders, eg tags folder, author folder, etc..

Using Pelican as SSG and I can't figure out how to use data-pagefind-body or data-pagefind-ignore in the article's HTML in a way that they would be targeted depending on folder the article resides in.

For clarity, here is my output/source folder indicating where folders should be removed:

.
โ”œโ”€โ”€ 2019  /// REMOVE
โ”œโ”€โ”€ 2020  /// REMOVE
โ”œโ”€โ”€ 2021  /// REMOVE
โ”œโ”€โ”€ 2022  /// REMOVE
โ”œโ”€โ”€ ABOUT  /// REMOVE
โ”œโ”€โ”€ BingSiteAuth.xml
โ”œโ”€โ”€ CNAME
โ”œโ”€โ”€ ai
โ”œโ”€โ”€ apps
โ”œโ”€โ”€ archives.html  /// REMOVE
โ”œโ”€โ”€ author  /// REMOVE
โ”œโ”€โ”€ authors.html  /// REMOVE
โ”œโ”€โ”€ b2b-sales
โ”œโ”€โ”€ books
โ”œโ”€โ”€ careerplaybook
โ”œโ”€โ”€ categories
โ”œโ”€โ”€ csvs  /// REMOVE
โ”œโ”€โ”€ extra  /// REMOVE
โ”œโ”€โ”€ favicon.ico
โ”œโ”€โ”€ googlexxxxxxxxxxx.html  /// REMOVE
โ”œโ”€โ”€ helpers
โ”œโ”€โ”€ home-office
โ”œโ”€โ”€ images
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ interests
โ”œโ”€โ”€ leadership
โ”œโ”€โ”€ learning
โ”œโ”€โ”€ movies
โ”œโ”€โ”€ pagefind  /// my Pagefind index folder
โ”œโ”€โ”€ pdfs
โ”œโ”€โ”€ projects
โ”œโ”€โ”€ python
โ”œโ”€โ”€ random
โ”œโ”€โ”€ robots.txt
โ”œโ”€โ”€ sitemap.xml
โ”œโ”€โ”€ startups
โ”œโ”€โ”€ tag  /// REMOVE
โ”œโ”€โ”€ tags.html  /// REMOVE
โ”œโ”€โ”€ tesla
โ”œโ”€โ”€ theme
โ””โ”€โ”€ why

links

social