---
title: "我的静态博客动态化方案"
date: 2025-09-03
draft: false
tags: ["Hugo", "动态化", "后台"]
categories: ["技术"]
markup: "html"
---

<h2 id=碎碎念>碎碎念</h2><p>前段时间，DeepSeek官方宣布发布了V4版本。在当下AI浪潮如火如荼的背景下，这倒也不算意外。我一直在用的Vibe coding方案是火山引擎的coding plan，主要因为用习惯了，所以一直续费着。但说实话，豆包的编码能力确实一般，一个需求往往要反复调整好几遍，有时候真的恨铁不成钢。</p><h2 id=友链>友链</h2><p>前几天五一假期，我逛了逛博友的网站，发现不少人的站点已经打不开了。为了避免跳转到黄色链接，我在这里做了隐藏处理，如果站点恢复，请在留言区告知即可。</p><h2 id=发现>发现</h2><p>前几天在浏览博友博客时，我发现了几个很有意思的文章，核心思路都是用静态博客实现一个后台，主要分为以下三个方案：</p><p>小十的博客
<a class=link-card href="https://www.xiaoten.com/posts/2026/03/ai-build-hugo-cms" target=_blank rel=noopener><img class=link-card-icon src="/image/posts/favicon" alt loading=lazy onerror='this.src="/image/posts/tx7.jpg",this.onerror=null'>
<span class=link-card-body><span class=link-card-title>www.xiaoten.com</span>
<span class=link-card-url>https://www.xiaoten.com/posts/2026/03/ai-build-hugo-cms</span>
</span><span class=link-card-arrow>↗</span>
</a>——用AI为Hugo打造了博客文章发布平台；</p><p>东风博主的博客
<a class=link-card href="https://easte.cc/posts/feishu-sync-bot-deploy" target=_blank rel=noopener><img class=link-card-icon src="/image/posts/favicon" alt loading=lazy onerror='this.src="/image/posts/tx7.jpg",this.onerror=null'>
<span class=link-card-body><span class=link-card-title>easte.cc</span>
<span class=link-card-url>https://easte.cc/posts/feishu-sync-bot-deploy</span>
</span><span class=link-card-arrow>↗</span>
</a>——飞书同步机器人，利用飞书提供的接口，将飞书文档同步到博客中，这个想法非常有趣；</p><p>小饿博主的博客
<a class=link-card href="https://dongjunke.cn/posts/2026/05/05/50369.html" target=_blank rel=noopener><img class=link-card-icon src="/image/posts/favicon" alt loading=lazy onerror='this.src="/image/posts/tx7.jpg",this.onerror=null'>
<span class=link-card-body><span class=link-card-title>dongjunke.cn</span>
<span class=link-card-url>https://dongjunke.cn/posts/2026/05/05/50369.html</span>
</span><span class=link-card-arrow>↗</span>
</a>——我的独立博客，终于拥有了一个像样的后台。</p><p>经朋友推荐，我尝试使用了DeepSeek V4 Pro。DeepSeek的收费模式跟其他家有点不一样，主要是通过充值余额，直接消耗余额来使用，没有其他家所谓的coding plan。对于我这种使用频率较低的用户来说，还是很不错的。</p><p>我首先尝试了东风博主的思路，对接飞书，期间遇到了几个极其纠缠的问题，始终没能解决，只好放弃。接着试了小十的思路，通过接入GitHub API实现在线编辑博客，于是就有了我后台在线编辑器的第一版。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image.png alt=第一版后台管理系统 class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>DeepSeek V4 Pro的表现还算不错，我提出的需求，基本一次两次就能实现我想要的效果。</p><p>但很快我又遇到一个新问题：这个方法非常依赖GitHub的API，频繁请求时会出现拒绝请求的情况。我暂时没有一个好的方法解决，我尝试通过edgeone的kv存储，缓存一些数据，从而减轻GitHub API的访问压力，但是我发现我大部分的时间都消耗在跟第三方平台进行对接上了。</p><p>其次就是GitHub在国内的访问速度一般，电信网络如果不接入代理，基本很难顺利访问，只有在代理环境下才能有较好的体验。</p><p>GitHub的API其中也有几个坑，不断搜资料也没找到我满意的解决方法。</p><p>一度冲动，甚至想直接切换到Typecho或WordPress。</p><p>不得不说动态博客真的舒服，可以省了好多事。</p><p>后面转变思路，于是，我开始尝试小饿博主的方案——通过Next.js实现一个本地写作平台。</p><p>这样就能从根源上减轻GitHub API的依赖了。</p><h2 id=技术选型>技术选型</h2><p>关于技术选型，我保持跟小饿博主一致，框架选了Next.js 16，样式用Tailwind CSS 4。</p><p>配色参考了森同学的主题配色，暖白纸色背景，深蓝文字，整体偏书卷气，看着不累。</p><p>森同学博客：https://oxxx.cn</p><p>数据存储方面，坚持serverless原则，我坚持不用数据库。</p><p>直接读写Hugo的Markdown文件，跟Hugo本身的哲学一致：简单、直接、可控。</p><p>整个项目放在博客根目录下的<code>/write</code>文件夹里，跟Hugo本身井水不犯河水。</p><p>端口映射到8016，就本地，也不打算映射到公网，不然又要去折腾那该死的GitHub API了。</p><h2 id=文章管理>文章管理</h2><p>这是最核心的模块。打开后台首页，所有文章以卡片列表展示，标题、日期、分类、发布状态一目了然。支持搜索和分页，每页20条。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-1.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>点击标题直接进编辑页，不用到处找编辑按钮。hover会浮出预览、编辑、删除三个操作。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-2.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>预览会自动启动Hugo dev server（如果没自己手动执行的话），在新标签页打开<code>localhost:1313</code>，也可以点击右上角的眼睛。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-3.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>删除不会真删，进了回收站，保留30天，误删了还能捞回来。</p><p>这个主要是参考了小饿博主的idea。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-4.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><h2 id=撰写体验>撰写体验</h2><p>新建文章时，Slug自动生成<code>YYYYMMDDHHmm</code>格式的数字时间戳，跟我之前文章的命名风格保持一致。</p><p>文件夹名则是<code>日期-中文标题</code>，比如<code>2026-05-20-我的静态博客动态化方案</code>，找起来方便。</p><p>编辑器右侧挂了两个面板：上面是快捷插入（H2、H3、代码块、引用、图片等），下面是AI助手。</p><p>AI浪潮怎能不加点AI元素，选中文字可以润色、扩写、缩写、纠错；填了标题能自动生成摘要和标签。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-5.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>AI接的是DeepSeek的API，OpenAI兼容格式，也可以切Anthropic格式。</p><p>图片上传到文章同级文件夹里，跟<code>index.md</code>放在一起，Markdown直接引用文件名就行。</p><p>不像以前要手动拖文件、改路径。</p><p>发布流程分了三个按钮：草稿（<code>draft:true</code>，前台不可见）、保存（<code>draft:false</code>，存本地）、发布（保存+自动执行<code>git add -A && git commit && git push</code>）。</p><p>不用再切终端敲命令了，真正解放双手。</p><p>还有个贴心的小功能：每5秒自动缓存到浏览器localStorage。</p><p>万一电脑崩了或者不小心关了标签页，重新打开会自动恢复，不会丢稿。</p><h2 id=评论管理>评论管理</h2><p>我的博客用的是Artalk评论系统。后台对接了Artalk的API v2，管理员登录一次后token和凭据缓存在本地，下次自动登录。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-6.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>界面是左右分栏：左边文章列表，按MD文件日期倒序排列，最新的在最上面。</p><p>点开一篇文章，右侧按需加载评论，不会像第一版那样全量拉取6000条导致卡死。</p><p>支持在线回复、隐藏、删除评论。</p><p>回复时会显示被回复者的昵称和内容摘要，知道上下文。</p><h2 id=订阅源和友链>订阅源和友链</h2><p>这两个模块，我都一定程度实现了动态化，都对接了我自己搭建的API。</p><p>订阅源管理可以增删RSS源，支持批量检测存活状态。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-7.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>友链管理更完整一些：增删改查、隐藏/显示切换、单条或批量存活检测。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-8.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>检测走的是腾讯云SCF代理，因为有些博客在境外，直连可能不通。</p><p>友链列表里每个站点前面有个WiFi图标，绿色表示在线，红色表示失联。</p><p>这样我能及时发现哪些博友的网站打不开了，该隐藏就隐藏，保持友链页面的健康度。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-9.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><h2 id=微信公众号同步>微信公众号同步</h2><p>最近我也开始尝试写公众号。我在自己的接口站新增了微信公众号素材接口，可以把文章同步到公众号草稿箱。</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-10.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><p>流程很简单：后台里选一篇文章，填个封面图URL，点「同步到微信草稿」就行了。</p><p>Markdown会自动转成微信兼容的HTML——标题有深蓝底边线、代码块是Dracula深色主题、引用有蓝色左边框、底部有个居中的「—END—」收尾。</p><p>在公众号后台的草稿箱里预览一下就能直接群发，不用再排版一遍，这样可以保证博客和公众号的同步更新。</p><h2 id=图片管理>图片管理</h2><p>单独做了一个图片管理页面，把所有文章文件夹里的图片扫出来，网格预览，能看到每张图的文件大小和所属目录。</p><p>一键复制Markdown引用地址，多余的图片可以直接删。</p><p>以前图片散落在几十个文件夹里，根本不知道哪些在用哪些没用了。现在一目了然。</p><p>同时也可以当做一个回忆相册，哈哈，不是吗？</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-11.webp alt class="lazyload lazy-loaded" loading=lazy decoding=async width=2560 height=1347></span></p><h2 id=开源提示词>开源提示词</h2><p>因为本系统是基于自己的主题深度定制的，不适合开源给大家。</p><p>这里把Vibe coding的技术选型开源出来，方便大家自己Vibe coding自己的后台系统。</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-txt data-lang=txt><span class=line><span class=cl># 写作后台
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>Hugo 博客的本地管理后台，Next.js 16 + Tailwind CSS 4，运行在 `localhost:8016`。
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>## 核心模块
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 1. 文章管理 `/`
</span></span><span class=line><span class=cl>- 读取 Hugo `content/post/` 下的 Markdown 文件，列表展示、搜索、分页
</span></span><span class=line><span class=cl>- 点击标题进入编辑，hover 显示预览、编辑、删除按钮
</span></span><span class=line><span class=cl>- 预览自动启动 `hugo serve`（kill 端口冲突后重启）
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 2. 撰写/编辑 `/edit`
</span></span><span class=line><span class=cl>- 新建文章自动生成 `YYYYMMDDHHmm` 格式 slug，文件夹命名 `YYYY-MM-DD-slug`
</span></span><span class=line><span class=cl>- 文章元信息编辑（标题、日期、分类、标签、作者、AI 评论）
</span></span><span class=line><span class=cl>- Markdown 正文编辑，支持插入图片（上传到文章同级文件夹）
</span></span><span class=line><span class=cl>- 三个发布状态：
</span></span><span class=line><span class=cl>  - **草稿** — `draft: true`，前台不可见
</span></span><span class=line><span class=cl>  - **保存** — `draft: false`，存本地不推送
</span></span><span class=line><span class=cl>  - **发布** — 保存 + `git add -A &amp;&amp; git commit &amp;&amp; git push`
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 3. 评论管理 `/comments`
</span></span><span class=line><span class=cl>- Artalk 管理员登录（邮箱+密码），token 缓存 localStorage
</span></span><span class=line><span class=cl>- 文章列表按 MD 文件日期倒序，默认选中最新文章，按需加载评论
</span></span><span class=line><span class=cl>- 支持在线回复、隐藏/显示、删除评论
</span></span><span class=line><span class=cl>- 回复评论时显示父级评论引用
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 4. 订阅源管理 `/feeds`
</span></span><span class=line><span class=cl>- 对接 api，token 存储在 `.env` 服务端
</span></span><span class=line><span class=cl>- 增删 RSS 订阅源，批量检测存活状态
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 5. 友链管理 `/links`
</span></span><span class=line><span class=cl>- 对接 api，token 存储在 `.env` 服务端
</span></span><span class=line><span class=cl>- 增删改友链，支持隐藏/显示切换
</span></span><span class=line><span class=cl>- 单个/批量存活检测，失联标记
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 6. 回收站 `/recycle`
</span></span><span class=line><span class=cl>- 软删除文章移至 `.recycle/`，保留 30 天
</span></span><span class=line><span class=cl>- 支持恢复和永久删除
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>## API 路由
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>| 路径 | 方法 | 说明 |
</span></span><span class=line><span class=cl>|------|------|------|
</span></span><span class=line><span class=cl>| `/api/posts` | GET/POST | 文章列表、新建 |
</span></span><span class=line><span class=cl>| `/api/posts/[slug]` | GET/PUT/DELETE | 单篇文章 CRUD |
</span></span><span class=line><span class=cl>| `/api/comments` | GET/POST | 评论列表、回复 |
</span></span><span class=line><span class=cl>| `/api/comments/[id]` | PUT/DELETE | 评论操作 |
</span></span><span class=line><span class=cl>| `/api/comments/login` | POST | Artalk 登录 |
</span></span><span class=line><span class=cl>| `/api/rss/feeds` | GET/POST/DELETE | 订阅源管理 |
</span></span><span class=line><span class=cl>| `/api/rss/links` | GET/POST/PUT/DELETE | 友链管理 |
</span></span><span class=line><span class=cl>| `/api/recycle` | GET/POST/DELETE | 回收站 |
</span></span><span class=line><span class=cl>| `/api/upload` | POST | 图片上传 |
</span></span><span class=line><span class=cl>| `/api/deploy` | POST | Git 部署 |
</span></span><span class=line><span class=cl>| `/api/hugo` | GET | Hugo 启动/检测 |
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>## 技术栈
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>- **框架**: Next.js 16 (App Router, Turbopack)
</span></span><span class=line><span class=cl>- **样式**: Tailwind CSS 4，SEN 主题暖色系
</span></span><span class=line><span class=cl>- **数据**: 直接读写 Hugo Markdown 文件（gray-matter），无数据库
</span></span><span class=line><span class=cl>- **评论**: Artalk API v2
</span></span><span class=line><span class=cl>- **RSS/友链**: 自建 API + SCF 代理
</span></span><span class=line><span class=cl>- **部署**: 执行 shell git push
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>## 提示词指南
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 新增页面/模块
</span></span><span class=line><span class=cl>&gt; &#34;在写作后台新增一个 XXX 模块，左侧侧边栏加入口，页面风格与现有文章管理一致&#34;
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 修改现有功能
</span></span><span class=line><span class=cl>&gt; &#34;优化文章管理页面的 XXX 功能，保持 SEN 配色和卡片式布局&#34;  
</span></span><span class=line><span class=cl>&gt; &#34;修复评论管理页面的 XXX bug，不要改动其他功能&#34;
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 样式调整
</span></span><span class=line><span class=cl>&gt; &#34;把 XXX 页面的色调整体改为 SEN 暖色系（bg: #fcfaf5, text: #223d66, accent: #1d3d6c, line: #e4dfd2）&#34;
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### API 对接
</span></span><span class=line><span class=cl>&gt; &#34;对接 api.usj.cc 的 XXX 接口，token 在 .env 的 RSS_API_TOKEN，后端代理不要暴露到前端&#34;
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>### 常见问题描述
</span></span><span class=line><span class=cl>- &#34;布局太窄了&#34; → 去掉 max-w 限制
</span></span><span class=line><span class=cl>- &#34;左右比例不对&#34; → sidebar w-1/4，main flex-1
</span></span><span class=line><span class=cl>- &#34;最新数据没排前面&#34; → sort by date desc
</span></span><span class=line><span class=cl>- &#34;不知道点哪里&#34; → 标题做成可点击，加明显按钮
</span></span></code></pre></div><p>希望来访的朋友，可以关注一下我的公众号，感谢！</p><p><span class="sen-image-frame sen-media-host"><img src=/image/posts/image-13.png alt class="lazyload lazy-loaded" loading=lazy decoding=async width=446 height=163></span></p>
