Indexing a hugo site using pagefind

Build the site

Once you've built site, using `hugo` in our case, we need to run `pagefind` to index the output:

1
  npx pagefind --source "public"

This will create a _pagefind directory in your public folder which has the index and the code to display the search results.

Adding the front end

1
2
3
  <link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
  <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
  <div id="search" class="mt-8 hidden"></div>

I hide this box by default, but you can add some straigh JavaScript to toggle the search container.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
  <script>
    window.addEventListener('DOMContentLoaded', (event) => {
      new PagefindUI({
        element: "#search",
        showImages: false
        });
    });
    document.addEventListener('DOMContentLoaded', () => {
        var element = document.getElementById('search');
        var trigger = document.getElementById('search_toggle');

        trigger.addEventListener('click', () => {
            element.classList.toggle('hidden');
            element.querySelector("input").value=""
            element.querySelector("input").focus()
        });
    });

  </script>

Github build actions

You can look at my Github Workflow to build the site here, but add you really need to do is run npx pagefind --source "public" after you generate your site:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
  - name: Build with Hugo
    env:
      # For maximum backward compatibility with Hugo modules
      HUGO_ENVIRONMENT: production
      HUGO_ENV: production
    run: |
      hugo \
        --minify \
        --baseURL "${{ steps.pages.outputs.base_url }}/"      
  - name: Index pagefind
    run: npx pagefind --source "public"

References

https://pagefind.app/docs/installation/