How to Implement the Algolia Search Feature in Docusaurus

3 min readJun 12, 2024

Welcome to the second part of our Docusaurus series! If you haven’t already, be sure to check out the first part, where we covered how to set up and customize a documentation site with Docusaurus. See here

Integrating search functionality into your Docusaurus documentation can significantly enhance user experience and navigation efficiency. Users do not have to look for information manually in your documentation.

The easiest and simplest way to add a search bar to your Docusaurus site is by using Algolia. Docusaurus gives you a few options to implement the search bar feature, but Algolia DocSearch is the official method.

In this guide, you’ll learn how to implement the Algolia Search Feature in Docusaurus in simple steps.

Apply to the DocSearch Program

The first step is to apply to the Algolia DocSearch program to receive your Algolia index, API key, and other credentials. You’ll be asked to fill in the following details:

Project name
Email address
GitHub repository, and this is optional.

After applying, you’ll get an email confirming your application.
Link to apply

The DocSearch crawler examines every link on your website, extracts content, and then pushes this content to an Algolia index. This process typically takes 1–10 days, and when it's done, you’ll receive an email with the details of your app and instructions for implementing the Algolia search.

Configuring the Algolia Search feature in your Documentation.

The app details Algolia sends you contain some credentials, but the most important ones needed to enable the search feature in your DocuSaurus site are the App ID, API Key, and Index name.

Navigate to your docusaurus.config.js file and add the algolia field to your themeConfig.section.

themeConfig ({     
 algolia: {
        
        appId: "YOUR APP ID",

        apiKey: "YOUR API KEY",

        indexName: "The Index name for your site",

        // Optional: 
        contextualSearch: false,

        
        replaceSearchResultPathname: {
          from: "/docs/", // or as RegExp: /\/docs\//
          to: "/",
        },
      }
})

Replace the appId, apiKey and indexName with the site’s credentials from Algolia. By default contextualSearch is set to true but your search bar may not display any results unless you set it to false. See more details about it here.

Depending on the customization you want, you can add other parameters to the Algolia section, but these are the basic configurations you need to get your search bar working.