从零搭建手机端写博客系统：Markdown 编辑 + 一键上传 GitHub + 自动部署

Beginning

这次改造的起点很简单：我想在手机上写完就发，不想每次都回到电脑开终端、改文件、再走一遍 commit 和 push。

一开始我也想过做原生 App，但算了下投入，不划算。对我来说，先把“能稳定发布”跑通更重要。所以最后走的是 Web + PWA 这条路。

最后定下来的做法

核心是四块，拼在一起刚好够用：

1. 在博客项目里加一个写作页（/writer/），专门填 frontmatter 和正文
2. 用 GitHub Contents API 直接把文章写到 src/content/blog/en/...
3. 加 PWA（manifest + service worker），手机可以放到主屏
4. 接 GitHub Pages Actions，push 后自动构建发布

目前我常用这几个地址：

• 写作页：https://panchant.github.io/Panchant-s-Blog/writer/
• 中文写作页：https://panchant.github.io/Panchant-s-Blog/zh/writer/
• 部署状态：https://github.com/Panchant/Panchant-s-Blog/actions

写作页解决的问题

这个页面不是单纯文本框，我把日常要填的东西都放进去了：标题、分类、标签、颜色、正文，还有目标路径预览。点一下上传，就会直接生成或覆盖对应的 Markdown 文件。

另外加了两件很实用的小功能：

• 草稿本地保存，手机切出去回来不怕内容丢
• 颜色预览和颜色表，填 heroColor、themeColor

添加Token

要让网页能写仓库，必须有 Fine-grained PAT。权限我只给最小集：

1. 仓库范围只选 Panchant-s-Blog
2. Contents 设成 Read and write

这样就够上传文章了，不需要给更大的权限。但token 只显示一次，建议当场放进密码管理器。

手机上怎么当 App 用

PWA 这块做完以后，体验已经很接近轻量 App：

• Android 一般会给安装入口
• iPhone 走 Safari 的“添加到主屏幕”

自动部署之后，日常流程很短

现在我的发布动作基本固定成五步：

1. 打开写作页
2. 写内容
3. 点“上传到 GitHub”
4. 等 Actions 跑完
5. 打开线上链接确认

通常 1 到 3 分钟能看到新文章。

我踩过的几个坑

1) non-fast-forward 推送失败

远端分支比本地新。先同步再推：

git pull --rebase origin main
git push origin main

git pull --rebase origin main
git push origin main

2) rebase 卡住了还在 push

这个我自己就踩过。出现 rebase in progress 时，先把 rebase 结束：

git rebase --continue

git rebase --continue

处理完再 push。

3) 手机上看起来“没更新”

大概率是 PWA 缓存。先下拉刷新几次，不行就删掉主屏图标再加回来。

写在最后

这套东西目标就是省时间。现在出门在外也能把一篇笔记写完、传上去、自动发布。对个人博客来说，这已经是一个很舒服的工作流了。