preface

Hugo is developed by Steve Francis (SPF13.com/) based on the ‘Go’ language… It’s very easy for Hugo to create a website. There are basically no barriers to entry. The official website also provides a large number of topics for you to choose from, you just need to concentrate on the article you are writing. But the problem is search, we know that search is a dynamic behavior, how do you add search to static sites? Of course, we can use the site search function of Google. Hugo also provides some open source and commercial solutions. Today, we are going to introduce a very excellent commercial solution: Algolia.

registered

  1. Go to www.algolia.com/ and log in using your GitHub or Google account.

  2. After login, fill in some basic information as prompted.

  3. After registering, we went to the Dashboard and found that Algolia would generate an app for us by default.

    • The default app can be renamed in Settings → Applications

  4. Select Indices and add a new index, I’ll call it Blog. Once created successfully, we can see that there are no records in the prompt.

  5. Algolia provides three ways to add records: manually add, upload JSON files, and use apis.

Modify the config.toml configuration

The following content is tested based on the Loveit theme

[params.algolia]
  appId = "Your Application ID"
  indexName = "Your index name"
  searchOnlyKey = "Your search-only API Key"
Copy the code

When Hugo is executed, public/index.json is automatically generated for indexing

Uploading index Files

Once the index file is generated, we need to upload it to Algolia’s server.

Manual upload

This step is optional, but it is recommended to follow it.

Click on the sidebarIndices, click on theUpload record(s)Button upload generated in the previous stepindex.jsonFile.

Once the upload is successful, we can immediately try to search:

It can be seen that the search keywords have corresponding matching results, indicating that the index file we generated is correct.

Automatically upload

Manually uploading index files every time you finish writing a blog post is a painful, pointless chore.

Therefore, we need to automate the upload of index files during automatic deployment.

Here we use the NPM package atomic-Algolia to complete the upload operation.

  • Installation of atomic – algolia package

    npm install atomic-algolia --save
Copy the code

  • Modify package.json file in root directory (if not new), add “algolia”: “atomic-algolia” under scripts

    {
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."algolia": "atomic-algolia"}}Copy the code

    Notice that there is an English comma at the end of the “test” line.

  • Create a new. Env file under the root directory with the following contents:

    ALGOLIA_APP_ID= your Application ID ALGOLIA_INDEX_NAME= your index name ALGOLIA_INDEX_FILE=public/index.json ALGOLIA_ADMIN_KEY= your Admin  API KeyCopy the code

    Note the substitution of information for your own Algolia index. Also note that ALGOLIA_ADMIN_KEY can be used to manage your index, so try not to commit to a public repository. Can be added to.gitignore

  • You can run NPM run algolia locally to see the result:

    You can see that we successfully added the record.

  • Later, you can add the following command to your deployment script:

    npm run algolia // Execute after Hugo command
Copy the code

The resources

  1. Hugo adds Algolia search support
  2. Atomic – algolia plug-in
  3. Hugo integrates Algolia search