Algolia 使用

Algolia是一个托管搜索引擎，提供全文，数字和多面搜索，能够从第一次击键中提供实时结果。

1. 登录 Algolia 官网 ，注册账号，可以通过Github账号进行注册登录。

2. 创建Application，订阅选择FREE就行，点击下一步。

   

3. 选择适合你的区域（离你近的）作为数据中心，这里我选择Hong-Kong（中国香港），之后点击创建。

   

4. 创建index，名字自定义，之后在hugo的config.toml配置文件中会用到这个index名。

   

5. 在仪表盘找到PLATFORM点击API Keys。

   

6. 将 API Keys 里面补充到Hugo的 config.toml 配置文件里面。

   LoveIt主题config.toml片段

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

   # 搜索配置 [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 = "index.zh-cn" # 与algolia里面的index名称相对应，如果你有多语言版本，那么就需要创建多个语言的index，我这里仅举例中文的版本 appID = "XXXXXXX" # 即algolia中Application ID searchKey = "xxxxxx.........." # 即algolia中Search-Only API Key

   注：Hugo LoveIt主题的配置文件自带有algolia搜索的配置项，修改即可。

   自己写的话在config.toml里面需要设置下面这些内容：

   1 2 3 4 5 6 7 8 9 10

   [outputFormats.Algolia] baseName = "algolia" isPlainText = true mediaType = "application/json" notAlternative = true [params.algolia] appId = 你的APP ID indexName = 你的index名称 searchOnlyKey = 记得这里只需要Search-Only API Key，不需要Admin API Key。

   同时，在[outputs]中，home增加Algolia。修改完毕应该长这样：

   1 2 3

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

使用 atomic-algolia 来完成自动更新索引

1. 首先安装 npm，这里不介绍

2. 安装 atomic-algolia

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

   npm init是用来生成默认的package.json，基本上一路回车就行了。运行运行完这两个命令之后，打开package.json文件，在"scripts"这部分增加一句"algolia": "atomic-algolia"。修改完毕之后应该长这样：

   1 2 3 4

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

3. 创建 .env 文件存放 algolia 配置，告诉atomic-algolia一些信息

   注意：只有执行hugo 生成静态文件，才会在 public 目录生成index.json 索引。

   1 2 3 4

   ALGOLIA_APP_ID="XXXXXXX" ALGOLIA_ADMIN_KEY="xxxxxx......" ALGOLIA_INDEX_NAME="index.zh-cn" ALGOLIA_INDEX_FILE="public/index.json"

4. 填写并保存之后，可以尝试把索引提交给Algolia了

   1	npm run algolia

如果一切正常，那么应该看到的是类似于下面图片：

也可以通过创建 push_algolia_json.js 脚本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var atomicalgolia = require("atomic-algolia")
var indexName = process.env.ALGOLIA_INDEX_NAME
var indexPath = process.env.ALGOLIA_INDEX_FILE

var cb = function(error, result) {
    if (error) throw error

    console.log(result)
}

atomicalgolia(indexName, indexPath, cb)

手动执行将索引到 algolia

1
2

source .env
node push_algolia_json.js

Algolia与Netlify结合

每次更新blog之后手动生成和上传索引肯定不是一个方便的解决方案。如果博客采用了Netlify来部署，使用Netlify的话使得部署更方便。怎么注册Netlify，如何把Netlify和GitHub整合也不是这篇blog要cover的内容，有需求可以参照Netlify部署Hugo个人博客。下面的内容假设你已经可以成功在Netlify上面部署博客站点了。

首先，进入Netlify的settings界面的Build & deploy里面找到Environment，然后点击Edit variables。点击New variables，把刚才.env文件里面的4个变量分别填进去就行了。类似这样：

之后，修改根目录下netlify.toml（关于netlify.toml文件的使用可以参考Netlify部署Hugo个人博客），把[build]下面的command行修改为：

1

command = "hugo --gc --minify && npm install atomic-algolia --save-dev && npm run algolia"

这样，下次更新完博客之后，netlify就会自动生成索引，并且提交给Algolia了。

关于使用LoveIt主题的Algolia配置与提交

因为有多语言版本，那么就需要创建多个语言的index分别提交。

这里我的做法是修改.env文件，自己写js脚本然后修改netlify.toml中的[build]下面的command行，通过Netlify进行Algolia提交。

.env

1
2
3
4
5
6

ALGOLIA_APP_ID = XXXXXXXX
ALGOLIA_INDEX_EN_NAME = index.en
ALGOLIA_INDEX_ZH_CN_NAME = index.zh-cn
ALGOLIA_INDEX_EN_FILE = public/index.json
ALGOLIA_INDEX_ZH_CN_FILE = public/zh-cn/index.json
ALGOLIA_ADMIN_KEY = xxxxxxxxxxxx........

也需要将.env文件里面的变量加入到Netlify的settings界面的Build & deploy的Environment里面。

push_algolia_json.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var atomicalgolia = require("atomic-algolia")
var indexName_EN = process.env.ALGOLIA_INDEX_EN_NAME
var indexPath_EN = process.env.ALGOLIA_INDEX_EN_FILE
var indexName_ZH_CN = process.env.ALGOLIA_INDEX_ZH_CN_NAME
var indexPath_ZH_CN = process.env.ALGOLIA_INDEX_ZH_CN_FILE

var cb = function(error, result) {
    if (error) throw error
    console.log(result)
}

atomicalgolia(indexName_EN, indexPath_EN, cb)
atomicalgolia(indexName_ZH_CN, indexPath_ZH_CN, cb)

netlify.toml

1
2
3

[build]
publish = "public"
command = "hugo --gc --minify && npm install && node push_algolia_json.js"

这样就能完成多个index的自动提交了。