How to use Algolia search in hugo-theme-reimu

---
cover: images/00057.webp
---

Registering for Algolia

1. Go to the Algolia website and create an account.
2. Navigate to the Dashboard - Search - Index page, click + Create Index to create an index, and remember the index name.
3. Go to the Dashboard - Settings - API Keys page and note the following:
   • Application ID
   • Search API Key
   • Admin API Key

Configuring Algolia in Hugo

1. Add the following configuration to the root hugo.toml file. This ensures that when running hugo to generate the site, an algolia.json file is also created in the public folder for Algolia search.

[outputs]
home = ["Algolia", "HTML", "RSS"]

[outputFormats.Algolia]
baseName = "algolia"
isPlainText = true
mediaType = "application/json"
notAlternative = true

2. In params.yml, set algolia_search.enable to true and fill in the relevant details (Note: Only use the Search-Only Key here. Never enter the Admin Key, as it could lead to security risks!).

algolia_search:
  enable: true
  appID: # The Application ID mentioned above
  apiKey: # The Search API Key mentioned above
  indexName: # The name of the created index

Uploading the Index

Direct Upload

1. Run hugo to generate the site. This will create an algolia.json file in the public folder.

2. Go to the Dashboard - Search - Index page, find the newly created index, click Add records - Uploading file, and select the algolia.json file to upload.

Using the atomic-algolia Package

Use the atomic-algolia package to upload the index. The following steps are from the package’s documentation.

1. Install the atomic-algolia and cross-env packages:

npm install atomic-algolia cross-env

2. After running hugo to generate the site, execute the following command:

npx cross-env ALGOLIA_APP_ID={{ Application ID mentioned above }} ALGOLIA_ADMIN_KEY={{ Admin API Key mentioned above }} ALGOLIA_INDEX_NAME={{ Name of the created index }} ALGOLIA_INDEX_FILE=algolia.json atomic-algolia