个人博客搭建过程

记录使用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 步：初始化项目

makefile 复制代码

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 推送（推荐）

bash 复制代码

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 网络不通时）

python 复制代码

# 使用 GitHub Contents API 逐个上传文件
# 需要 Personal Access Token

开启 GitHub Pages：

仓库 Settings → Pages
Source 选择 main 分支，/ 路径
添加 .nojekyll 文件跳过 Jekyll 构建
等待几分钟，访问 https://用户名.github.io/blogs/

第 7 步：后续维护

bash 复制代码

# 修改代码后
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)`

五、线上地址

intq7.github.io/blogs/

六、效果图

电脑端

移动端