Adding Search Functionality to Hugo with PaperMod⌗

Introduction⌗

Hugo is a fast and flexible static site generator, but out of the box, it doesn’t include a built-in search function. The PaperMod theme, however, provides support for search via Lunr.js, allowing users to quickly find relevant content. In this guide, we’ll set up a working search for your Hugo blog using PaperMod.

Step 1: Enable Search in PaperMod⌗

PaperMod has built-in support for client-side search using a JSON index. To enable it, add the following lines to your hugo.toml:

[outputs]
    home = ["HTML", "RSS", "JSON"]

This ensures Hugo generates index.json, which will serve as the search index.

Step 2: Create the Search Page⌗

PaperMod provides a built-in layout for the search page. You only need to create a new content file for it:

hugo new search.md

Edit content/search.md and add the following front matter:

+++
title = "Search"
layout = "search"
+++

This tells Hugo to use the built-in search.html layout from PaperMod.

Step 3: Configure Search in `hugo.toml`⌗

To ensure PaperMod knows that search should be available, add this under the [params] section in hugo.toml:

[params]
    ShowSearch = true

Step 4: Add a Search Link to the Main Page⌗

If you want to provide easy access to search, you can add a link to the search page in the main menu. Modify your config.toml (or hugo.toml) to include:

[[menu.main]]
    name = "Search"
    url = "/search/"
    weight = 10

Step 5: Generate the Search Index⌗

Run the following command to rebuild your site and ensure the search index is created:

hugo server -D

Then visit http://localhost:1313/search/ and try searching for a keyword from your blog posts.

Step 6: Deploy Your Site⌗

Once everything works locally, deploy your site as usual:

hugo && rsync -avz -e "ssh -i /path/to/private_key" public/ user@your-vps:/var/www/html/

Notes on Search Implementation in Other Themes⌗

If you’re using a different Hugo theme, the process of adding search might vary. Some themes provide built-in support for search, while others require manual integration with Lunr.js or external services. Here are some general guides on adding search to Hugo:

Conclusion⌗

With these steps, you’ve successfully added search functionality to your Hugo blog using the PaperMod theme. Users can now search for content dynamically, making navigation easier and improving accessibility.

Adding Search Functionality to Hugo with PaperMod