Adding search to a static blog
post

Why does search matter?

I recently decided to take all the old posts from my old blog AtTheKeyboard and add them to this site. Since I used the same blogging system it was as simple as copying the markdown source into the correct place and generating static HTML for it.

I used to have a custom Google site search configured but in this new age of me giving a shit about the IndieWeb I wanted something a little more open and a little more free. I needed something else.

Like all things, this solution might not work one day but I will worry about that when the time comes.

Since I have blog posts dating all the way back to 2005 I felt it was essential to allow folks to search for stuff when they come here.

Outsourcing Research

As someone who has been on social media for along time, the best way to find an answer is to just ask your devoted audience a question. Eventually someone will answer you. I had tried to use Lunr but there was a lack of knowledge at my end on how to get the index I generated into the correct place onto the GitHub-pages-powered version of this web site. I had decided to just use a really basic "redirect-the-request-to-Google" input text form and rely on my site's new content getting indexed sometime soon.

Probably not great but I am the type of person who is lazy-with-intense-bursts-of-action.

Luckily for me, Dmitri Goosens found a solution and let me know. I under 30 minutes I had it all working. Which is stunning to me.

Pagefind

Pagefind is a CLI-based solution that appears to do everything I wanted:

  • it can be run via the CLI
  • it will index all your blog posts
  • they provide you with snippets of code to embed search boxes and results
  • it's customizable (came in handy due to some GitHub Pages limitations)

Their documentation is great and I now have working static search for my blog. For those

How I Do It

After adding the suggested code snippets to the pages for my blog, I do the following:

  • build the site pages
  • run Pagefind to generate the index, specifying where my blog posts are and what directory to put Pagefind-specific stuff in
  • copy all the stuff over to the repo for my blog
  • add the changes, commit, and push!

So, if you have a static blog and were wondering how to make it work, I highly recommend giving Pagefind a try.

Categories: tools