Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a how to add search to your website section #5272

Merged
merged 17 commits into from
May 16, 2018
Merged
11 changes: 11 additions & 0 deletions docs/docs/adding-search.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: "Adding search to your Gatsby website"
---

There are few ways to approach adding search to your Gatsby-powered site:

1. You can use libraries such as [elesticlunr](https://www.npmjs.com/package/elasticlunr) for offline search but doing so will require you to index at build time. Fortunately, this is achievable using the [gatsby-plugin-elasticlunr-search](https://github.com/andrew-codes/gatsby-plugin-elasticlunr-search) plugin.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might also want to add a mention for js-search as well that the entire search index has to be brought into the client — I've tested this and for sites even around ~100 posts — the search index can get > 250kb (my memory of the numbers is a bit vague but it goes up quickly). You can offset this by only indexing titles and such but it's tricky for all except small sites.


2. If you're building a website for your documentation, you can use the [Algolia docs](https://www.algolia.com/doc/) feature--it scrapes the DOM and builds the search index automatically. After that, you'll need to implement your own [search UI](https://www.algolia.com/doc/paths/build-search-ui/).

3. Use Algolia to collect the search index at build time and upload it using [gatsby-plugin-algolia](https://github.com/algolia/gatsby-plugin-algolia).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

link the word Algolia to their site?

2 changes: 2 additions & 0 deletions www/src/pages/docs/doc-links.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@
link: /docs/creating-dynamically-rendered-navigation/
- title: Dropping Images into Static Folders*
link: /docs/dropping-images-into-static-folders/
- title: Adding search to your Gatsby website
link: /docs/adding-search/
- title: Reference
items:
- title: Node Interface
Expand Down