个人博客搭建过程
记录使用AtomCode搭建个人博客过程
提示词
- 怎样做一个开发人员自我介绍的个人博客
- 帮我建一个个人博客
- 添加简历信息将实际技能和经验更新到页面上
- 检查并按自己需求完善界面
- 将博客免费发布到公网
- 后续根据Ai提示操作将博客发布到 GitHub Pages
摘要
本文详细记录了使用 AtomCode 从零开始搭建一个开发者个人博客的全过程。主要内容包括：
- 平台选择：对比了 GitHub Pages、Vercel、Netlify 和云服务器自建等方案，最终选择 GitHub Pages 作为免费、零运维的部署平台。
- 技术栈：采用纯前端技术栈（HTML5、CSS3、JavaScript）实现，并利用 CSS 变量实现主题切换。
- 搭建过程：从项目初始化、页面结构设计、样式设计、交互功能（滚动高亮、动画、主题切换）到最终部署上线，共分七步完成。
- 问题与解决：总结了部署过程中遇到的常见问题（如构建失败、网络超时、主题切换不生效等）及其解决方案。
- 成果展示：提供了线上访问地址和博客在电脑端与移动端的最终效果图。
本文旨在为开发者提供一个清晰、可复现的静态博客搭建指南。
一、平台选择
方案对比
| 方案 | 费用 | 难度 | 特点 |
|---|---|---|---|
| GitHub Pages | 免费 | ⭐⭐ | 全球 CDN 加速，支持自定义域名，无需服务器 |
| Vercel | 免费 | ⭐⭐ | 自动部署，支持 Serverless 函数 |
| Netlify | 免费 | ⭐⭐ | 表单处理、身份验证等开箱即用 |
| 云服务器自建 | 付费 | ⭐⭐⭐⭐ | 完全可控，但需要运维成本 |
最终选择：GitHub Pages
理由：
- 完全免费 — 仓库托管 + 页面部署 + CDN 加速全免费
- 零运维 — 推送代码后自动构建部署，无需管理服务器
- 支持自定义域名 — 可绑定自己的域名
- 版本控制 — Git 天然管理代码历史，方便回滚
- 纯静态站点 — 个人博客用纯静态页面完全够用，无需后端
二、技术栈
| 技术 | 用途 |
|---|---|
| HTML5 | 页面结构 |
| CSS3 | 样式与布局，使用 CSS 变量实现主题切换 |
| JavaScript (ES6+) | 交互逻辑（导航高亮、滚动动画、表单交互、主题切换） |
| Font Awesome 6 | 图标库 |
| Git | 版本控制 |
| GitHub | 代码托管 |
| GitHub Pages | 静态站点部署 |
三、搭建过程
第 1 步：初始化项目
D:\Users\intq7\Desktop\Huawei\思考\
├── index.html # 主页面
├── style.css # 样式文件
├── script.js # 交互脚本
├── intQ7.jpg # 头像 / 浏览器标签图标
├── .gitignore # Git 忽略文件
├── .nojekyll # 跳过 Jekyll 构建
└── 个人博客搭建过程.md # 本文档
第 2 步：创建页面结构
index.html 包含以下板块：
- 导航栏 — 固定顶部，滚动后背景模糊，移动端汉堡菜单
- Hero 首页 — 头像、姓名、头衔、标语、社交链接
- 关于我 — 技能介绍 + 统计数字动画
- 技能栈 — 进度条 + 标签云，滚动进入视口后播放动画
- 项目作品 — 卡片展示，悬浮效果
- 工作经历 — 时间线布局
- 博客文章 — 博客卡片
- 联系我 — 联系方式 + 表单
- 页脚 — 社交链接
第 3 步：设计样式
- 深色主题 — 护眼，开发者风格
- CSS 变量 — 统一管理颜色，方便主题切换
- 响应式设计 — 桌面端 2~3 列，移动端 1 列
- 动画效果 — 数字递增、进度条填充、卡片悬浮上浮、平滑滚动
第 4 步：添加交互
- 导航栏滚动高亮当前章节
- 移动端汉堡菜单切换
- 数字递增动画（IntersectionObserver）
- 技能条填充动画（滚动触发）
- 表单提交模拟反馈
- 页面加载淡入动画
第 5 步：添加主题切换
- 浅色/深色模式切换按钮（右上角）
- 使用 CSS 变量 +
:root.light覆盖 localStorage持久化用户偏好- 默认浅色模式
浅色模式下颜色加深的元素：
| 元素 | 深色模式 | 浅色模式 |
|---|---|---|
| 首页头衔 | #a5b4fc 浅紫 | #6366f1 紫色 |
| 技能卡片标题 | #a5b4fc 浅紫 | #6366f1 紫色 |
| 联系我按钮 | #a5b4fc 浅紫 | #6366f1 紫色 |
| 标签云标签 | #a5b4fc 浅紫 | #6366f1 紫色 |
| 项目标签 | #a5b4fc 浅紫 | #6366f1 紫色 |
| 时间线日期 | #a5b4fc 浅紫 | #6366f1 紫色 |
第 6 步：部署上线
方案一：Git 推送（推荐）
git init
git add -A
git commit -m "feat: 初始化个人博客"
git remote add origin https://github.com/你的用户名/blogs.git
git branch -M main
git push -u origin main
方案二：GitHub API 上传（当 git push 网络不通时）
# 使用 GitHub Contents API 逐个上传文件
# 需要 Personal Access Token
开启 GitHub Pages：
- 仓库 Settings → Pages
- Source 选择
main分支，/路径 - 添加
.nojekyll文件跳过 Jekyll 构建 - 等待几分钟，访问
https://用户名.github.io/blogs/
第 7 步：后续维护
# 修改代码后
git add -A
git commit -m "feat: 描述修改内容"
git push
四、遇到的坑与解决
| 问题 | 原因 | 解决 |
|---|---|---|
| GitHub Pages 构建失败 | 默认使用 Jekyll 构建纯 HTML 站点 | 添加 .nojekyll 文件 |
| git push 超时 | 网络环境限制 | 改用 GitHub API 上传文件 |
| 主题切换不生效 | JS 放在 DOMContentLoaded 内，但脚本在 body 末尾执行时 DOM 已就绪 | 移到顶层代码 |
| 浅色模式颜色太浅 | --primary-light 在浅色背景上不清晰 | 添加 .light 覆盖，使用 var(--primary) |
五、线上地址
六、效果图
电脑端
移动端
