Feature Request: Add a search bar or a tutorial on how to add one.

[AribYadi]

I need a search bar or a search page on my blog. If you don't want to add one, can you make a tutorial on how to add one?

[blakeashleyjr]

Hi @AribYadi, because Hugo produces a static website, dynamic functionality like search would have to generally have to be provided by an external provider like Elasticsearch, Solr, or Algolia.

There are some client-side search options you can look at: https://github.com/nextapps-de/flexsearch

[ben-krieger]

I wouldn't say I love the content matching algorithm, but this was a simple solution that looks quite nice with this theme.

Add hugomods/search:

> hugo mod get github.com/hugomods/search@latest

Add to config.toml:

# Navbar menu item
[[languages.en.menu.main]]
  identifier = "search"
  name = "Search (^K)"
  url = "/search"

# Search mod config
[params.search]
  min_match_char_length = 3
  ignore_location = true
  threshold = 0
  distance = 0
  index_content = true
  index_all_pages = false
  expand_results_meta = true

# Output search index for modal and search page
[outputs]
  home = ['HTML', 'Search', 'SearchIndex']

# Add module
[[module.imports]]
  path = 'github.com/hugomods/search'

Add JS/CSS to layouts/partials/extended_footer.html:

{{ partial "search/assets/js" . }}
{{ partial "search/assets/css" . }}

<!-- NOTE: Styling is configured for the green theme -->
<style>
:root {
  --search-primary: rgb(120, 226, 160);
  --search-color: rgba(120, 226, 160);
  --search-bg: rgb(31, 34, 42);
  --search-result-bg: rgb(31, 34, 42);
  --search-border-color: rgb(120, 226, 160);
} 
</style>

Create a search page (for when not using the modal via keyboard shortcut) by adding layouts/index.search.html:

{{ define "main" }}
<div class="search-container"></div>
{{ end }}

If this is helpful, I can create a doc. And if anyone has better search algorithms or parameters, let me know!