Github 部署博客上线

折腾了许久的个人博客，今天终于正式部署上线啦！🎉

没有使用成熟的博客框架，也没有复杂的搭建流程，全程靠 HTML + CSS + JavaScript 手写打磨，依托 GitHub Pages 免费托管，从零实现了属于自己的专属个人博客。从页面布局、样式美化到交互调试、线上部署，一步步踩坑、优化、完善，看到域名成功打开页面的那一刻，所有的熬夜折腾都变得格外有意义。

为什么选择手写静态博客？

市面上的博客搭建方案五花八门，Hexo、VuePress、Jekyll 等框架开箱即用，一键部署十分便捷，但我始终觉得少了一点专属感。

作为前端爱好者，一直想拥有一个完全由自己掌控的博客站点。不用受制于框架的模板限制，不用适配繁杂的配置项，从每一行代码、每一个页面样式、每一个交互效果都由自己定义。

这次全程手写 HTML+CSS+JavaScript，不仅是搭建一个博客，更是一次完整的前端实战练习。从页面自适应布局、样式配色搭配，到简单的动态交互、页面加载优化，全程自主调试，既能沉淀技术，又能打造独一无二的个人展示空间，用来记录学习笔记、技术心得、日常感悟再合适不过。

我的博客部署方案：GitHub Pages

本次博客最终选择 GitHub Pages 作为托管平台，最核心的优势就是 免费、稳定、零服务器成本、部署便捷，非常适合个人静态博客、作品集网站展示。

不同于需要购买服务器、配置环境的传统部署方式，GitHub Pages 专门用于托管静态网页资源，完美适配纯前端手写的静态站点，无需复杂的后端配置，只要有静态页面文件，即可快速上线。

极简部署流程（纯静态页面通用）

记录一下本次完整的部署步骤，方便后续复盘，也给想搭建个人博客的小伙伴做个参考：

1. 准备源码文件

整理好本地所有博客文件，包括 HTML 页面、CSS 样式文件、JS 交互文件、图片资源等，确保本地打开页面可以正常展示、交互无异常，页面布局、样式、功能全部调试完毕。

2. 创建专属仓库

登录 GitHub 账号，新建公开仓库，仓库名严格按照规则填写：用户名.github.io（这是 GitHub Pages 专属域名格式，必须精准填写，否则无法正常访问），勾选初始化 README 文件，完成仓库创建。

3. 上传博客源码

将本地整理好的所有博客静态文件，直接上传到该仓库根目录，也可以通过 Git 命令提交推送代码，确保首页文件 index.html 在仓库根路径下，保证站点可以正常识别入口文件。

4. 开启 GitHub Pages 服务

进入仓库 Settings 页面，找到 Pages 配置项，在构建部署选项中，选择部署来源为 main 分支、根目录（root），保存配置。

保存后 GitHub 会自动执行构建部署，首次部署通常需要几十秒到两分钟左右，等待系统完成编译发布即可。

5. 访问上线博客

部署完成后，通过专属域名 用户名.github.io 即可成功访问个人博客，一个完全属于自己的线上站点就正式诞生了。

部署过程踩坑小结

看似简单的部署流程，实际操作中也遇到了几个小问题，在这里记录避雷：

• 仓库名格式错误：初期随意命名仓库，导致页面无法访问，必须严格遵循用户名.github.io 格式，且仓库必须设置为公开权限。
• 资源路径报错：本地正常、线上样式错乱，排查后发现是相对路径书写不规范，静态资源路径错误导致 CSS、JS、图片加载失败，统一修正相对路径后恢复正常。
• 部署延迟问题：代码推送后页面没有及时更新，GitHub Pages 部署存在短暂缓存延迟，耐心等待几分钟或强制刷新页面、清除缓存即可解决。

写在最后

从零基础手写页面样式、调试交互 bug，到一步步配置、部署、上线，整个过程虽然繁琐，但成就感满满。

相比于套用模板的博客，自己手写搭建的站点，每一处细节都是心血，也更有温度。往后这里就是我的专属技术小天地，会持续更新技术笔记、学习心得、踩坑记录，慢慢打磨页面样式、优化交互体验，不断丰富博客内容。

如果你也想拥有免费的个人博客，不妨试试 HTML+CSS+JS + GitHub Pages 的组合，低成本、高收获，亲手搭建属于自己的线上自留地✨。