一切要从一个想在手机上发文章的念头说起
如果以 Hugo 为关键词在我博客搜索,会发现有四五篇文章都在讨论同一个话题:如何用手机发博客。
这已经不是我第一次这么干了。每次在等待上班、等待小孩放学、晚上在家时有了写作灵感,都想打开手机来更新一篇博客,但“算了吧,又得打开电脑”,“传上去之后还得再修改,不如明天再说”,就这样放弃了。
用 Hugo 的人都知道,内容本身不是问题——Markdown 在哪儿都能写。问题是图片怎么处理、写完怎么发布。
为什么是 Hugo
Hugo 官方给自己的定义是"The world’s fastest static site generator"(全世界最快的静态网站构建框架)。这不是宣传语,是实打实的用户体验。本博客现在 400 多篇文章,2000 多图片,每次本地构建只需要一二十秒切完。对比其他静态网站生成器,这个速度是断层领先的。
更重要的是,Hugo 稳定的构建速度和简洁的文件组织方式,让我没有任何动力去切换到其他平台。
图文一体的执念
作为从 WordPress 时代一路走过来的老 IT 人,对“图文分离”这件事有很深的心理阴影。
早年的 WordPress 根本没有内置图片库,大家写文章要用图片,只能自己找图床外链。我当年用过微博、Flickr,Photobucket、人人网……后来这些服务一个个倒闭或者不给外链,文章里的图片链接全变成了红叉叉,想找回来?门都没有。
所以后来转向 Hugo,我最欣赏的就是它的 bundle 模式:一篇文章一个文件夹,Markdown 文件和图片放在同一个目录里。发布时整个文件夹搬走,图片永远和文章在一起,不会丢,不会乱。
这是我认为最理想的图文管理方式。没有之一。
图文一体的痛点
当然,我知道把图片放在文章目录里,GitHub 仓库体积就会涨。
手机端这个问题尤其突出——现在一张手机照片随随便便就是 10MB,你要在手机上用 GitHub App 发布文章,光是传图片就能把仓库撑爆。
2024 年优化博客时,我下决心做了一件事:把所有图片转成 WebP 格式。现在我的博客大概有 2000 张配图,400 多篇文章,整个仓库才 100 来 MB。对大多数个人用户来说,这种方案是完全实用的——既保留了图文一体的便利,又不会有仓库爆炸的问题。
这些年我试过但不好用的办法
回到手机端发布的问题。既然 Hugo 这么好,那在手机上写完文章发布,有现成方案吗?
GitHub 官方 App
最直接的思路。结果呢?App 主要是给代码协作用的,写 Markdown 的体验停留在“能凑合用”级别。更难受的是配图——手机拍的照片动则 10MB,直接传仓库根本不现实。你得先压缩、再上传、再把链接粘到文章里。这一套流程下来,比在电脑上操作还麻烦。
GitHub Issue 工作流
我之前还专门研究过一种方案:用 GitHub Issue 当作发布入口,通过 Actions 自动把 Issue 转成 Hugo 文章。具体实现我写过一篇文章 通过 Github issue 发布静态博客 ,有兴趣的可以去看看。
那次我已经感觉自己走到了“手机发Hugo”的终点,使用 Github Actions 自动抓取 issue 内容,然后通过自定义的标签格式抓取为 Frontmatter 信息。但实际用下来,就是感觉“不够正式”,需要自己记住 workflow 中的各种设定,实际上用的也少,自那次之后我自己也只用过两次。
Headless CMS
我先后试过 Netlify CMS、Pages CMS 等方案。体验确实比 GitHub 网页版好,有编辑器、有图片管理。
但它们都有一个根本问题:图文分离。这些 CMS 的设计逻辑是把“文章”和“图片”分开管理——文章存在一个库,图片存在另一个资产库,最后通过 URL 关联。
即便勉强配置成功,也有使用问题。比如,编辑器里图片无法显示。
这和 Hugo 的 bundle 模式天然冲突。你在 CMS 里发文章,图片传到远端图库,Hugo 渲染时路径全乱套。不是 CMS 不好,是它们和 Hugo 的设计哲学不兼容。
临时方案
我之前还用过多个临时方案,比如 CodeServer 这种浏览器上的 VsCode ,比如 StackEdit 这种在线编辑器。事实上这次我就是想将 StackEdit fork 修改一下,适配 Hugo 默认上传路径。只是在修改过程中发现这个项目太老了很多依赖项比较过时,而且这个项目本身非常庞大,改起来效益比较低,不如重新做一个了。
于是 Pocket Hugo 诞生了!
Pocket Hugo 解决了什么
- 浏览器优先,打开就能用
不需要下载 App,不需要配置复杂环境。手机、平板、台式机,打开浏览器登录 GitHub 就能写。
- 尊重 Hugo 的 bundle 模式
支持三种内容结构:
• Flat Markdown:传统单文件
• Single-language Bundle:一篇文章一个文件夹,index.md + 同目录图片
• Multilingual Bundle:多语言版本
保持 Hugo 原有的目录结构,不需要为了迁就工具而改变写作习惯。
- 图片发布前自动压缩
手机拍照直接上传,系统自动压缩、转换为 WebP,不需要手动处理图片。这样既保留了图文一体的便利,又不会把仓库撑爆。
- 草稿保存在浏览器
写了一半没写完?下次打开继续。不会因为中途打断而丢失内容。
- 零服务端存储
所有数据都在浏览器里。服务端不存 Token,不存文章,没有任何用户数据。用完即走,不留痕迹。
线上版本直接能用:
• 入口:https://leftn.com
• 指南:https://leftn.com/guide
自己部署也很简单,Vercel 或 Cloudflare Workers 都有文档。
项目开源地址:https://github.com/h2dcc/pocket-hugo
如果你也在为 Hugo 手机端发布发愁,欢迎来试试。有什么问题欢迎提 Issue,也欢迎点个 Star。
