这个博客的第一版：先把阅读做好

个人博客的第一版，核心任务很简单：让读者找到一篇文章，并舒服地读完。这版网站围绕这个目标，采用静态页面，保留文章列表、文章详情和关于页面。

用简单的结构组织内容

首页负责列出文章标题、摘要和分类；文章页专注展示正文；关于页面说明网站的用途。每篇文章都有独立地址，方便保存和分享。

index.html              文章列表
about.html              关于网站
style.css               公共样式
posts/
  hello-world.html      开站说明
  building-this-blog.html  本篇文章

页面使用相对路径引用样式和链接。因此，下载后的文件可以直接打开预览，也可以整体放进服务器的网站目录。部署时要保持目录关系一致。

先保证正文可读

长文章不适合铺满整个屏幕。这版文章页限制正文宽度，并给段落保留足够的行距。标题、正文和日期采用不同层级，让读者能快速扫读，也能继续深入阅读。

移动端使用单列布局。首页的侧栏会移动到文章列表下方，避免挤占正文空间。导航保持简短，代码块则允许横向滚动。

共享样式，让后续修改更轻松

所有页面引用同一个 style.css。字体、颜色、边框和间距集中定义，调整一次即可在多个页面生效。布局用 CSS Grid 和媒体查询实现，没有引入前端框架。

这也意味着主要内容不依赖 JavaScript：关闭脚本后，仍能浏览首页、打开文章和阅读正文。

静态页面的取舍

静态博客没有数据库和后台登录，发布一篇新文章需要新增 HTML 文件，并在首页添加对应链接。内容量较少时，这种方式容易理解和维护；文章逐渐增加后，再考虑使用 Markdown 和静态站点生成器。

上线前检查什么

• 使用正式域名打开首页，并逐个检查文章和导航链接。
• 在手机上检查字号、换行和代码块是否正常。
• 确认页脚备案信息与实际记录一致。
• 保留网站文件副本，更新时先预览再替换。

网站上线只是开始。持续留下有用的开发记录，才是这个博客最重要的内容。