Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions docs/docs/adding-search-with-algolia.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,13 @@ Algolia is a site search hosting platform and API that provides you with the com

Algolia will host the search index. You tell it what pages you have, where they are and how to navigate them, and the Algolia API will return those results to the user based on whatever search terms they use.

Algolia provides a free tier that offers a limited number of monthly searches. A paid plan is required for higher volumes.
Algolia provides a free tier that offers a limited number of monthly searches, a pay-as-you-go tier that allows you to pay for usage over a free amount, and committed plans for higher volumes.

### DocSearch

If you need search for a public developer-focused technical documentation site (think API/SDK docs, guides, blogs, etc), Algolia provides a completely free product called [DocSearch](https://docsearch.algolia.com/) that simplifies the process further and eliminates the need for indexing via plugin. The crawler will handle updates to your site and you'll be provided with out-of-the-box UI components for your front end.

If you're not building public technical documentation, read on for how to implement Algolia for all other use cases.

## Indexing and searching

Expand All @@ -20,8 +26,6 @@ The [Gatsby Algolia plugin](https://github.com/algolia/gatsby-plugin-algolia) ha

To build the user interface for searching, this guide will use [React InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/getting-started/react/), which is a library provided by Algolia with ready-made React components. This is the quickest way to get up and running, but you could also build your own custom user interface.

> Note: If you want to build a search for technical documentation, Algolia provides a product called [DocSearch](https://docsearch.algolia.com/) that simplifies the process further and eliminates the need for manual indexing. This is the preferred approach for documentation sites.

## Setting up the project

This guide will set up a search based on the [Gatsby starter blog](/starters/gatsbyjs/gatsby-starter-blog/). You can base it on your own project instead, but that might require minor modifications to the code, depending on your page structure and the frameworks you use.
Expand Down Expand Up @@ -601,8 +605,8 @@ The Netlify documentation has more information on [how to configure environment

## Additional Resources

If you have any issues or if you want to learn more about using Algolia for search, check out this tutorial from Jason Lengstorf:
If you have any issues or if you want to learn more about using Algolia for search, join the [Algolia Discord](https://alg.li/discord), or check out this tutorial from Jason Lengstorf:

https://youtu.be/VSkXyuXzwlc
- Learn With Jason: https://youtu.be/VSkXyuXzwlc

You can also find stories of companies using Gatsby + Algolia together [in the Algolia section of the blog](/blog/tags/algolia).
13 changes: 9 additions & 4 deletions docs/docs/how-to/adding-common-features/adding-search.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,17 @@ There are many options available, including both self-hosted and commercially ho
- [Meilisearch](https://www.meilisearch.com/) - OSS, [has Gatsby plugin](/plugins/gatsby-plugin-meilisearch/)
- [Typesense](https://typesense.org/) - OSS, [has hosted version](https://cloud.typesense.org), [has Gatsby plugin](/plugins/gatsby-plugin-typesense/)

Of these, the most common solution is Algolia. The Gatsby docs include a guide to adding Algolia to your site:
#### Algolia

- [Adding Search with Algolia](/docs/adding-search-with-algolia)
Algolia is a commercial search solution (with free tiers) that hosts the search index and search engine for you. It allows for advanced search features like events, analytics, recommendations, personalization, and more. Your search queries will be sent to their servers which will respond with any results. For UI components, Algolia provides a various libraries out of the box such as [InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/) and [AutoComplete](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/), or you can build your own from scratch and use the [REST APIs](https://www.algolia.com/doc/api-reference/rest-api/).

When using Algolia, they host the search index and search engine for you. Your search queries will be sent to their servers which will respond with any results. For UI components, Algolia provides a [React library](https://github.com/algolia/react-instantsearch) that has helpful components.
*Free For Public Technical Docs*

If you're building a documentation website you can use [Algolia's DocSearch feature](https://community.algolia.com/docsearch/). It will automatically create a search index from the content of your pages.
If you're building a public technical documentation website you can use [Algolia DocSearch](https://docsearch.algolia.com/). It will automatically create a search index from the content of your pages using a [crawler](https://docsearch.algolia.com/docs/record-extractor) and you can use the [DocSearch UI](https://docsearch.algolia.com/docs/docsearch-v3) out of the box.

*InDepth Guide*

To dive deeper into adding Algolia to your site, see [Adding search with Algolia](/docs/adding-search-with-algolia).

#### ElasticSearch
Elasticsearch also has several React component libraries for search, such as [ReactiveSearch](https://github.com/appbaseio/reactivesearch).