个人博客搭建过程

个人博客搭建过程记录使用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 推送推荐gitinitgitadd-Agitcommit-mfeat: 初始化个人博客gitremoteaddorigin https://github.com/你的用户名/blogs.gitgitbranch-Mmaingitpush-uorigin main方案二GitHub API 上传当 git push 网络不通时# 使用 GitHub Contents API 逐个上传文件# 需要 Personal Access Token开启 GitHub Pages仓库 Settings → PagesSource 选择main分支/路径添加.nojekyll文件跳过 Jekyll 构建等待几分钟访问https://用户名.github.io/blogs/第 7 步后续维护# 修改代码后gitadd-Agitcommit-mfeat: 描述修改内容gitpush四、遇到的坑与解决问题原因解决GitHub Pages 构建失败默认使用 Jekyll 构建纯 HTML 站点添加.nojekyll文件git push 超时网络环境限制改用 GitHub API 上传文件主题切换不生效JS 放在DOMContentLoaded内但脚本在 body 末尾执行时 DOM 已就绪移到顶层代码浅色模式颜色太浅--primary-light在浅色背景上不清晰添加.light覆盖使用var(--primary)五、线上地址https://intq7.github.io/blogs/六、效果图电脑端个人博客搭建过程记录使用AtomCode搭建个人博客过程提示词怎样做一个开发人员自我介绍的个人博客帮我建一个个人博客添加简历信息将实际技能和经验更新到页面上检查并按自己需求完善界面将博客免费发布到公网后续根据Ai提示操作将博客发布到 GitHub Pages一、平台选择方案对比方案费用难度特点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 推送推荐gitinitgitadd-Agitcommit-mfeat: 初始化个人博客gitremoteaddorigin https://github.com/你的用户名/blogs.gitgitbranch-Mmaingitpush-uorigin main方案二GitHub API 上传当 git push 网络不通时# 使用 GitHub Contents API 逐个上传文件# 需要 Personal Access Token开启 GitHub Pages仓库 Settings → PagesSource 选择main分支/路径添加.nojekyll文件跳过 Jekyll 构建等待几分钟访问https://用户名.github.io/blogs/第 7 步后续维护# 修改代码后gitadd-Agitcommit-mfeat: 描述修改内容gitpush四、遇到的坑与解决问题原因解决GitHub Pages 构建失败默认使用 Jekyll 构建纯 HTML 站点添加.nojekyll文件git push 超时网络环境限制改用 GitHub API 上传文件主题切换不生效JS 放在DOMContentLoaded内但脚本在 body 末尾执行时 DOM 已就绪移到顶层代码浅色模式颜色太浅--primary-light在浅色背景上不清晰添加.light覆盖使用var(--primary)五、线上地址https://intq7.github.io/blogs/六、效果图电脑端移动端