把 Hugo 博客从本地示例站搭成可上线的个人网站

为什么要做这个项目 我想搭一个真正能长期使用的个人博客,而不是只在本地打开一次主题示例页面。 对我来说,一个博客站至少要满足几件事: 能稳定写文章 能把已有项目经历整理上线 后续还能继续改样式、改结构、改部署,而不是每次重头来一遍 所以这次项目真正做的,其实不是“套一个主题”,而是把博客从本地示例一步步整理成一个能持续维护的站点。 站点是怎么搭起来的 我选的是 Hugo + PaperMod 这套组合。 原因比较直接: Hugo 适合写静态博客 Markdown 写文章效率高 部署简单 和 GitHub、Cloudflare 这类工具链很容易接起来 PaperMod 则帮我先解决了: 首页模式 文章页结构 目录(TOC) 标签页 一些基础 SEO 元信息 这样我一开始就不用从零写模板,而是先把内容结构和部署链路跑通。 我做了哪些关键整理 1. 清掉官方示例内容 主题自带的示例页更适合演示功能,不适合直接变成自己的博客。 所以我先做的不是“加功能”,而是: 清理默认示例内容 只保留自己的 posts 结构 创建文章 archetype 把站点导航收成更适合个人博客的样子 这一步很重要,因为它决定了这个站到底是“演示模板”还是“个人项目”。 2. 把已有项目经历转成文章 博客不能只有壳子,没有内容。 所以后面我把自己已有的项目经历逐步整理成文章,例如: dotfiles 仓库整理与同步 Kubernetes 静态网页部署实践 在这个过程中,我也发现一件事: 项目笔记和博客文章其实不是同一种写法。 笔记更偏内部记录 博客更偏对外表达 所以后来我会先把项目整理成笔记,再把它改写成更适合公开阅读的博客版本。 3. 给站点补上独立的 Gallery 照片模块 后面我又做了一件和普通文章不太一样的事:给站点加了一个独立的 Gallery 页面。 我不想把照片简单塞进博客文章里,因为两者的阅读方式完全不同: 文章适合连续阅读 照片更适合按组浏览,再点进去细看 所以这次照片模块采用的是另一套结构: 右上角导航新增 Gallery 页面按日期分组 每个日期组是一张独立卡片 卡片顶部显示日期、出处、作者 组内照片直接用缩略图网格展示 点击单张照片进入独立详情页 单图详情页也不是普通博客正文结构,而是: ...

April 4, 2026 · 1 min · 211 words · 乐豆芽