个人独立站接入 Algolia 搜索（NotionNext）

📝 背景介绍

在信息密度不断上升的内容网站中，高效、快速的站内搜索功能已成为提升用户体验的关键要素。

对于许多使用静态网站生成器（如 Next.js、Hugo、NotionNext 等）构建的个人独立站点来说，如何在不引入复杂后端的前提下提供强大的搜索能力，是一个常见需求。

Algolia 是一个托管型搜索即服务（Search-as-a-Service）解决方案，提供了超快的搜索响应、 typo 容错、实时索引等强大功能，非常适合中小型独立站点快速集成。

本篇以 NotionNext 为例介绍如何快速集成 Algolia 搜索。

📦 使用场景

  • 技术博客站：快速搜索文章标题或正文
  • 产品介绍页：搜索功能模块、使用说明
  • 文档站或知识库：关键词联想，提升访问效率
  • 无后端静态网站：希望拥有云端搜索能力

🛠️ 接入步骤

1️⃣ 注册并配置 Algolia 应用

  • 前往 Algolia 官网
  • 注册账号(可以直接通过Github账号登录)，按照向导默认会自动创建一个应用

在最后一步导入数据时，可以先选择跳过：

2️⃣ 创建应用索引

在左侧菜单栏下方，找到 Data sources, 点击进入后，再点击 Indices → Create Index

输入索引名称，这里记住在后面配置 NotionNext 环境变量时需要。

3️⃣ 查看 API Keys

创建完应用的索引之后，我们再到设置中查看应用的 API Keys，点击左侧菜单栏最下方的Settings，再点击 API Keys。

到这里 Algolia 已经配置完了，接下来回到我们 NotionNext 配置环境变量。

4️⃣ 配置 NotionNext 环境变量

环境变量描述如下：

变量名 描述
NEXT_PUBLIC_ALGOLIA_APP_ID 应用ID
NEXT_PUBLIC_ALGOLIA_INDEX 数据库名，Algolia可创建多个数据库，这里配置要关联的Index
NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_APP_KEY 客户端搜索文章用的秘钥，会暴露给浏览器
ALGOLIA_ADMIN_APP_KEY 管理端秘钥，后台上传文章内容会用到。

如果是使用 Vercel 部署，在后台环境变量中添加以上配置即可。

我这里是使用的环境变量文件，就直接在env文件中追加的。

5️⃣ 查看效果

配置完成之后需要再编译构建一次，就能在网站上看到效果了。

体验了一下，确实要比之前的搜索效果好很多~

✅ 总结

通过集成 Algolia，NotionNext 博客在不依赖后端的前提下即可获得极致搜索体验。

结合其优雅的前端 UI 与 Notion 内容管理模式，是提升博客专业性的关键一步。

📎 参考文章