labnotes

Indexing a hugo site using pagefind

static all the way down

tags
hugo
pagefind

Contents

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"

Previously

labnotes

erb static site builder

single file templating system

tags
ruby
tilt
erb
markdown

Next

fragments

everything is equally evolved

tags
language