Contents

Hugo Algolia搜索及Netlify自动化处理

Algolia 使用

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

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

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

    /images/2021-09-27-HugoAlgolia搜索及Netlify自动化处理/image-20210928100326367.png

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

    /images/2021-09-27-HugoAlgolia搜索及Netlify自动化处理/image-20210928100519953.png

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

    /images/2021-09-27-HugoAlgolia搜索及Netlify自动化处理/image-20210928101021803.png

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

    /images/2021-09-27-HugoAlgolia搜索及Netlify自动化处理/image-20210928101908284.png

  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
    

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

/images/2021-09-27-HugoAlgolia搜索及Netlify自动化处理/image-20210930220438925.png

也可以通过创建 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个变量分别填进去就行了。类似这样:

/images/2021-09-27-HugoAlgolia搜索及Netlify自动化处理/image-20210930221150592.png

之后,修改根目录下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 & deployEnvironment里面。

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的自动提交了。