从零搭建个人网站（一）：规划与设计
一直想有个自己的网站。这次决定不用现成的模板，从头到尾自己走一遍：规划、设计、开发、部署。这篇先记录动手写代码之前的准备。
先选路线：静态还是动态
个人网站大致有两条路：
- 纯静态：HTML、CSS、JavaScript 写好，直接放到 GitHub Pages 这类免费托管上，简单，上线快。
- 前后端分离的动态网站：前端 Vue，后端 Spring Boot 加 MySQL，可以做后台管理和评论，但工作量大很多。
我选择分两步走：先做静态版，把"写代码 → 上线 → 用域名访问"的流程走通，以后再升级成动态版。域名、DNS、部署这些经验到时候都能直接复用。
网站地图：有哪些页面
第一版只做最核心的页面：
| 页面 | 内容 |
|---|---|
| 首页 | 个人简介和最新文章 |
| 博客 | 全部文章列表 |
| 文章详情 | 所有文章共用一个模板 |
| 关于 | 个人介绍和简历，先合成一页 |
| 404 | 地址错误时显示 |
作品集等有两三个作品了再加，不然空着的页面反而显得没做完。
线框图：每页放什么
线框图只用灰色方块排版，不考虑颜色和字体。每一步只做一种决定，改起来成本低。
最后选定的是：首页左边放个人卡片、右边放文章列表；文章页正文在左，右侧是跟着滚动的目录，会高亮当前读到的小节。
视觉风格：长什么样
在九种风格里挑了"温暖杂志风"：米色纸张的背景、衬线字体、赭红色点缀。夜间模式用同一套思路的深棕色版本。
所有颜色都写成 CSS 变量，切换主题时只换变量的值。
比如正文颜色这样写：
body {
background: var(--bg);
color: var(--text);
}这个习惯从第一行 CSS 就要养成，以后改颜色、加主题都不用返工。
下一步
规划和设计就到这里，下一篇记录开发环境的准备。