Hugo + Algolia 实现站内搜索

很多的 Hugo 主题是没有自带搜索功能的，但是们为了方便用户浏览和查找内容是需要在网站上提供搜索功能。

主题 LoveIt 最新版已经内置了Lunr.js、algolia，这里我选择的是 Algolia ，只需要简单配置即可使用。

以下是两种搜索的对比:

lunr: 简单, 无需同步index.json, 没有 contentLength 的限制, 但占用带宽大且性能低 (特别是中文需要一个较大的分词依赖库)
algolia: 高性能并且占用带宽低, 但需要同步 index.json 且有 contentLength 的限制

在 Algolia 端创建应用和索引

创建新程序

点击 NEW APPLICATION，创建新程序，Name：自己起个名字，方案选择 FREE（免费），点击下一步；

地区选择邻近地区（比如 HongKong）即可；

确认信息，完成创建；

创建Index

在引导界面，选择新手引导，进行下一步；

输入 Index name（例如自己的域名），提交即可；

API Keys

点击左上的小房子回到主页，点击 API Keys，查看 Key 信息；

记住以下的 Keys，之后会用到；

开始配置

config.toml

把\themes\LoveIt\exampleSite\config.toml 文件，复制到Hugo项目根目录下（如果应用主题的时候已经操作过了可忽略这一步）修改以下信息，Ctrl+S 保存；

[languages.zh-cn.params.search]
  ...
  [languages.zh-cn.params.search.algolia]
    index = "index.zh-cn"
    appID = "PASDMWALPK"
    searchKey = "b42948e51daaa93df92381c8e2ac0f93"

生成索引文件

导航到Hugo项目根目录下使用 Git bat```batch 执行 Hugo 命令；

hugo

便会在\public\文件夹下生成 algolia.json文件；

上传索引文件至 Algolia

将刚刚生成的algolia.json文件上传至 Algolia 刚刚创建的 Index 下即可；

不过这样操作太过于繁琐了，每次更新博客都要手动上传一次，我们可以通过一个插件 atomic-algolia 来一键同步数据；

第一步 安装 atomic-aligolia ；

我们需要先确保我们已经安装了 npm 或者 yarn 包管理工具。

导航到Hugo项目根目录下右键使用 Git bat```batch 执行以下命令；

1	npm install atomic-algolia --save

这会将 atomic-algolia 软件包安装到本地 node_modules 文件夹，并使其可用于您的 Hugo 项目。

第二步 配置完成以后，在Hugo项目根目录下右键使用 Git bat```batch 执行以下命令：

1	ALGOLIA_APP_ID={{ YOUR_APP_ID }} ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }} ALGOLIA_INDEX_NAME={{ YOUR_INDEX NAME }} ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }} npm run algolia

这个时候我们在 dashboard 中打开 Indices ，可以看到已经有几十条数据了。

可还是不够便捷，请继续；

第三步 Algolia 是支持 .env 文件的，在 Hugo项目根目录中创建一个名为 .env 的新文件（就是这个文件名），并添加以下内容：

ALGOLIA_APP_ID={{ YOUR_APP_ID }}
ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }}
ALGOLIA_INDEX_NAME={{ YOUR_INDEX_NAME }}
ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }}

第四步 现在，您可以通过在Hugo项目根目录下右键使用 Git bat```batch 执行更简单的一条命令来更新索引：