Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.

README.md

Algolia + Netlify logo

Build Status Netlify build status Version

Algolia Netlify plugin

Automatically index your website to Algolia when deploying your project to Netlify with the Algolia Crawler.

Sign in to Algolia with Netlify

Table of contents

Getting started

Here's how you can implement an instant search on your site using Netlify, Algolia, and this plugin. All you need is an existing Netlify site.

This plugin is in Public Beta

Link your site to Algolia

First, go to the Algolia Crawler for Netlify and click Sign in to Algolia with Netlify. We automatically create a new Algolia account if you don't have one.

Sign in to Algolia with Netlify

Then, authorize Algolia to access your Netlify account. The plugin only updates your plugin settings and adds necessary environment variables.

Authorize Algolia's OAuth

In the Crawler Admin Console, search for your site, then click Install. We automatically update your Netlify site to add the environment variables (prefixed by ALGOLIA_) that you need to use the plugin.

We also create an Algolia application with a dedicated Free plan.

Search for your site

Install in your site

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

View your site information.

Indexing

Once you've installed the plugin, your next Netlify deploy will trigger a crawl and populate an Algolia index. You can manually trigger a new deploy in Netlify by clicking Retry deploy > Deploy site on any deploy.

When it receives a build hook, the Algolia Crawler processes your website asynchronously. This operation takes some time, resulting in a short delay between the first deploy and the associated crawl. Your site and your Algolia index will be out of sync during that delay.

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

Note: by default, we only build the master branch. We can however create one crawler (targeting one Algolia index) per Git branch, so that you can have, for example, a production index on master and development index on develop. You need to configure the branches plugin input to enable this feature. If you're using our front-end library, you'll also need to pass the correct branch to the library parameters.

Netlify deploy logs.

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

Your Crawler running.

Once the crawl is done, you can check your Algolia index, which contains the extracted records. We apply a standard relevance configuration by default, but you can fine-tune it as you want in the index settings.

Find out what's inside your records.

Your Algolia Index.

Installing the front-end bundle

We recommend using our bundle as it's compatible out of the box with the records we extract from your site. You can still build your custom UI if you want to.

You can find an HTML code snippet in the Crawler Admin Console that you can use in your code. Make sure to replace the variables with the provided ones:

  • YOUR_ALGOLIA_APP_ID: the unique identifier of your Algolia application
  • YOUR_ALGOLIA_API_KEY: your Algolia search-only API key (you can find it on your Algolia dashboard)
  • YOUR_NETLIFY_SITE_ID: the unique identifier of your Netlify site (we prefill this for you in the snippet from the Crawler Admin Console)
  • YOUR_TARGET_GIT_BRANCH: Target git branch, either a fixed one (e.g. 'master') or a dynamic one using process.env.HEAD. See "Using Multiple branches" of the frontend doc.
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.js"></script>
<script>
  algoliasearchNetlify({
    appId: '<YOUR_ALGOLIA_APP_ID>',
    apiKey: '<YOUR_ALGOLIA_API_KEY>',
    siteId: '<YOUR_NETLIFY_SITE_ID>',
    branch: '<YOUR_TARGET_GIT_BRANCH>',
  });
</script>

This code automatically adds a search autocomplete widget on your website on all <input type="search" /> tags, using your newly created Algolia index.
Please refer to the full documentation to configure this front-end plugin.

Autocomplete preview

Going further

Uninstalling the plugin

Disable

You can temporarily disable the plugin by adding the following environment variable in Netlify (Deploy > Settings > Build & Deploy > Environment).

ALGOLIA_DISABLED=true

Uninstall

To uninstall the plugin, go to your Crawler Admin Console and click Uninstall. It automatically cleans up the environment variables and deletes associated data from Algolia.

You can also go to your Netlify plugins and click Options > Uninstall plugin. Note that this won't clean your data on our end.

Limitations, known issues, and FAQ

My website requires JavaScript to render

The Algolia Crawler supports JavaScript-rendered websites, but we don't yet expose this option in the plugin. Please contact us to enable it.

My website is password protected

If you have configured the password protection through your Netlify site's settings, the Crawler will automatically use this password to crawl your website.

I want to extract more information from my pages

While the Algolia Crawler offers extended record customization, the plugin currently provides a single, default extraction strategy.

If you believe we've missed something, or you'd like to have more control, please share your feedback in our Discourse forum.

Can I build my own UI?

Of course!

We recommend using InstantSearch, our open-source, production-ready UI libraries that let you quickly build a search interface in your front-end application. InstantSearch is available for vanilla JS, React, Vue and Angular.

Can I receive a notification when my crawl is done?

You can configure notifications in the account settings of your Crawler Admin Console.

My website is not crawled

The monitoring tab in the Crawler UI will provide information to help you improve the crawler behavior. By default we respect most of the standard web rules: robots.txt, password protection, canonical, redirection, etc...

You can help the crawler by:

  • Allowing our user-agent in [your robots.txt]()
  • Specifying relative URLs in your links and canonical instead of absolute URLs that could conflict with the domain you may use.

Troubleshooting

Architecture

This repository is itself a netlify site, which allows us to test the whole setup.

Development & Release

See CONTRIBUTING.md.

You can’t perform that action at this time.