Hugo 添加 algolia 搜索功能

通过查找 LoveIt 的官方文档，我发现可以通过修改配置文件而简单地添加搜索功能。但考虑到我的站点规模较小，所以我决定添加 algolia 搜索，因为它无需占用服务器资源且提供的免费搜索次数也够用。

algolia 官网上的配置

注册 algolia 账号

algolia 的官网：https://www.algolia.com

注册比较简单，此处略。

创建新的应用及索引

• 如下图，进入仪表盘后上移点击Create Application创建新的应用，然后起个名字并选择 free 的订阅，然后点下一步。

  

• 选择数据中心的所处地，一般选靠近大陆的地点，这里由于没有香港的数据中心，所以我选择了美西，然后点击回顾应用的细节。

• 同意协议，并创建应用。

• 然后我们会跳转一个界面，这时如下图，我们创建一个索引。

  

• 创建索引完毕后，我们来到概述Overview,如下图，点击API Keys。

  

• 把前面三个Application ID,Search-Only API Key,Admin API Key给记录下来。

• 在config.toml中配置

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  # 搜索配置 [languages.zh-cn.params.search] enable = true # 搜索引擎的类型 ("lunr", "algolia") type = "algolia" # 文章内容最长索引长度 contentLength = 4000 # 搜索框的占位提示语 placeholder = "" # 最大结果数目 maxResultLength = 10 # 结果内容片段长度 snippetLength = 50 # 搜索结果中高亮部分的 HTML 标签 highlightTag = "em" # 是否在搜索索引中使用基于 baseURL 的绝对路径 absoluteURL = false [languages.zh-cn.params.search.algolia] #填你创建的索引的名称 index = "Your Index Name" #填你的 Application ID appID = "Your Application ID" #填你的 Search-Only API Key searchKey = "Your Search-Only API Key"

本地 Hugo 的配置

索引文件的生成

一般来说当我们使用hugo命令后，public文件夹下会自动生成index.json文件。

索引文件的上传

• 在我们本地 blog 站点的根目录下（我这里是D:\Hblog\site_name）执行以下命令：

  1 2	npm init npm install atomic-algolia --save

• 执行完后会生成node_modules文件夹（如果代码托管在 GitHub 的话，可以在.gitignore中添加/node_modules以忽略该文件）。

• 在项目根目录下还会有一个package.json文件，打开该文件，在scripts:{}中添加"algolia": "atomic-algolia"后结果如下：

  1 2 3 4

  "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "algolia": "atomic-algolia" },

• 在 blog 项目根目录下建立一个.env文件，文件内容如下：（根据自己的值填，一般来说第三项不用改）

  1 2 3 4

  ALGOLIA_APP_ID=Your Application ID ALGOLIA_INDEX_NAME= Your Index Name ALGOLIA_INDEX_FILE=public/index.json ALGOLIA_ADMIN_KEY= Your Admin API Key

• 在 blog 项目根目录下执行下面的命令便可将索引文件自动上传至更新 algolia 。

  1	npm run algolia

索引文件的更新

在日后，我们每一次增添文章或修改文章后，都要再将索引文件上传以更新。一般来说，我们只要在 blog 项目根目录执行下面两行代码，便可以更新索引文件。

1
2
3
4
5

#使索引文件 index.json 在文件夹 public 中生成
hugo

#将索引文件上传
npm run algolia

参考文章： Hugo添加Algolia搜索支持