Skip to content
This repository has been archived by the owner on Jan 24, 2025. It is now read-only.

Latest commit

 

History

History

with-algolia-search

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
public
public
 
 
src
src
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
gatsby-config.js
gatsby-config.js
 
 
package.json
package.json
 
 

README.md

Docz with Algolia Search example

Using create-docz-app

npx create-docz-app docz-app-with-algolia-search --example with-algolia-search
# or
yarn create docz-app docz-app-with-algolia-search --example with-algolia-search

Download manually

curl https://codeload.github.com/doczjs/docz/tar.gz/main | tar -xz --strip=2 docz-main/examples/with-algolia-search
mv with-algolia-search docz-with-algolia-search-example
cd docz-with-algolia-search-example

Setup

Add your Algolia Credentials

Start by adding your Algolia credentials to a .env file, which you shouldn't commit. If you track this in your file, and especially if the site is open source, you will leak your admin API key. This would mean anyone is able to change anything on your Algolia index.

Rename .env.example to .env and fill in the values with your algolia keys that you can find here : https://www.algolia.com/api-keys

# //  .env.example
# rename this file to .env and supply the values listed below
# warning: variables prexifed with GATSBY_ will be made available to client-side code
# be careful not to expose sensitive data (in this case your Algolia admin key ALGOLIA_ADMIN_KEY)

GATSBY_ALGOLIA_INDEX_NAME=insertValue
GATSBY_ALGOLIA_APP_ID=insertValue
GATSBY_ALGOLIA_SEARCH_KEY=insertValue
ALGOLIA_ADMIN_KEY=insertValue
yarn # npm i

Send Data Parsed from your MDX Files to Algolia

Data is sent to Algolia only when you build your site.

Run the build command

yarn build

Now, if you open your algolia dashboard you should see a new index with the name you provided for ALGOLIA_INDEX_NAME in your .env file

Run

yarn dev # npm run dev

Build

yarn build # npm run build

Serve built app

yarn serve # npm run serve

Credits

The excellent tutorial on integrating Algolia with Gatsby : https://www.gatsbyjs.org/docs/adding-search-with-algolia/ was a huge help in preparing this example. The UI components are heavily inspired by the ones provided there. If you want to learn more about integrating Algolia make sure to read it !