In this post, we will be looking into how to add Algolia search to our gatsby site. We will see how to configure Algolia in Gatsby and add Algolia’s built-in component.

---

Setup

To setup algolia search, first we need to:

• create an account at algolia’s website here
• once done, we can create an index that we can name whatever we want (i.e blog)

After that, we can grab the API keys and put them in our.env which we can find them here

// .env
GATSBY_ALGOLIA_APP_ID="xxxx"
GATSBY_ALGOLIA_INDEX_NAME="test"
ALGOLIA_API_KEY="xxx"
GATSBY_ALGOLIA_SEARCH_KEY="xxx"

Installation

Now we can move back to code, by installing a couple of plugins that we are going to need

npm install algoliasearch dotenv gatsby-plugin-algolia react-instantsearch-dom

After installing the gatsby plugin it will allow us to fetch the data with GraphQL and send it to algolia.

#algolia #programming #gatsbyjs #react #javascript #gatsby