The client search will become slower and slower with the content grows, it’s reasonable to have a remote search service to handle search requests from a large site.

Algolia is a popular search service that provides free plan (10k records, 10k requests per month). After reading this article, you will learn how to configure Algolia and automatically upload index files.

Preparations

Firstly, you need to create an Algolia account, and then create your application.

Navigate to the Overview > API Keys, the page shows anything you may need in the rest steps, such as application ID, search API key and the admin API key.

Configuration

NameTypeDefaultDescription
algoliaObject-Algolia
algolia.appIdString-App ID
algolia.apiKeyString-Search only API key
algolia.indexNameString-Index name
algolia.paginateNumber5
algolia.stallThresholdNumber300How many milliseconds must elapse before considering the autocomplete experience stalled.

Index

Create Index

Navigate to the Data sources > Indices > Create Index, and then create your index, let’s name it prod.

Add Searchable Attributes

Once the index was created, we’re in the index page.

Navigate to the Configuration > Searchable attributes, we’ll need add the title and content attributes.

Upload Index

After site built, the Algolia index file will be generated and saved as /algolia/index.json, i.e. http://localhost:1313/algolia/index.json.

Upload Manually

You can upload the index file manually via the Algolia dashboard for testing.

CLI Tool

I wrote a CLI tool for uploading the index file, it can be integrated with your CI & CD tools easilly.

GitHub Action

I also wrote a GitHub actions if you’re using GitHub to host your repository.

Create the .github/workflows/algolia.yml under your site root with the following content.

 1name: Algolia Index
 2
 3on:
 4  workflow_dispatch:
 5  push:
 6    branches:
 7      - "main"
 8
 9jobs:
10  index:
11    runs-on: ubuntu-latest
12    steps:
13      - name: Checkout
14        uses: actions/checkout@v3
15      - name: Build & upload Algolia index
16        uses: razonyang/[email protected]
17        with:
18          algolia-app-id: ${{ secrets.ALGOLIA_APP_ID }}
19          algolia-api-key: ${{ secrets.ALGOLIA_API_KEY }}
20          algolia-index-name: prod

And then create the ALGOLIA_APP_ID and ALGOLIA_API_KEY secrets for your repository.

ALGOLIA_API_KEY is the admin API key, not search only API key.

Once the GitHub action was created, the index file will be uploaded automatically on git push.