Jekyll 本地运行与 Cloudflare Pages 部署指南

2025-09-20-running-jekyll-locally-and-deploying-with-cloudflare-pages

Jekyll 本地运行与 Cloudflare Pages 部署指南 Running Jekyll Locally and Deploying with Cloudflare Pages

📦 1. 创建 GitHub 仓库（基于模板）

打开模板项目：https://github.com/alshedivat/al-folio

点击 Use this template → Create a new repository
命名仓库（如：36525.day），建议使用 yourname.github.io 形式以启用自动 Pages。

💻 2. 克隆仓库到本地（推荐 GitHub Desktop）

操作路径：

GitHub Desktop → File → Clone repository…
或使用命令行：

git clone https://github.com/yourname/yourrepo.git
cd yourrepo

⚙️ 本地开发：Docker + OrbStack + VS Code

🛠 3. 启动本地 Jekyll 服务（Docker Compose）

项目根目录应包含配置好的 docker-compose.yml，如无请添加：

services:
  jekyll:
    image: jekyll/jekyll:latest
    container_name: jekyll
    command: jekyll serve --watch --force_polling --host 0.0.0.0 --port 8080
    ports:
      - "8080:8080"
    volumes:
      - .:/srv/jekyll
    working_dir: /srv/jekyll

启动流程：

docker compose pull      # 拉取最新镜像
docker compose up        # 启动服务

访问地址：http://localhost:8080
支持热更新：保存 Markdown 文件即可自动刷新页面。

🖥️ 4. 用 OrbStack 管理容器（图形化可选）

打开 OrbStack → Containers
你将看到名为 jekyll 的容器，状态为 Running
支持查看 logs / 重启 / 停止 / 卷映射

☁️ 构建线上站点：Cloudflare Pages + GitHub

🚀 5. 部署到 Cloudflare Pages

1. 登录 Cloudflare → Pages → Create Project
2. 绑定 GitHub 仓库（刚自己fork的仓库）
3. 配置构建设置：

Framework preset: None
Build command: bundle exec jekyll build
Build output directory: _site

1. 设置环境变量（Environment Variables）：

BUNDLE_WITH=default

1. 部署完成后，即可访问你站点的自定义域名或 *.pages.dev 地址。