Algolia for Netlify

The Algolia for Netlify plugin lets you add fast and relevant search experiences to your Netlify site. All you need is an existing Netlify site.

Link your site to Algolia

1. Sign in to Algolia with Netlify

   Go to Algolia Crawler for Netlify and click Sign in to Algolia with Netlify. If you don’t have an Algolia account yet, a new one is created for you.

   
2. Authorize Algolia in Netlify

   On Netlify, you need to authorize Algolia to access your Netlify account, so that the plugin can update your plugin settings and add environment variables.

   
3. Install plugin

   1. In the Crawler Admin Console, search for your site and click Install.

      Algolia adds the necessary environment variables to your Netlify site. These environment variables start with ALGOLIA_.

      Algolia also creates a new Algolia application for your site.

      

   2. Confirm by clicking Install plugin.

      

   The plugin is now installed and ready to index your site.

Indexing

After installing the plugin, each Netlify deploy triggers a crawl, which updates an Algolia index.

To manually trigger a new deploy in Netlify, select any deploy and click Retry deploy > Deploy site.

When it receives a build hook, the Algolia Crawler processes your website asynchronously. This operation takes some time, so there is a short delay between the first deploy and the first crawl. Your site and your Algolia index are out of sync during that delay.

You can find information about your current crawler in the Netlify deploy logs.

By default, Algolia indexes the main or master branch. Algolia can still create one crawler with one index per git branch. This lets you use a production index on main and development index on develop. To enable multiple branches, you need to configure the branches plugin input. If you’re using the Algolia for Netlify frontend library, you need to pass the branch name in the library parameters.

You can click the crawler URL to follow the progress of your crawl.

When the crawl is complete, you can check your Algolia index with the extracted records. Algolia applies a default relevance configuration to your index, which you can adapt in the index settings.

To learn more about what’s inside the Algolia records, see Extraction strategy

Install the frontend bundle

You can install a frontend bundle for searching in your Algolia index and navigating the search results. You can find the code snippet in your Crawler Admin Console. Make sure to replace these variable placeholders:

Placeholder	Description
ALGOLIA_APP_ID	The unique identifier of your Algolia application
ALGOLIA_API_KEY	Your Algolia search-only API key
NETLIFY_SITE_ID	The unique identifier of your Netlify site (Algolia includes this for you in the snippet from the Crawler Admin Console)
TARGET_GIT_BRANCH	Your target git branch, either a fixed branch, like main, or a dynamic branch using an environment variable process.env.HEAD. For more information, see Using multiple branches.

HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
<script>
  algoliasearchNetlify({
    appId: 'ALGOLIA_APP_ID',
    apiKey: 'ALGOLIA_API_KEY',
    siteId: 'NETLIFY_SITE_ID',
    branch: 'TARGET_GIT_BRANCH',
    selector: 'div#search',
  })
</script>

This code snippet adds Algolia Autocomplete to the <div id="search"> element.

See also

• Frontend configuration
• Implement a custom UI with InstantSearch
• Tune your relevance settings
• Netlify Crawler plugin FAQ