如果你也在做那种连续28天的自我挑战大概会懂这种感觉DAY1满脑子都是火花DAY2觉得还挺简单DAY3开始怀疑自己DAY4发现前面的代码要返工。Tibo的28天计划走到今天正好卡在第四天我给自己定的任务是把前三天搭出来的个人网站从能打开变成能看、能持续更新。这个系列不是讲高深的前端框架而是记录一个零基础的人如何用28天一步步把个人网站盖起来、把内容发布链路跑通、让搜索引擎能收录。DAY4这篇最适合两种人看一种是已经在DAY1到DAY3跟着搭了站点但卡在主题和内容组织上的人另一种是折腾过静态网站生成器结果换主题后样式崩掉、不知道从哪查起的人。1. DAY4 从能打开到能看——先把前三天的烂摊子收好早上打开本地预览我发现站点还处于一种半成品中的半成品状态首页标题是模板自带的默认文字点进昨天写的测试文章侧边栏错位图片也没加载出来。更麻烦的是昨晚我一时手痒在本地尝试切换主题结果所有卡片都变成了通栏宽度直接冲出容器。这一刻我突然意识到DAY4真正要处理的不是增加新东西而是先把前三天欠下的结构性整理补上。1.1 我的28天计划到底在折腾什么这个计划的最初动机其实很朴素。我一直想把每周学到的东西沉淀下来但内容总是散落在备忘录、收藏夹和各种聊天记录里真要回头找的时候反而找不到。后来我看到了数字花园这个概念意思是网站不一定要追求博客那样完整长篇的文章短小的、持续更新的笔记反而更有生命力。于是我在第一天把计划范围定为用一个静态网站生成器搭建个人网站每天记录一段可复现的实践过程28天后回看整条成长轨迹。DAY1我确定了站点定位和域名DAY2搭好本地开发环境DAY3写完第一篇测试文章并成功在浏览器里看到了页面。这三天的进度其实并不快但足够让我摸清楚整个工作流的关键节点。今天DAY4的目标是集中处理内容结构、页面主题和发布链路让这个站点不再像是一个临时演示页而是开始具备一个真正的内容站点该有的骨架。1.2 第三天结束时的现场首页能出一换主题就崩昨天结束时的状态是首页能打开文章能访问但细节经不起推敲。问题集中在两处一是首页标题和副标题还是模板默认内容我改了配置文件里的站点名称但模板页面里有一处硬编码没有跟着变二是改了一个主题选项后卡片布局整体逃逸看起来就像所有内容块被强行拉宽。为了定位这个问题我没有急着去翻CSS文件而是先用浏览器开发者工具检查了实际渲染出来的HTML结构后面前面的踩坑部分我会详细展开。这里先说结论很多样式崩了的问题根子往往不在样式文件里而在内容结构或模板变量用错了位置。DAY4早上的现场让我做了一个决定今天不管好看不好看先把内容结构和发布流程定下来。外观可以等结构稳定后再打磨但结构不稳定就反复调样式只会让返工次数越来越多。1.3 按内容、样式、链路三个顺序排今天的工作今天的工作顺序我排在第一位的是内容结构第二位是页面主题第三位是发布链路。为什么会是这个顺序因为内容结构一旦定下来导航放什么、侧边栏放什么、文章页面需要展示哪些信息就都有了依据而样式调得再好看如果没有固定的链接规则和SEO配置以后每次发布新文章都得重复劳动那才是真正拖垮更新频率的事。所以我给DAY4拆成了三块任务第一定义站点的分类、标签和写作目录结构第二基于这个结构定制主题的导航、侧边栏和暗色模式第三把本地到线上的发布流程压缩成一条命令并配置基础的搜索引擎可见性。今天这篇博文就是按这三块任务往下走的你会发现它不是一上来就动手改代码而是先做一些看起来像规划的事。别小看这一步省掉它会让你在后续更新时不断怀疑人生。2. 内容地图怎么定——比页面外观更值得花时间的事很多个人网站教程都把第一步放在选个好看的主题上但我今天最大的感受是主题好不好看是审美问题内容放哪儿才是结构问题。一个站点之所以让人看了想关掉往往不是配色难看而是进来之后不知道这个站在说什么、该看什么、有没有持续更新的痕迹。内容地图就是解决这三件事的。2.1 用三句话描述这个网站是给谁看的我花了一个小时只做了一件事用三句话描述这个网站是给谁看的。我写的是给想知道工具怎么提升效率的人看记录每月读过的书单和实操过的方法每篇文章都尽量给出可复现的步骤而不是只讲观点。这三句话分别回答了读者是谁、内容是什么、内容的形式是什么。写完之后我发现后续很多决策都变简单了首页标语可以直接从这三句话里提炼侧边栏该放哪些模块也有依据甚至文章里应该出现什么级别的术语都有了标准。如果你说不上来这个网站给谁看结果往往就是内容大杂烩今天写美食明天写科技后天写心情看起来热闹但没有一个读者会觉得这个站是专门为我更新的。2.2 分类、标签与系列页我的三层结构内容结构上我用的是分类、标签、系列页三层结构。分类是站的骨架数量一定要少我在DAY4只留了五个工具笔记、方法复盘、月度阅读、计划日志、杂记。标签则是对内容的属性标注可以多一些比如某个具体工具名、某种方法名方便未来按主题检索。系列页则是一个临时的聚合入口例如现在这个28天计划就会单独做成一页把每一天的更新串起来。分类少有一个很直接的好处维护成本低。如果建了二十个分类每次写文章都要纠结放哪个写多了还会出现两个分类内容高度重叠的情况。我的经验是分类承担的是读者想逛这个站时从哪里进标签承担的才是我想找某个主题时怎么筛。导航栏里永远只放分类标签在文章底部和归档页出现就够了。2.3 给临时收件箱预留一个目录写作中最怕的不是写不好而是想法来了没地方放。我给站点单独加了一个临时收件箱目录专门放那些还没成型的内容。灵感出现时先记下来不判断好坏、不整理分类只负责保存。每周固定清一次清的时候只问一个问题这句话对一周后的我还有用吗有就继续加工没有就删除。这个机制的好处是它把产生灵感和决定是否发布拆成了两件事。写博客最消耗意志力的地方就是每次打开编辑器都以为要写一篇完整文章结果因为压力太大而放弃。有了收件箱之后我可以在状态好的时候把草稿加工成文章状态差的时候哪怕只写两行也算有进展。3. 主题落地的三个关键目录、导航、暗色模式内容结构定下来之后我才开始碰主题。这一块我没有贪多只做了三件事压缩导航入口、重构侧边栏、用CSS变量实现暗色模式。这三件事做完了网站看起来立刻干净很多而且后续几乎不用再返工。3.1 导航只留两个入口内容用聚合页代替堆砌很多个人站点的导航栏恨不得放六个七个链接首页、关于、分类一、分类二、标签、友链、留言板。但我的判断是一个刚起步的小站导航里只需要首页和归档两个入口。如果有正在进行中的系列计划再单独加一个计划页面让新读者知道从哪里开始看。其他内容例如关于页和标签云放到页脚就够了。这背后的逻辑是导航栏对于第一次来的访客来说是个决策工具不是目录册。选项越多决策成本越高结果就是很多人进站扫一眼就离开了。把导航压缩到两个之后读者只有两条路可走看最新内容或者看全部内容。对一个小型个人站来说这两条路已经足够。3.2 侧边栏不挂社交链接放最近更新与计划进度我原本打算在侧边栏放邮箱订阅和各平台账号入口后来想了想对一个新站点来说复访率比订阅量更重要。真正让人愿意回访的不是社交链接而是这个站在持续更新的直观证据。所以我给侧边栏安排了两块内容第一块是最近更新的三篇文章第二块是当前计划进度。计划进度这块我用了很朴素的做法显示为4 / 28正在做内容结构与主题定制。这种透明化的更新日志比一句欢迎订阅有说服力得多。它让读者看到一个真实的人正在按计划推进而不是一个沉默的、不知道何时再更新的博客。这个思路也延续到了每一篇文章的末尾我会顺手用括号注明这是这个计划里的第几天。3.3 用CSS变量实现暗色模式后续不用返工关于主题今天最值得记录的是暗色模式的实现方式。我没有给每个组件单独写一套暗色样式而是把所有颜色都定义成CSS变量页面切换主题时只需要替换变量群。这样做的好处是以后给任意页面新增样式时只需要引用变量不用再去同步暗色模式下的颜色。这里贴一段我实际使用的样式骨架已经去掉和具体生成器绑定的内容只保留思路:root { --color-bg: #ffffff; --color-text: #222222; --color-link: #0055aa; --color-border: #dddddd; } html[data-themedark] { --color-bg: #1a1a1a; --color-text: #e0e0e0; --color-link: #7cc0ff; --color-border: #444444; }切到暗色模式时只要在页面根元素上挂上> 
长河君 · 2026/10/20 5:25:20 · 阅读 1.2k 个人网站从能打开到能看：内容结构、主题定制与发布链路
如果你也在做那种连续28天的自我挑战大概会懂这种感觉DAY1满脑子都是火花DAY2觉得还挺简单DAY3开始怀疑自己DAY4发现前面的代码要返工。Tibo的28天计划走到今天正好卡在第四天我给自己定的任务是把前三天搭出来的个人网站从能打开变成能看、能持续更新。这个系列不是讲高深的前端框架而是记录一个零基础的人如何用28天一步步把个人网站盖起来、把内容发布链路跑通、让搜索引擎能收录。DAY4这篇最适合两种人看一种是已经在DAY1到DAY3跟着搭了站点但卡在主题和内容组织上的人另一种是折腾过静态网站生成器结果换主题后样式崩掉、不知道从哪查起的人。1. DAY4 从能打开到能看——先把前三天的烂摊子收好早上打开本地预览我发现站点还处于一种半成品中的半成品状态首页标题是模板自带的默认文字点进昨天写的测试文章侧边栏错位图片也没加载出来。更麻烦的是昨晚我一时手痒在本地尝试切换主题结果所有卡片都变成了通栏宽度直接冲出容器。这一刻我突然意识到DAY4真正要处理的不是增加新东西而是先把前三天欠下的结构性整理补上。1.1 我的28天计划到底在折腾什么这个计划的最初动机其实很朴素。我一直想把每周学到的东西沉淀下来但内容总是散落在备忘录、收藏夹和各种聊天记录里真要回头找的时候反而找不到。后来我看到了数字花园这个概念意思是网站不一定要追求博客那样完整长篇的文章短小的、持续更新的笔记反而更有生命力。于是我在第一天把计划范围定为用一个静态网站生成器搭建个人网站每天记录一段可复现的实践过程28天后回看整条成长轨迹。DAY1我确定了站点定位和域名DAY2搭好本地开发环境DAY3写完第一篇测试文章并成功在浏览器里看到了页面。这三天的进度其实并不快但足够让我摸清楚整个工作流的关键节点。今天DAY4的目标是集中处理内容结构、页面主题和发布链路让这个站点不再像是一个临时演示页而是开始具备一个真正的内容站点该有的骨架。1.2 第三天结束时的现场首页能出一换主题就崩昨天结束时的状态是首页能打开文章能访问但细节经不起推敲。问题集中在两处一是首页标题和副标题还是模板默认内容我改了配置文件里的站点名称但模板页面里有一处硬编码没有跟着变二是改了一个主题选项后卡片布局整体逃逸看起来就像所有内容块被强行拉宽。为了定位这个问题我没有急着去翻CSS文件而是先用浏览器开发者工具检查了实际渲染出来的HTML结构后面前面的踩坑部分我会详细展开。这里先说结论很多样式崩了的问题根子往往不在样式文件里而在内容结构或模板变量用错了位置。DAY4早上的现场让我做了一个决定今天不管好看不好看先把内容结构和发布流程定下来。外观可以等结构稳定后再打磨但结构不稳定就反复调样式只会让返工次数越来越多。1.3 按内容、样式、链路三个顺序排今天的工作今天的工作顺序我排在第一位的是内容结构第二位是页面主题第三位是发布链路。为什么会是这个顺序因为内容结构一旦定下来导航放什么、侧边栏放什么、文章页面需要展示哪些信息就都有了依据而样式调得再好看如果没有固定的链接规则和SEO配置以后每次发布新文章都得重复劳动那才是真正拖垮更新频率的事。所以我给DAY4拆成了三块任务第一定义站点的分类、标签和写作目录结构第二基于这个结构定制主题的导航、侧边栏和暗色模式第三把本地到线上的发布流程压缩成一条命令并配置基础的搜索引擎可见性。今天这篇博文就是按这三块任务往下走的你会发现它不是一上来就动手改代码而是先做一些看起来像规划的事。别小看这一步省掉它会让你在后续更新时不断怀疑人生。2. 内容地图怎么定——比页面外观更值得花时间的事很多个人网站教程都把第一步放在选个好看的主题上但我今天最大的感受是主题好不好看是审美问题内容放哪儿才是结构问题。一个站点之所以让人看了想关掉往往不是配色难看而是进来之后不知道这个站在说什么、该看什么、有没有持续更新的痕迹。内容地图就是解决这三件事的。2.1 用三句话描述这个网站是给谁看的我花了一个小时只做了一件事用三句话描述这个网站是给谁看的。我写的是给想知道工具怎么提升效率的人看记录每月读过的书单和实操过的方法每篇文章都尽量给出可复现的步骤而不是只讲观点。这三句话分别回答了读者是谁、内容是什么、内容的形式是什么。写完之后我发现后续很多决策都变简单了首页标语可以直接从这三句话里提炼侧边栏该放哪些模块也有依据甚至文章里应该出现什么级别的术语都有了标准。如果你说不上来这个网站给谁看结果往往就是内容大杂烩今天写美食明天写科技后天写心情看起来热闹但没有一个读者会觉得这个站是专门为我更新的。2.2 分类、标签与系列页我的三层结构内容结构上我用的是分类、标签、系列页三层结构。分类是站的骨架数量一定要少我在DAY4只留了五个工具笔记、方法复盘、月度阅读、计划日志、杂记。标签则是对内容的属性标注可以多一些比如某个具体工具名、某种方法名方便未来按主题检索。系列页则是一个临时的聚合入口例如现在这个28天计划就会单独做成一页把每一天的更新串起来。分类少有一个很直接的好处维护成本低。如果建了二十个分类每次写文章都要纠结放哪个写多了还会出现两个分类内容高度重叠的情况。我的经验是分类承担的是读者想逛这个站时从哪里进标签承担的才是我想找某个主题时怎么筛。导航栏里永远只放分类标签在文章底部和归档页出现就够了。2.3 给临时收件箱预留一个目录写作中最怕的不是写不好而是想法来了没地方放。我给站点单独加了一个临时收件箱目录专门放那些还没成型的内容。灵感出现时先记下来不判断好坏、不整理分类只负责保存。每周固定清一次清的时候只问一个问题这句话对一周后的我还有用吗有就继续加工没有就删除。这个机制的好处是它把产生灵感和决定是否发布拆成了两件事。写博客最消耗意志力的地方就是每次打开编辑器都以为要写一篇完整文章结果因为压力太大而放弃。有了收件箱之后我可以在状态好的时候把草稿加工成文章状态差的时候哪怕只写两行也算有进展。3. 主题落地的三个关键目录、导航、暗色模式内容结构定下来之后我才开始碰主题。这一块我没有贪多只做了三件事压缩导航入口、重构侧边栏、用CSS变量实现暗色模式。这三件事做完了网站看起来立刻干净很多而且后续几乎不用再返工。3.1 导航只留两个入口内容用聚合页代替堆砌很多个人站点的导航栏恨不得放六个七个链接首页、关于、分类一、分类二、标签、友链、留言板。但我的判断是一个刚起步的小站导航里只需要首页和归档两个入口。如果有正在进行中的系列计划再单独加一个计划页面让新读者知道从哪里开始看。其他内容例如关于页和标签云放到页脚就够了。这背后的逻辑是导航栏对于第一次来的访客来说是个决策工具不是目录册。选项越多决策成本越高结果就是很多人进站扫一眼就离开了。把导航压缩到两个之后读者只有两条路可走看最新内容或者看全部内容。对一个小型个人站来说这两条路已经足够。3.2 侧边栏不挂社交链接放最近更新与计划进度我原本打算在侧边栏放邮箱订阅和各平台账号入口后来想了想对一个新站点来说复访率比订阅量更重要。真正让人愿意回访的不是社交链接而是这个站在持续更新的直观证据。所以我给侧边栏安排了两块内容第一块是最近更新的三篇文章第二块是当前计划进度。计划进度这块我用了很朴素的做法显示为4 / 28正在做内容结构与主题定制。这种透明化的更新日志比一句欢迎订阅有说服力得多。它让读者看到一个真实的人正在按计划推进而不是一个沉默的、不知道何时再更新的博客。这个思路也延续到了每一篇文章的末尾我会顺手用括号注明这是这个计划里的第几天。3.3 用CSS变量实现暗色模式后续不用返工关于主题今天最值得记录的是暗色模式的实现方式。我没有给每个组件单独写一套暗色样式而是把所有颜色都定义成CSS变量页面切换主题时只需要替换变量群。这样做的好处是以后给任意页面新增样式时只需要引用变量不用再去同步暗色模式下的颜色。这里贴一段我实际使用的样式骨架已经去掉和具体生成器绑定的内容只保留思路:root { --color-bg: #ffffff; --color-text: #222222; --color-link: #0055aa; --color-border: #dddddd; } html[data-themedark] { --color-bg: #1a1a1a; --color-text: #e0e0e0; --color-link: #7cc0ff; --color-border: #444444; }切到暗色模式时只要在页面根元素上挂上>