简介

本文介绍如何利用 Jekyll + GitHub Pages 实现静态网站的免费托管，并集成 Algolia 搜索和七牛云静态资源存储。

1. 本地静态博客编写与生成

  • 使用 VSCode 等编辑器，在 _posts 目录下以 Markdown 编写博客文章。
  • 使用 Jekyll 生成静态页面：
gem install bundler jekyll
bundle exec jekyll serve
# 或生成静态文件
bundle exec jekyll build
  • 生成后的静态文件位于 _site 目录。

2. GitHub Pages 托管

  • 注册 GitHub 账号，新建仓库，命名为 yourname.github.io。
  • 将 Jekyll 博客文件推送至仓库：
git init
git remote add origin https://github.com/yourname/yourname.github.io.git
git add .
git commit -m "first commit"
git push -u origin main
  • 启用 Pages，推送后即可通过 yourname.github.io 或自定义域名访问网站。

3. 自定义域名与备案

  • 在域名服务商购买并备案域名。
  • 域名解析 CNAME 到 yourname.github.io（或通过 GitHub Pages 配置自定义域名）。

4. 静态资源云存储（可选）

  • 七牛云注册账号，开通对象存储服务，新建空间。
  • 将图片等资源上传到七牛云，获取图片外链即可在 Markdown 文章中引用。
  • 七牛云提供每月一定的免费额度，适合个人博客使用。

5. 全文搜索集成（Algolia）

  1. 注册 Algolia 账号，新建应用，获取 Application ID 和 API Key。
  2. 编写 Python 脚本，将 _posts 下的文章解析后上传到 Algolia 索引（参考 upload_to_algolia_by_requrst.py）。 主要步骤如下：
import os
import json
import re
import requests
from dotenv import load_dotenv

# 加载环境变量
load_dotenv()

ALGOLIA_APP_ID = os.getenv("ALGOLIA_APP_ID")
ALGOLIA_API_KEY = os.getenv("ALGOLIA_API_KEY")
ALGOLIA_INDEX_NAME = os.getenv("ALGOLIA_INDEX_NAME")

# ...读取 _posts 目录下所有 markdown 文件，提取内容，拼接为 records...

headers = {
    "X-Algolia-Application-Id": ALGOLIA_APP_ID,
    "X-Algolia-API-Key": ALGOLIA_API_KEY,
    "Content-Type": "application/json"
}
INDEXING_URL = f"https://{ALGOLIA_APP_ID}.algolia.net/1/indexes/{ALGOLIA_INDEX_NAME}/batch"

response = requests.post(INDEXING_URL, json={"requests": [{"action": "addObject", "body": record} for record in records]}, headers=headers)
print(response.json())
  1. 程序详情可参考 upload_to_algolia_by_requrst.py。
  2. 前端可用 Algolia DocSearch 或自定义 JavaScript 进行搜索接入。

6. 工作流小结

  • VSCode/本地编辑文章
  • 使用 Jekyll 编译/本地预览
  • 用 Python 脚本发布/更新搜索索引（推送到 Algolia）
  • 使用 Git 工具推送网站到 GitHub
  • 访问博客或个性化域名浏览内容

参考资源

本方案适合个人学习、技术博客、项目主页的免费建设与搜索集成需求。