博客网站开发

我的博客网站开发实录（第一篇）

这是我博客的第一篇文章。它不仅是一篇“开篇”，也是我把这个博客真正搭建起来的完整记录：从购买域名、托管代码、在 GitHub 上部署，到在本地使用 Node.js 和 Git 持续开发。

写这篇文章的原因很简单：

  1. 记录自己真实做过的事，避免以后“我当时到底怎么配的？”
  2. 给未来的自己留一份可复用的操作手册
  3. 如果有人也准备做个人博客，希望这篇经历能帮你少走弯路

一、为什么要自己搭一个博客？

在开始技术步骤前，先说结论：我希望博客是我长期输出内容的阵地，而不是依赖第三方平台算法分发。

我对博客的目标是：

  • 可长期维护：文章是 Markdown，迁移成本低
  • 成本可控：部署尽量免费或低成本
  • 发布简单：本地写好后可以快速上线
  • 可定制：页面样式、结构、功能都能自己改

基于这些目标，我最终选择了：

  • 域名：自己购买一个独立域名
  • 托管与部署：GitHub + GitHub Pages
  • 本地开发：Node.js + Git + 静态博客框架（如 Hexo）

二、准备工作

正式开始前，我做了几项基础准备。

1）账号与工具

  • GitHub 账号（用于托管代码和部署）
  • 域名服务商账号（用于购买和管理域名）
  • 本地开发环境：
    • Node.js（包含 npm）
    • Git
    • 代码编辑器（我用的是 VS Code）

2）目录规划

我在本地准备了博客项目目录，例如：

  • github_my_blog/：博客源码目录
  • source/_posts/：文章目录（这篇文章就放在这里）

一个小建议：项目目录和仓库名称尽量提前规划好，后续能少改很多配置。

三、购买域名：从“可访问”到“有身份”

1）为什么要买域名？

默认的 GitHub Pages 域名虽然可用，但有一个独立域名会更专业，也更容易建立长期品牌识别。

例如：

  • 默认地址：用户名.github.io
  • 自定义域名：yourname.com

2）我在域名购买时关注的点

  • 后缀选择：.com 优先，其次根据定位选择 .cn、.dev 等
  • 易记性：短、好拼写、避免歧义
  • 续费价格：首年优惠不重要，续费才是长期成本
  • 隐私保护：是否支持 Whois 隐私

3）购买完成后要做什么

购买成功不代表网站立刻可用。接下来关键是 DNS 配置，把域名正确指向 GitHub Pages。

四、代码托管与远程仓库：放到 GitHub 才能持续迭代

1）创建仓库

我在 GitHub 上创建了博客仓库（建议仓库名和项目名保持一致，便于维护）。

2）本地初始化与关联远程

典型流程如下（示意）：

1
2
3
4
5
6
git init
git add .
git commit -m "init blog project"
git branch -M main
git remote add origin <你的仓库地址>
git push -u origin main

如果你是第一次使用 Git，建议先配置用户名和邮箱：

1
2
git config --global user.name "your_name"
git config --global user.email "your_email@example.com"

3）我在这一步的核心收获

  • 本地开发是“工作区”
  • Git 是“版本历史”
  • GitHub 是“远程备份 + 发布入口”

这三者是博客稳定维护的基础。

五、本地开发环境：Node.js + Git 的实际作用

很多刚开始做博客的人会疑惑：为什么静态博客还要 Node.js？

因为像 Hexo 这类框架依赖 Node.js 生态，本地需要：

  • 安装依赖（npm）
  • 启动本地预览服务
  • 构建静态文件

1）确认环境是否可用

1
2
3
node -v
npm -v
git --version

只要这三条命令都能输出版本号，说明基础环境基本没问题。

2）本地开发的一般节奏

  1. 写文章（Markdown）
  2. 本地预览（检查排版、图片、代码块）
  3. 调整格式和内容
  4. 提交 Git
  5. 推送 GitHub 触发部署

这个节奏看起来简单，但它保证了“每一次发布都可回滚、可追溯”。

六、部署到 GitHub Pages：让博客真正上线

1）启用 GitHub Pages

在仓库设置里启用 Pages，并指定发布来源（分支或 Actions）。

常见两种方式：

  • 从某个分支的静态文件目录发布
  • 使用 GitHub Actions 自动构建并发布

如果你的博客框架支持 Actions，我更推荐自动化方案：每次 push 自动构建，减少手工操作。

2）首次上线后的检查项

  • 页面是否能打开
  • 首页样式是否正常
  • 文章链接是否可点开
  • 静态资源（CSS/JS/图片）是否加载成功

这一步非常关键，因为很多问题不是“写错内容”，而是“路径配置不一致”。

七、绑定自定义域名：从默认地址切换到个人域名

这是我整个流程里最容易卡住的一步。

1）在 GitHub 仓库中设置自定义域名

在 Pages 设置中填写你的域名，例如：

  • www.example.com 或 example.com

2）在域名服务商配置 DNS

一般会涉及：

  • A 记录（根域名）
  • CNAME 记录（www 子域名）

注意：DNS 生效通常需要时间，几分钟到 24~48 小时都可能。

3）开启 HTTPS

GitHub Pages 支持证书自动签发。等 DNS 生效后，建议开启强制 HTTPS，保证访问安全。

八、我遇到过/可能会遇到的问题

即使流程没错，也常遇到这些现象：

  1. 页面 404：通常是仓库名、发布分支或路径配置有误
  2. 样式丢失：常见原因是站点基础路径配置不正确
  3. 域名访问不到：DNS 未生效或记录填写错误
  4. 推送失败：Git 认证方式配置问题（建议使用 Token/SSH）

我的经验是：不要一口气改太多配置。一次只改一个变量，才能快速定位问题。

九、这次开发经历给我的几个启发

1）先跑通，再优化

先让博客“可访问、可发文、可更新”，再去做主题美化和高级功能。

2）文档化非常重要

把关键步骤写下来，比“记在脑子里”可靠得多。以后迁移设备、重装系统、换主题，都能快速恢复。

3）持续输出比一次性搭建更重要

搭建只是开始，真正有价值的是持续写作和迭代。

十、下一步计划

接下来我准备逐步完善博客：

  • 增加“关于我”和“归档”页面
  • 优化文章分类与标签体系
  • 调整主题样式，提升阅读体验
  • 建立固定写作节奏（每周至少一篇）

这篇是起点。之后我会继续把开发过程、踩坑经验、技术总结写下来，形成一个可持续积累的个人知识库。

结语

从买域名到部署上线，看起来步骤很多，但本质上是一条清晰路径：

域名（身份） → GitHub（托管） → Node.js/Git（开发） → Pages（上线）。

只要你按顺序走完一次，后面维护就会越来越轻松。

如果你也在搭博客，欢迎把你的过程记录下来。技术成长很多时候不是“学了多少”，而是“沉淀了多少”。

#博客 #网站开发 #GitHub Pages #Node.js #Git
博客网站开发
http://example.com/2026/04/26/博客网站开发/
Author
cx
Posted on
April 26, 2026
Licensed under