This theme includes built-in search functionality powered by Pagefind, a fast static search library that indexes your site content.

Enabling/Disabling Search

Control the search icon visibility in your params.toml

1
2
3

[theme]
  showSearchIcon = true   # Enable search
  showSearchIcon = false  # Disable search

Setup & Commands

When Search is Disabled (showSearchIcon = false)

You can use standard Hugo commands without any additional setup:

1
2
3
4
5

# Local development
hugo server

# Build for production
hugo

No additional dependencies or configuration required.

When Search is Enabled (showSearchIcon = true)

Search requires Pagefind to index your site content. Follow these steps:

1. Pagefind Wrapper (Recommended)

First, ensure you have Node.js installed, then initialize a Node.js project with:

1

npm init -y

This creates a basic node.js project on your root and creates a package.json file. In the package.json file replace the scripts with :

1
2
3
4
5
6
7

{
  "scripts": {
    "serve": "hugo server --disableFastRender",
    "build": "hugo && npx -y pagefind --site public --output-path public/pagefind",
    "dev": "hugo --destination public && npx -y pagefind --site public --output-path public/pagefind && hugo server --disableFastRender --buildDrafts --noHTTPCache"
  }
}

2. Install Pagefind Globally

You can also install pagefind binaries directly if you do not want to use the wrapper. This is not recommended generally.

1

npm install -g pagefind

For Local Development:

1

npm run dev

This command:

• Builds Hugo to the public folder
• Runs Pagefind to index content
• Starts Hugo server with drafts enabled

For Production Build:

1

npm run build

This command:

• Builds Hugo to the public folder
• Runs Pagefind to index content
• Output is ready for deployment

Simple Server (without rebuilding index):

1

npm run serve

Use this when you’ve already built the Pagefind index and just want to preview.

Important Notes

Always Use the public Folder

Pagefind is configured to:

• Read from: public (Hugo’s build output)
• Write to: public/pagefind (search index location)

Do not change the output directory — the theme expects the search index at /pagefind/.

How It Works

1. Hugo builds your site to public/
2. Pagefind scans public/ and creates a search index
3. The search index is saved to public/pagefind/
4. When deployed, the search UI loads this index automatically

What is indexed for search ?

Only those .md files which are considered posts are indexed by pagefind. If you .md files of type page, they will not be indexed and will not appear in search results.

If you want a page that appears in search you can use the following workaround in your frontmatter.

1
2
3
4
5
6
7
8

+++
title = 'Your Title'
date = 2023-01-01T08:00:00-07:00
showFrontMatter=false
type='post'
[build]
  list="never"
+++

Deployment

When deploying to platforms like Netlify, Vercel, or GitHub Pages, use the build command:

1

npm run build

Or configure your platform’s build command to:

1

npx hugo && npx pagefind --site public --output-path public/pagefind

More about deployment here.