# Search

> Let users search your Docsy site with a choice of configurable search options.

---

LLMS index: [llms.txt](/llms.txt)

---

Docsy offers multiple options that let your readers search your site content, so
you can pick one that suits your needs or [design your own](#custom-search). You
can choose from:

- [Google Custom Search Engine](#google-search) (GCSE), the default option,
  which uses Google's index of your public site to generate a search results
  page.
- [Algolia DocSearch](#algolia-docsearch), which uses Algolia's indexing and
  search mechanism. Search results are displayed as a pop-up. Algolia DocSearch
  is free for public documentation sites.
- [Local search with Lunr](#local-search-with-lunr), which uses Javascript to
  index and search your site without the need to connect to external services.
  This option doesn't require your site to be public.

If you enable any of these search options in your project [configuration file],
a search box displays in the right of your top navigation bar. By default a
search box also displays at the top of the sidebar in the left navigation pane,
which you can disable if you prefer, or if you're using a search option that
only works with the top search box.

> [!WARNING] You can only enable a single search option at a time
>
> If you accidentally enable more than one search option in your project
> configuration file, you will get a warning at build time, and undetermined
> behavior when serving your site.

## Disabling the sidebar search box

By default, the search box appears in both the top navigation bar and at the top
of the sidebar left navigation pane. If you don't want the sidebar search box,
set the site parameter `sidebar_search_disable` to `true` in
`hugo.toml`/`hugo.yaml`/`hugo.json`:

<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-0" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-00-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-00" role="tab"
          aria-controls="tabs-00-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-00-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-00-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-00-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-00-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-00-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-00-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-0-content">
    <div class="tab-pane fade"
        id="tabs-00-00" role="tabpanel" aria-labelled-by="tabs-00-00-tab" tabindex="0">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-00-01" role="tabpanel" aria-labelled-by="tabs-00-01-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">ui</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">sidebar_search_disable</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-00-02" role="tabpanel" aria-labelled-by="tabs-00-02-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">ui</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">sidebar_search_disable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-00-03" role="tabpanel" aria-labelled-by="tabs-00-03-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;ui&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;sidebar_search_disable&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->

## Configure search with a Google Custom Search Engine {#google-search}

By default Docsy uses a [Google Custom Search Engine][GCSE] (GCSE) to search
your site. To enable this feature, you'll first need to make sure that you have
built and deployed a
[production version of your site](/docs/deployment/#build-environments-and-indexing),
as otherwise your site won't be crawled and indexed.

### Setting up site search

1.  Create a Google Custom Search Engine for your deployed site by clicking
    **New search engine** on the [Custom Search page][GCSE] and following the
    instructions. Make a note of the ID for your new search engine.
1.  Add any further configuration you want to your search engine using the
    **Edit search engine** options. In particular you may want to do the
    following:
    - Select **Look and feel**. Change from the default **Overlay** layout to
      **Results only**, as this option means your search results are embedded in
      your search page rather than appearing in a separate box. Click **Save**
      to save your changes.
    - Edit the default result link behavior so that search results from your
      site don't open in a new tab. To do this, select **Search Features** -
      **Advanced** - **Websearch Settings**. In the **Link Target** field, type
      "\_parent". Click **Save** to save your changes.

> [!TIP]
>
> Your site search results should show up within a couple of days. If it takes
> longer than that, you can manually request that your site is indexed by
> [submitting a sitemap through the Google Search Console](https://support.google.com/webmasters/answer/183668?hl=en).

### Adding the search page

Once you have your search engine set up, you can add the feature to your site:

<!-- markdownlint-disable -->
<!-- prettier-ignore-start -->
1.  Ensure you have a Markdown file in `content/en/search.md` (and one per other
    languages if needed) to display your search results. It only needs a title
    and `layout: search`, as in the following example:

    




    <ul class="nav nav-tabs" id="tabs-1" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-01-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-00" role="tab"
          aria-controls="tabs-01-00" aria-selected="false">
        Front matter:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-01-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-01-01" aria-selected="true">
        toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-01-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-01-02" aria-selected="false">
        yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-01-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-01-03" aria-selected="false">
        json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-1-content">
    <div class="tab-pane fade"
        id="tabs-01-00" role="tabpanel" aria-labelled-by="tabs-01-00-tab" tabindex="1">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-01-01" role="tabpanel" aria-labelled-by="tabs-01-01-tab" tabindex="1">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Search Results&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">layout</span> <span class="p">=</span> <span class="s2">&#34;search&#34;</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-01-02" role="tabpanel" aria-labelled-by="tabs-01-02-tab" tabindex="1">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Search Results</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">layout</span><span class="p">:</span><span class="w"> </span><span class="l">search</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nn">---</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-01-03" role="tabpanel" aria-labelled-by="tabs-01-03-tab" tabindex="1">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Search Results&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;layout&#34;</span><span class="p">:</span> <span class="s2">&#34;search&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>


1.  Add your Google Custom Search Engine ID to the site params in
    `hugo.toml`/`hugo.yaml`/`hugo.json`. You can add different values per
    language if needed.

    




    <ul class="nav nav-tabs" id="tabs-2" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-02-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-00" role="tab"
          aria-controls="tabs-02-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-02-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-02-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-02-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-02-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-02-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-02-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-2-content">
    <div class="tab-pane fade"
        id="tabs-02-00" role="tabpanel" aria-labelled-by="tabs-02-00-tab" tabindex="2">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-02-01" role="tabpanel" aria-labelled-by="tabs-02-01-tab" tabindex="2">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">gcs_engine_id</span> <span class="p">=</span> <span class="s2">&#34;011737558837375720776:fsdu1nryfng&#34;</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-02-02" role="tabpanel" aria-labelled-by="tabs-02-02-tab" tabindex="2">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">gcs_engine_id</span><span class="p">:</span><span class="w"> </span><span class="m">011737558837375720776</span><span class="p">:</span><span class="l">fsdu1nryfng</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-02-03" role="tabpanel" aria-labelled-by="tabs-02-03-tab" tabindex="2">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;gcs_engine_id&#34;</span><span class="p">:</span> <span class="s2">&#34;011737558837375720776:fsdu1nryfng&#34;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->
<!-- markdownlint-restore -->

### Disabling GCSE search

If you don't specify a Google Custom Search Engine ID for your project and
haven't enabled any other search options, the search box won't appear in your
site. If you're using the default `hugo.toml` from the example site and want to
disable search, just comment out or remove the relevant line.

## Algolia DocSearch

As an alternative to GCSE, you can use
[Algolia DocSearch](https://docsearch.algolia.com), which is free for public
documentation sites. Docsy supports **Algolia DocSearch v3**.

> [!NOTE] Algolia v2 is deprecated
>
> Docsy previously supported Algolia DocSearch v2, which is now deprecated. If
> you are an existing Algolia DocSearch v2 user and want to use the latest Docsy
> version, follow the
> [migration instructions](https://docsearch.algolia.com/docs/v3/migrating-from-v2)
> in the DocSearch documentation to update your DocSearch code snippet.

### Sign up for Algolia DocSearch

Complete the form at <https://docsearch.algolia.com/apply>. Proceed to the next
step once you've received Algolia DocSearch parameters for your project.

### Eager to test DocSearch?

Docsy defaults to the [Algolia test][]-site parameters when none are provided.
To enable search over the Algolia test, define `params.search.algolia` without
any other fields, as outlined next.

### Configure Algolia DocSearch

<!-- prettier-ignore-start -->

1.  Ensure that [GCSE search](#disabling-gcse-search) is disabled.
2.  Add your project's Algolia DocSearch parameters to
    `hugo.toml`/`hugo.yaml`/`hugo.json`, for example (using [Algolia test][]
    values):

    




    <ul class="nav nav-tabs" id="tabs-3" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-03-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-03-00" role="tab"
          aria-controls="tabs-03-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-03-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-03-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-03-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-03-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-03-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-03-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-03-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-03-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-03-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-3-content">
    <div class="tab-pane fade"
        id="tabs-03-00" role="tabpanel" aria-labelled-by="tabs-03-00-tab" tabindex="3">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-03-01" role="tabpanel" aria-labelled-by="tabs-03-01-tab" tabindex="3">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">search</span><span class="p">.</span><span class="nx">algolia</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">appId</span> <span class="p">=</span> <span class="s2">&#34;R2IYF7ETH7&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">apiKey</span> <span class="p">=</span> <span class="s2">&#34;599cec31baffa4868cae4e79f180729b&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">indexName</span> <span class="p">=</span> <span class="s2">&#34;docsearch&#34;</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-03-02" role="tabpanel" aria-labelled-by="tabs-03-02-tab" tabindex="3">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">search</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">algolia</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">appId</span><span class="p">:</span><span class="w"> </span><span class="l">R2IYF7ETH7</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">apiKey</span><span class="p">:</span><span class="w"> </span><span class="l">599cec31baffa4868cae4e79f180729b</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">indexName</span><span class="p">:</span><span class="w"> </span><span class="l">docsearch</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-03-03" role="tabpanel" aria-labelled-by="tabs-03-03-tab" tabindex="3">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;search&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;algolia&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nt">&#34;appId&#34;</span><span class="p">:</span> <span class="s2">&#34;R2IYF7ETH7&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="nt">&#34;apiKey&#34;</span><span class="p">:</span> <span class="s2">&#34;599cec31baffa4868cae4e79f180729b&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="nt">&#34;indexName&#34;</span><span class="p">:</span> <span class="s2">&#34;docsearch&#34;</span>
</span></span><span class="line"><span class="cl">      <span class="p">}</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->

To learn more about Algolia DocSearch V3, see
[Getting started](https://docsearch.algolia.com/docs/v3/docsearch).

When you've completed these steps, Algolia search should be enabled on your
site. Search results are displayed as a pop-up, so you don't need to add any
search results page.

### Customizing Algolia templates

You can customize or disable Docsy's default Algolia support by creating the
following template files:

- `layouts/_partials/algolia/head.html` used by `head.html` to load Algolia
  DocSearch styles. It also issues a deprecation warning for
  `params.algolia_docsearch`.
- `layouts/_partials/algolia/scripts.html` used by `scripts.html` to load and
  configure Algolia DocSearch.

Leave either file empty to disable Docsy's implementation.

## Local search with Lunr

[Lunr](https://lunrjs.com/) is a Javascript-based search option that lets you
index your site and make it searchable without the need for external,
server-side search services. This is a good option particularly for smaller or
non-public sites.

To add Lunr search to your Docsy site:

<!-- prettier-ignore-start -->

1. Enable local search in `hugo.toml`/`hugo.yaml`/`hugo.json`.

    




    <ul class="nav nav-tabs" id="tabs-4" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-04-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-04-00" role="tab"
          aria-controls="tabs-04-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-04-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-04-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-04-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-04-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-04-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-04-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-04-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-04-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-04-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-4-content">
    <div class="tab-pane fade"
        id="tabs-04-00" role="tabpanel" aria-labelled-by="tabs-04-00-tab" tabindex="4">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-04-01" role="tabpanel" aria-labelled-by="tabs-04-01-tab" tabindex="4">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">offlineSearch</span> <span class="p">=</span> <span class="kc">true</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-04-02" role="tabpanel" aria-labelled-by="tabs-04-02-tab" tabindex="4">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">offlineSearch</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-04-03" role="tabpanel" aria-labelled-by="tabs-04-03-tab" tabindex="4">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;offlineSearch&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>


2. Remove or comment out any GCSE ID in `hugo.toml`/`hugo.yaml`/`hugo.json` and
   ensure Algolia DocSearch is set to `false`, as you can only have one type of
   search enabled. See [Disabling GCSE search](#disabling-gcse-search).

<!-- prettier-ignore-end -->

Once you've completed these steps, local search is enabled for your site and
results appear in a drop down when you use the search box.

> [!TIP]
>
> If you're [testing this locally](/docs/deployment/local) using Hugo’s local
> server functionality, you need to build your `offline-search-index.xxx.json`
> file first by running `hugo`. If you have the Hugo server running while you
> build `offline-search-index.xxx.json`, you may need to stop the server and
> restart it in order to see your search results.

### Changing the summary length of the local search results

You can customize the summary length by setting `offlineSearchSummaryLength` in
`hugo.toml`/`hugo.yaml`/`hugo.json`.

<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-5" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-05-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-05-00" role="tab"
          aria-controls="tabs-05-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-05-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-05-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-05-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-05-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-05-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-05-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-05-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-05-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-05-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-5-content">
    <div class="tab-pane fade"
        id="tabs-05-00" role="tabpanel" aria-labelled-by="tabs-05-00-tab" tabindex="5">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-05-01" role="tabpanel" aria-labelled-by="tabs-05-01-tab" tabindex="5">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">offlineSearch</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">offlineSearchSummaryLength</span> <span class="p">=</span> <span class="mi">200</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-05-02" role="tabpanel" aria-labelled-by="tabs-05-02-tab" tabindex="5">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">offlineSearch</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">offlineSearchSummaryLength</span><span class="p">:</span><span class="w"> </span><span class="m">200</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-05-03" role="tabpanel" aria-labelled-by="tabs-05-03-tab" tabindex="5">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;offlineSearch&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;offlineSearchSummaryLength&#34;</span><span class="p">:</span> <span class="mi">200</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->

### Changing the maximum result count of the local search

You can customize the maximum result count by setting `offlineSearchMaxResults`
in `hugo.toml`/`hugo.yaml`/`hugo.json`.

<!-- markdownlint-disable -->
<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-6" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-06-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-06-00" role="tab"
          aria-controls="tabs-06-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-06-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-06-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-06-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-06-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-06-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-06-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-06-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-06-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-06-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-6-content">
    <div class="tab-pane fade"
        id="tabs-06-00" role="tabpanel" aria-labelled-by="tabs-06-00-tab" tabindex="6">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-06-01" role="tabpanel" aria-labelled-by="tabs-06-01-tab" tabindex="6">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">offlineSearch</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="nx">offlineSearchMaxResults</span> <span class="p">=</span> <span class="mi">25</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-06-02" role="tabpanel" aria-labelled-by="tabs-06-02-tab" tabindex="6">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">offlineSearch</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">offlineSearchMaxResults</span><span class="p">:</span><span class="w"> </span><span class="m">25</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-06-03" role="tabpanel" aria-labelled-by="tabs-06-03-tab" tabindex="6">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;offlineSearch&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;offlineSearchMaxResults&#34;</span><span class="p">:</span> <span class="mi">25</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->
<!-- markdownlint-restore -->

### Changing the width of the local search results popover

The width of the search results popover will automatically widen according to
the content.

If you want to limit the width, add the following scss into
`assets/scss/_variables_project.scss`.

```scss
.td-offline-search-results {
  max-width: 460px;
}
```

### Excluding pages from local search results

To exclude pages from local search results, add `exclude_search: true` to the
front matter of each page:

<!-- markdownlint-disable -->
<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-7" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-07-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-07-00" role="tab"
          aria-controls="tabs-07-00" aria-selected="false">
        Front matter:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-07-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-07-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-07-01" aria-selected="true">
        toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-07-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-07-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-07-02" aria-selected="false">
        yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-07-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-07-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-07-03" aria-selected="false">
        json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-7-content">
    <div class="tab-pane fade"
        id="tabs-07-00" role="tabpanel" aria-labelled-by="tabs-07-00-tab" tabindex="7">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-07-01" role="tabpanel" aria-labelled-by="tabs-07-01-tab" tabindex="7">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
</span></span><span class="line"><span class="cl"><span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;Index&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">weight</span> <span class="p">=</span> <span class="mi">10</span>
</span></span><span class="line"><span class="cl"><span class="nx">exclude_search</span> <span class="p">=</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-07-02" role="tabpanel" aria-labelled-by="tabs-07-02-tab" tabindex="7">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Index</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">10</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nt">exclude_search</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="nn">---</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-07-03" role="tabpanel" aria-labelled-by="tabs-07-03-tab" tabindex="7">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Index&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;weight&#34;</span><span class="p">:</span> <span class="mi">10</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;exclude_search&#34;</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->
<!-- markdownlint-restore -->

### Custom search

If none of the supported search engines address your project's needs, you can
implement your own custom search. If your searchbox fits within Docsy's standard
design, then you can implement custom search by overriding the following files:

- [layouts/_partials/search-input.html]
- [assets/scss/td/_search.scss]
- [assets/js/search.js]

[algolia test]: https://docsearch.algolia.com/docs/legacy/dropdown/#testing
[assets/js/search.js]:
  https://github.com/google/docsy/blob/main/assets/js/search.js
[assets/scss/td/_search.scss]:
  https://github.com/google/docsy/blob/main/assets/scss/td/_search.scss
[configuration file]:
  https://gohugo.io/getting-started/configuration/#configuration-file
[GCSE]: https://cse.google.com/cse/all
[layouts/_partials/search-input.html]:
  https://github.com/google/docsy/blob/main/layouts/_partials/search-input.html
