我的 Ghost 博客搭建实战

一个普通人的 Ghost 独立博客搭建心路历程与技术实践分享。

序章：平台的抉择

"The best time to start a blog was 10 years ago. The second best time is now."

— Adapted from a Chinese Proverb

💡 核心需求与平台筛选

在开始这段旅程之前，我几乎试遍了所有主流博客平台，最终确立了四个核心需求：

✨ 为什么选择 Ghost？

Ghost 完美契合了上述所有核心需求，尤其以下特性是决定性因素：

• 1. 写作体验至上（C1）： 所见即所得 Markdown 编辑器，支持实时预览、快捷键、专注模式。
• 2. 原生商业模式（C2）： 内置 Newsletter 和付费订阅支持（Stripe 集成）。
• 3. Fediverse 集成 (ActivityPub)： 真正面向未来的去中心化社交网络连接。
• 4. 隐私保护分析： 内置无 Cookie 分析系统，完全掌控数据隐私。

第一章：环境搭建

🛠️ 技术栈概览

我选择了现代、隔离、易于管理的部署方案：

📦 Docker 的优势

Ghost 7.0 已将 Docker 作为默认安装方式。相比 Ghost-CLI，容器化提供了本质上的优势：

• ✅ 环境隔离： 服务独立运行，互不干扰。
• ✅ 易于移植： 一次配置，到处运行。
• ✅ 版本控制： 轻松回滚到任意历史版本。

🚀 部署流程摘要

1. 安装 1Panel。
2. 通过 1Panel 应用商店安装 Ghost。
3. 编辑 Docker Compose（第二章详述）。
4. 配置 OpenResty 反向代理到自定义域名。

第二章：邮件配置地狱

⚠️ 关键挑战警告： 这是整个搭建过程中最耗时的环节。

😱 Magic Link的困境

首次登录 Ghost 后台需要通过 Magic Link（魔法链接） 邮件验证。如果邮件服务未配置，则无法登录。

问题诊断： Failed to send email. Please check your site configuration and try again.

💔 官方推荐：Mailgun 的复杂流程

Mailgun 虽然是官方推荐，但其流程对国内用户极为不友好：

• 注册需要验证码和短信验证（常失败）。
• 需经历域名验证、DNS 配置。
• 强制绑定信用卡，并需要在不同计划间切换（Foundation Trial $\to$ Flex Plan）。

✅ 救赎：Lark 企业邮箱（飞书）方案

放弃 Mailgun，我转而使用 Lark 企业邮箱的 SMTP 服务，步骤清晰且成功率高。

💻 Docker Compose 配置段

在 1Panel 中编辑 Ghost 容器的 docker-compose.yml，修改 environment 部分：

YAML

      # ============ 飞书邮箱配置 ============
      mail__transport: SMTP
      mail__options__host: smtp.larksuite.com
      mail__options__port: 465
      mail__options__secure: true
      mail__options__auth__user: [email protected]
      mail__options__auth__pass: your-lark-app-password # 注意：使用飞书专用密码
      mail__from: [email protected]
      # =====================================

🚀 部署步骤

1. 保存并重启容器：docker restart 1Panel-ghost-DpmE
2. 访问 /ghost，测试 Magic Link 邮件。

🎉 成功反馈： 邮件发送成功！两天的折腾终于有了结果。

第三章：Docker 的顿悟

🐳 容器化与数据持久化

理解 Docker 的核心在于文件系统映射，即数据卷（Bind Mount）：

顿悟时刻： Docker 就像一个高度隔离的运行沙箱，数据卷是它与宿主机进行数据交换的安全通道。

⚙️ 常用运维命令

第四章：汉化与定制

🌏 中文支持现状

🎨 前台汉化策略（代码注入）

通过 Ghost 后台的 Code Injection，注入一段 JavaScript 脚本，在页面加载时替换特定英文文本。

优势： 不修改主题文件，不影响 Ghost 升级，可随时调整翻译。

📝 JS 翻译代码片段

HTML

<script>
document.addEventListener('DOMContentLoaded', function() {
  const translations = {
    'Home': '首页',
    'Subscribe': '订阅',
    'Read more': '阅读更多',
    // ... 核心翻译字典
  };
  
  // 核心：遍历 DOM 元素，使用 translations 字典替换文本内容
  function translateNode(node) { /* ... 递归逻辑 ... */ }
  translateNode(document.body);
  
  // 关键：使用 MutationObserver 监听动态加载的内容，进行二次翻译
  // ...
});
</script>

🧭 多级导航（进行中）

思路： 利用 JS 动态解析导航项中的特殊前缀（如 - ），将其转换成 CSS 下拉菜单结构。这是在不修改主题文件前提下，实现复杂导航的最佳实践。

第五章：性能优化

⚡ CDN 加速策略

针对 Ghost 默认从 cdn.jsdelivr.net 加载资源导致国内速度慢的问题，采取以下优化：

• 不推荐： 修改容器内配置文件，可能会被更新覆盖。
• 推荐： 自托管资源，将关键 JS/CSS 文件下载后，上传到数据卷映射的 /public 目录，并修改 Docker 环境变量指向本地路径。

🖼️ Gravatar 国内镜像替换

将无法访问的 Gravatar 官方源替换为国内镜像 cravatar.cn：

YAML

environment:
  # ... 其他配置
  gravatar__url: "https://cravatar.cn/avatar/{hash}?s={size}&r={rating}&d={_default}"

第六章：苹果风格美化革命

"Design is how it works."

— Steve Jobs

美化的目标是实现 Apple.com 的简洁优雅和 iOS/macOS 的精致细腻。

🍎 核心设计原则

1. 毛玻璃效果： backdrop-filter: saturate(180%) blur(20px);
2. 精致阴影： 柔和、多层的 box-shadow。
3. 流畅动画： 0.2-0.3s，使用 cubic-bezier(0.4, 0, 0.2, 1) 曲线。
4. 克制圆角： 统一使用 8px / 12px / 16px 尺寸。

🔨 第一步：代码块的 Mac 化

• 效果： 为代码块添加 Mac 窗口风格顶栏（红黄绿按钮）和语言标题。
• 实现： JavaScript 动态插入顶栏，CSS 绘制样式。
• 关键功能： 添加 Copy 按钮，提升用户体验。

📑 第二步：文章目录的重生

• 灵感： iOS **“设置”**应用中的卡片设计。
• 视觉： 应用毛玻璃背景、圆角卡片、双层阴影。
• 交互： 目录项前添加圆点指示器，悬停和点击时使用 transform: scale() 带来微小的反馈动画。

🌓 第四步：暗色模式适配

Apple 的暗色模式是深灰（#1c1c1e），而非纯黑。

• 利用 @media (prefers-color-scheme: dark) 实现系统级跟随。
• 调整暗色模式下的背景色、文本色、以及链接的品牌蓝（应更亮）。

🚀 性能优化对比

优化手段： 合并 CSS 选择器、减少 DOM 操作、使用 CSS 动画、延迟加载。

🔧 完整代码包

我将所有代码整理为一个独立项目：GitHub - Ghost-Apple-Style

• 安装： 复制代码 $\to$ Code Injection $\to$ Site Footer 粘贴。
• 特点： 零依赖，兼容所有主题，自动跟随系统暗色模式。

尾声：展望未来

🎯 状态总览

💭 这段旅程教会我的事

• 独立自主： 核心价值在于掌控权。
• 细节至上： 4px 的圆角，0.3s 的动画，决定了用户体验的质感。
• 坚持的力量： 从邮件配置的崩溃到美化完成的成就感。

🚀 接下来要做什么？

• 短期： 完善多级导航、集成评论系统（Cusdis）、配置自动备份、SEO 优化。
• 中期： 发布 50+ 篇高质量文章，定制专属主题，接入 Fediverse 网络。
• 长期： 持续运营 10 年以上，建立个人数字遗产。

🌐 独立博客的重要性

这不只是一个博客。这是你在这个去中心化网络世界中的数字遗产。

🎁 写给正在折腾 Ghost 的你

别放弃。

Ghost 不是最简单的平台，但它是最尊重创作者的平台。

当你收到第一封 Magic Link，当你收获第一个读者——那种成就感，会让你觉得一切都值得。

🔗 相关资源

设计参考：

• Apple Human Interface Guidelines
• iOS Design Themes
• SF Symbols

技术文档：

• backdrop-filter - MDN
• Clipboard API - MDN
• prefers-color-scheme - MDN

项目地址：

• GitHub - Ghost-Apple-Style
• 我的博客