Hugo + Algolia 实现站内搜索

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

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

在 Algolia 端创建应用和索引

创建新程序

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

▲ 创建新程序

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

▲ 选择地区

确认信息，完成创建；

▲ 确认创建

创建Index

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

▲ 创建 Index

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

▲ 命名Index name

API Keys

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

▲ 点击 API Keys

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

▲ 记住 Key 信息

开始配置

config.toml

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

1
2
3
4
5
6

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

生成索引文件

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

1

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 ，可以看到已经有几十条数据了。

▲ Indices界面

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

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

1
2
3
4

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 执行更简单的一条命令来更新索引：

1

npm run algolia

参考链接

• zhaoqiang’s blog

• 水寒

---

• 文章作者：守正
• 文章标题：Hugo + Algolia 实现站内搜索
• 原文链接：https://ll.sc.cn/posts/hugo_algolia_site_search/
• 版权声明：本站所有文章除特别声明外，均采用CC BY-NC-ND 4.0国际许可协议，若转载请注明出处！

 分享到朋友圈

赞赏支持

微信打赏 支付宝打赏