从零搭建一个技术博客：选型与部署全记录

DV4 这个博客从构思到上线大约花了两天时间。本文把这个过程完整记录下来，供有类似需求的朋友参考。

为什么选择纯静态

最初考虑过 WordPress、Hexo、Hugo 等方案，但最终决定手写纯静态 HTML。理由很简单：第一，我不需要评论系统、用户注册这些动态功能；第二，静态站部署到任何服务器（甚至 OSS + CDN）都能跑，没有 PHP 版本、数据库版本兼容问题；第三，加载速度极快，没有后端处理开销，对 SEO 也友好。

代价是每次更新文章都要手动写 HTML。不过对于个人博客，更新频率本来就不高，这个代价完全可接受。

目录与页面规划

网站结构设计为：首页（index.html）+ 博客列表（blog/index.html）+ 10 篇独立文章（blog/post-1.html ~ post-10.html）+ 项目介绍（projects/）+ 工具页（tools/）+ 关于我（about.html）+ 隐私政策（privacy.html）。CSS 统一放在 css/style.css，所有页面共享同一套样式，维护成本最低。

响应式设计要点

移动端适配的核心在于三点：使用 CSS 变量统一管理颜色和尺寸；导航栏在窄屏下切换为汉堡菜单（纯 CSS + 少量 JS）；内容区域使用 max-width + padding 实现自适应，不写死宽度。整个站点没有使用任何 CSS 框架，总样式代码只有 200 多行。

百度联盟接入准备

站点设计之初就考虑了百度联盟的人工复审要求：页面留了 ad-placeholder 占位但不放广告代码、隐私政策完整覆盖访客数据和 Cookie 说明、所有页面互链无死链、内容全部原创。通过审核后再按联盟规范正式投放。

整个建站过程让我重新体会到"简单即美"的道理——不需要复杂的技术栈，干净的 HTML + CSS 就能搭出一个像样的个人网站。