该有一个自己的网络空间了！

我总觉得需要一个能完全自己掌控的“数字基地”。于是，便有了现在这个被命名为“HZ Lab”的博客。

不依赖笨重的传统 CMS，这次我选择了纯静态、高自由度的极客路线。以下是我整个建站过程的复盘与踩坑记录。

🛠️ 第一步：选型与基础搭建

  • 核心框架：选用了高效的静态博客框架 Hexo，一切皆文件（Markdown），本地渲染，极度契合开发者的书写直觉。
  • 主题外观：选择了目前生态极其丰富的 Butterfly 主题。虽然它配置项多得像开飞机，但给足了自定义的余地。
  • 部署平台：抛弃了国内需要繁琐备案的服务器，直接采用 GitHub + Cloudflare Pages 的现代化工作流，实现了代码推送即自动构建全球 CDN 发布的丝滑体验。

📖 教学正式开始

💡 小贴士：跟着一步步弄就行，不会的拿截图报错问 AI。

1. 准备工作（下载与环境）

在开始之前，需确保电脑已安装以下软件：

  • Node.js: 官网下载 LTS 版本（内置 npm 包管理器）。
  • Git: 官网下载（用于版本控制和代码上传）。

Windows 权限解锁（PowerShell 执行）：
若运行脚本受限，输入以下命令并选 Y：

1
2
3
4
5
6
7
8
9
10
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
```  

### 2. 初始化 Hexo 框架

打开管理员终端（PowerShell），依次输入以下命令来快速搭建你的博客骨架：

1.  **安装 Hexo 命令行工具：**
    ```bash
    npm install -g hexo-cli
  1. 创建博客文件夹并进入：
    (建议路径如 D:\my-blog，文件夹名可自定义)
    1
    2
    hexo init my-blog
    cd my-blog
  2. 安装核心依赖：
    1
    npm install
  3. 启动本地预览：
    1
    hexo s

    💡 提示：看到提示后，在浏览器访问 http://localhost:4000 即可看到你的第一篇 Hexo 博客！

3. 安装并切换 Butterfly 主题

安装主题包及必要的渲染器（必须安装渲染器，否则页面会显示源码或空白）：

  1. 安装命令：
    1
    npm i hexo-theme-butterfly hexo-renderer-pug hexo-renderer-stylus --save

4. 修改站点配置

修改博客的全局配置文件，正式启用新主题并提取配置文件：

  1. 修改主题项：
    打开根目录 _config.yml，找到并修改 theme 项：

    1
    theme: butterfly

  2. 提取主题配置文件：
    (提取后可在根目录直接修改主题样式，如侧边栏、头像等)

    1
    cp node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml

    💡 提示： 修改 _config.yml 时，冒号 : 后面必须保留一个英文空格，否则 Hexo 会解析报错！

5. 建立 GitHub 远程仓库

将本地代码托管到云端，为后续的自动化部署做准备：

  1. 新建仓库：
    在 GitHub 上创建一个名为 my-blog 的空仓库（不要勾选 README 或 License）。

  2. 本地代码推送：
    (在 PowerShell 管理员模式中运行，确保当前路径处于 my-blog 目录)

    1
    2
    3
    4
    5
    6
    git init  
    git add .  
    git commit -m "First Commit"  
    git branch -M main  
    git remote add origin https://github.com/你的用户名/my-blog.git  
    git push -u origin main

    💡 提示： 记得将代码中 你的用户名 替换为你真实的 GitHub 账号名称！

6. Cloudflare Pages 自动化部署

通过 Cloudflare 连接 GitHub，实现代码提交后自动构建发布：

  1. 创建项目：
    进入 Cloudflare 控制台 -> Workers 和 Pages -> 创建应用程序 -> Pages -> 连接到 Git。

  2. 配置构建参数：

    • Build command: npx hexo generate
    • Build output directory: public

  3. 添加环境变量：
    点击 高级设置 -> 添加变量：

    • 变量名： NODE_VERSION
    • 值： 20（建议填写 20 或 18 以上）

    💡 提示： 这一步非常关键！如果不配置环境变量，Cloudflare 默认的 Node.js 版本过低会导致 Hexo 构建失败。

  • 到这里你的个人博客就正式公网部署了，可以自己添加喜欢的元素了！

7. 日常维护常用命令

学会这几个简单的命令，就可以轻松管理你的博客：

  1. 本地创作与预览：

    1
    2
    3
    4
    hexo new "文章标题"   # 新建文章
    hexo clean           # 清理缓存（遇到配置不生效时必点）
    hexo g               # 生成静态文件
    hexo s               # 本地启动预览

  2. 同步到公网发布：
    (每次修改文章或配置后，执行以下命令同步到 GitHub)

    1
    2
    3
    git add .  
    git commit -m "update blog"  
    git push origin main

    💡 提示： 只要你执行了 git push 把代码推送到 GitHub，Cloudflare Pages 就会自动检测并触发构建，几分钟后你的网站就会自动更新！

🎉 到这里你的个人博客就正式公网部署了，快去分享给你的朋友吧！

如果觉得对你有帮助，欢迎你在我的https://github.com/nz12138/my-blog仓库留下一颗小star

有什么环境问题也可以在github或者我的邮箱上留言，站主会积极回复滴~~~~~