Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Algolia Search

Add Algolia search to your Gatsby site.


npm i @reflexjs/gatsby-plugin-search-algolia


Create an account on Algolia.

Go to API keys and copy the following key to a .env file.

// .env
ALGOLIA_APP_ID = <--- Application ID
ALGOLIA_SEARCH_KEY = <--- Search-Only API key
ALGOLIA_ADMIN_KEY = <--- Admin API key
ALGOLIA_INDEX_NAME = <--- Index name

Configure @reflexjs/gatsby-plugin-search-algolia as follows:

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "Reflex",
  plugins: [
      resolve: `@reflexjs/gatsby-plugin-search-algolia`,
      options: {
        appId: process.env.ALGOLIA_APP_ID,
        adminKey: process.env.ALGOLIA_ADMIN_KEY,
        searchKey: process.env.ALGOLIA_SEARCH_KEY,
        indexName: process.env.ALGOLIA_INDEX_NAME,
        types: [`Page`, `Post`],
  1. Run gatsby build to build your search index.

Adding a search box your site is as easy as:

import { Search } from "@reflexjs/gatsby-plugin-search-algolia"

and then render and style the Search box:

<Search placeholder="Search site..." fontSize="md" />
© 2023 Gatsby, Inc.