搭建个人博客 / 简历网站：从设计到部署的全流程（含响应式适配）
面向前端开发者的一份实战指南，覆盖从信息架构与设计系统，到技术选型、实现细节、响应式适配、性能与可访问性、部署与运维的全流程。目标是快速落地一个美观、可靠、可持续维护的个人博客 / 简历网站。
1. 项目目标与范围展示个人品牌与专业能力：主页、博客、作品集、简历页、关于页。移动优先的响应式布局：适配手机、平板、桌面与超宽屏。易维护的内容体系：Markdown/MDX，支持草稿、标签与分类。高性能与可访问性：Lighthouse 性能、可访问性、SEO 得分优。自动化部署：一键持续集成到 GitHub Pages / Vercel / Netlify。可扩展：评论、分析统计、国际化、深浅色主题等增量功能。2. 信息架构与内容规划主页（Home）：个人简介、品牌形象、最近文章/项目精选、社交链接。博客（Blog）：文章列表、标签/分类筛选、全文搜索、RSS。文章页（Post）：标题、发布日期、阅读时长、目录、图片、代码高亮、相关文章、评论。简历（Resume）：时间线、技能矩阵、项目经验、联系方式、下载 PDF。关于（About）：详细自我介绍、价值观、联系方式、版权与隐私声明。导航与页脚（Nav & Footer）：主导航、搜索、订阅、备案/版权、社交。内容来源建议：
使用 Markdown/MDX 管理文章与简历模块化内容。通过 Frontmatter 管理元数据：title、date、tags、draft、description。示例 Frontmatter：
代码语言：javascript复制---
title: 设计到部署的全流程
date: 2025-11-21
tags: [frontend, blog, resume]
draft: false
description: 从设计、响应式到部署的一站式实践
---3. 设计系统与视觉规范网格系统：容器宽度、列数、间距；建议移动单列、平板 6-12 列、桌面 12 列。排版：选择 2-3 种层级字体（标题、正文字体、等宽代码）；行高 1.5-1.8。色彩：主色、强调色、文本色、背景色、分隔与提示状态色。组件：卡片、列表、按钮、标签、徽章、导航、页脚、分页、评论区。图像与插画：统一风格；封面图比例 16:9/4:3；头像支持 srcset。深浅色主题：通过 CSS 变量与 prefers-color-scheme 自动适配。示例 CSS 变量与主题切换：
代码语言：javascript复制:root {
--bg: #ffffff;
--text: #161616;
--primary: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b0f1a;
--text: #e6e6e6;
--primary: #60a5fa;
}
}
body { background: var(--bg); color: var(--text); }4. 响应式适配：策略与实践断点策略：移动优先，使用少量语义化断点，如 sm: 480px、md: 768px、lg: 1024px、xl: 1280px。流式布局：百分比宽度、弹性盒（Flex）、网格（Grid），避免固定宽度。弹性排版：clamp 动态字体，提升在不同分辨率的可读性。图片适配：img { max-width: 100%; height: auto; }，结合 picture 与 srcset。触控与交互：触控目标至少 44x44px，滚动与 hover 状态合理降级。示例网格容器与排版：
代码语言：javascript复制.container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(12, 1fr); } }
.article { font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); line-height: 1.8; }图片与 srcset：
代码语言：javascript复制
5. 技术选型与架构根据需求选择以下任一路径：
纯静态（内容型为主）：Astro、VitePress、Hugo；优点是构建快、部署简单、支持 Markdown 原生。React 技术栈：Next.js（SSG/ISR/SSR），适合可拓展性与生态丰富；Vercel 部署无缝。Vue 技术栈：Nuxt（SSG/SSR），体验与 Next.js 类似；支持静态导出与服务端渲染。推荐架构：
小型个人站：Astro/VitePress + GitHub Pages。中长期维护与扩展：Next.js + Vercel + MDX 内容源。6. 项目初始化与目录组织（以 Next.js 为例）初始化：
代码语言：javascript复制npm create next@latest my-site -- --ts
cd my-site
npm run dev建议目录：
代码语言：javascript复制my-site/
public/
images/
favicon.ico
src/
app/
layout.tsx
page.tsx
blog/
page.tsx
[slug]/page.tsx
resume/page.tsx
about/page.tsx
content/
posts/
resume/
components/
Header.tsx
Footer.tsx
PostCard.tsx
MDXRenderer.tsx
styles/
globals.css
tokens.css7. 核心页面与组件要点主页：首屏品牌+CTA、最新文章/项目、社交链接，首屏加载控制在 100KB 内。博客列表：支持标签筛选、分页、阅读时长估算、预取文章页。文章页：目录（基于标题层级生成）、图片懒加载、代码高亮、上一篇/下一篇。简历页：模块化区块（教育/工作/技能/项目），支持导出 PDF。导航与页脚：可滚动时收缩导航、返回顶部、订阅（RSS/Email）。SEO 头部：动态 title、description、OG/Twitter Card、结构化数据。示例 HTML 头部：
代码语言：javascript复制
8. 内容来源：Markdown/MDX 与元数据使用 MDX 渲染文章：可在内容内直接插入组件（如提示、图表）。Frontmatter 管理元数据，未发布用 draft: true 控制。自动生成目录与相关文章：扫描 Heading 与标签。文章结构示例：
代码语言：javascript复制---
title: 响应式设计的三个层次
date: 2025-11-21
tags: [responsive, css]
description: 从网格、排版到交互的渐进优化
---
# 引言
正文内容9. 样式实现：CSS/Tailwind/SCSS原子化（Tailwind）：快速构建，约束设计系统靠 tokens 与预设类。传统 CSS/SCSS：更强表达力，建议以 CSS 变量驱动主题与空间尺度。基础排版与容器示例：
代码语言：javascript复制:root { --space-2: 8px; --space-4: 16px; --space-6: 24px; }
.container { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-4); }
h1 { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); }
p { margin: var(--space-4) 0; }10. 可访问性与 SEO语义化标签：header、nav、main、article、footer。可聚焦与键盘导航：为交互组件设置 tabindex 与明确焦点样式。ARIA：为复杂组件提供角色与状态。对比度：文本与背景对比度符合 WCAG AA。SEO：站点地图、robots.txt、结构化数据、规范化 URL、描述清晰的标题。跳转到主内容的链接：
代码语言：javascript复制跳过导航
代码语言：javascript复制img { width: 100%; height: auto; background: #f3f4f6; }12. 部署方案对比与步骤GitHub Pages（纯静态）：适合 Astro/VitePress/Hugo 或 Next.js 静态导出。Vercel（Next.js 推荐）：支持 SSR/ISR，域名与环境变量管理友好。Netlify（静态/SSR 混合）：与现代前端框架集成良好。Astro 到 GitHub Pages：
代码语言：javascript复制npm create astro@latest my-site -- --template blog
cd my-site
npm run buildNext.js 到 Vercel：
代码语言：javascript复制npm run build
npx vercel deploy --prod13. CI/CD 与自动化目标：推送到 main 分支后自动构建与部署。GitHub Actions：对静态站点将构建产物发布到 gh-pages 分支。示例（静态站点）：
代码语言：javascript复制name: Build and Deploy
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist14. 自定义域名与站点配置购买域名后在 DNS 供应商设置 CNAME/A 记录指向托管平台。GitHub Pages：仓库设置里绑定自定义域名，并在根目录放置 CNAME 文件。HTTPS：托管平台一般自动签发证书；注意强制跳转到 HTTPS。15. 增量功能与运营评论系统：Giscus、Disqus、Commento。分析统计：Plausible、Umami、Google Analytics。RSS/订阅：生成 feed.xml，在页脚与
暴露。联系表单：平台表单或服务（Netlify Forms、Formspree），或 mailto:。国际化：路由与内容多语言；日期/数字本地化。隐私与合规：Cookie 使用、第三方脚本声明、隐私政策页。16. 常见问题排查首屏过重：减少图片与第三方脚本，延迟非关键资源。字体过多：控制字重数量，子集化；优先系统字体栈。断点不一致：以设计 tokens 驱动，统一响应式断点。部署失败：检查构建脚本与产物目录，区分静态与 SSR 部署。SEO 收录慢：提交站点地图到搜索引擎，保证内容质量与更新频率。17. 最小可用实现（HTML/CSS 片段示例）代码语言：javascript复制
你好，我是前端开发者
这里记录设计到部署的实践与思考
最新文章
从信息架构到响应式的全流程
代码语言：javascript复制:root { --gap: 16px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto; }
.container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.hero { padding: 2rem 0; }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.card { padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } }18. 发布前检查清单视觉：栅格与间距统一，暗色主题对比度达标。响应式：断点测试（320/768/1024/1280），触控与键盘导航可用。内容：标题与摘要清晰，链接与图片有效，RSS 生成正常。性能：Lighthouse 分数达标，包体与首屏请求控制合理。SEO：元数据完整，站点地图与 robots.txt 可访问，语义化结构。部署：环境变量配置，产物目录正确，CDN 缓存策略明确。结束语从信息架构与设计系统出发，采用移动优先的响应式策略与现代前端框架进行实现，辅以可访问性与性能优化，最后通过自动化部署上线，是个人博客 / 简历网站长期、稳定运营的关键路径。先从最小可用版本起步，逐步迭代页面与内容质量，持续输出，才是个人品牌的核心竞争力。