想搭建一个高颜值、可持续、可本地预览又能自动上线的博客系统？这篇教程带你用一套现代工作流构建完整体系，整合：

  • Jekyll + al-folio：静态博客与学术写作最佳方案
  • GitHub Pages / Cloudflare Pages：两种自动部署方式
  • OrbStack：macOS 下轻量本地容器平台
  • VS Code：Markdown 与 YAML 编辑利器

1. 创建博客仓库

  1. 打开模板项目：
    al-folio GitHub 仓库：https://github.com/alshedivat/al-folio。

  2. 点击 Use this template → Create a new repository
    命名为 yourname.github.io（或任意项目名）

  3. 启用 Actions 权限：
    Settings → Actions → General → 勾选 Read and write permissions

  4. 修改 _config.yml：

    url: "https://yourname.github.io"
baseurl: ""

  5. 如果选择 GitHub Pages 部署：

    • Settings → Pages
    • Source: Deploy from a branch
    • Branch: gh-pages
    • Folder: / (root)
    • 稍等几分钟即可访问 https://yourname.github.io

2. 安装 OrbStack

OrbStack 是一款专为 macOS 优化的容器与虚拟化工具，集成了 Docker 引擎，比传统 Docker Desktop 更轻、更快、更节能。它可以直接运行 Jekyll 容器，无需额外配置复杂的虚拟机或依赖。官网：https://orbstack.dev。

3. 安装 VS Code

VS Code 是撰写与预览 Markdown、编辑 _config.yml 的理想工具。官网：https://code.visualstudio.com/。

4. 本地开发环境搭建和测试

1. 克隆仓库

使用 GitHub Desktop：

  • 打开 GitHub Desktop → File → Clone repository…
  • 选择仓库（如 yourname.github.io）
  • 保存路径：~/Projects/GitHub/yourname.github.io

2. 启动 OrbStack 容器服务

docker compose pull
docker compose up

浏览器访问：http://localhost:8080。

3. 本地环境测试

在 VS Code 中打开 _posts 目录，新建一个 Markdown 文件并保存；OrbStack 启动的 Jekyll 容器会在数秒内检测到更改，浏览器中 http://localhost:8080 页面将自动刷新。这意味着本地编辑与实时预览环境已完全联通。

5. 在线部署方案

1. GitHub Pages

适合快速、免配置部署。

仓库名为 yourname.github.io 时自动启用。可自定义域。

2. Cloudflare Pages

适合希望自定义域名或访问加速的用户。

  1. 登录 Cloudflare Pages，https://dash.cloudflare.com/。
  2. Create Project → 绑定 GitHub 仓库
  3. 构建配置：
Build command: bundle exec jekyll build
Build output directory: _site

部署完成后，即可通过自定义域名或 *.pages.dev 访问站点。