》》 将心比心，换位思考；务实求索，无限进步 《《

##前言##

本文将基于实操使用 Hexo 静态博客框架, 并借助 GitHub Pages 和 Cloudflare CDN 服务, 搭建一个无需租用服务器, 无需支付任何费用即可访问的高性能个人博客站点. 本文旨在帮助读者了解以下内容:

• 静态网站的基本原理
• GitHub Pages 的使用
• CDN 加速的优势
• Node.js 基础操作

✨>_0 准备工作

在开始之前, 请确保您的计算机已安装以下环境：

• Node.js 环境 (官方下载地址) : Hexo 基于 Node.js 运行, 您需要安装 Node.js.
• Git (官方下载地址) : 用于将博客部署到 GitHub.
• GitHub 账号 (注册地址) : 用于存储博客部署后的静态文件.

可选 :

• 自己的 域名 和 Cloudflare 账号, 用于后续配置 Cloudflare CDN 及个性化域名.

创建 Github Pages 仓库

登录你的 Github 账号并访问: https://github.com/new

在 Repository name 一框填入: {你的用户名}.github.io . 如 lovelyrua.github.io 点击 右下角绿色按钮 Create Repository

接下来便可跟随本文步骤指引搭建你的博客

安装 Hexo

本步骤参考 (Hexo官方文档 - 建站)

选择一个合适目录储存项目, 这里创建一个 hexo-blog 文件夹为例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

  # 创建并进入项目目录; `&&` 表示前一个命令成功执行后执行后一个命令
  $ mkdir hexo-blog && cd hexo-blog

  # 在当前目录下使用 nodejs 提供的包管理工具 `npm` 来安装 hexo 命令行工具 (hexo-cli).
  # 如果想要在任何目录下都能直接使用 `hexo` 命令, 可以使用 `npm install hexo-cli -g` 进行全局安装 ➊
  $ npm install hexo-cli

  # 初始化 hexo 项目 'blog', hexo 会在当前目录下创建文件夹并从 github 拉取模板.
  # `npx` 是 npm 自带的包执行工具, 它会查找本地 'node_modules/.bin' 中的命令
  # 如果上一步骤进行了全局安装, 这里就可以直接执行 `hexo init blog`
  $ npx hexo init blog && cd blog

  # 安装项目依赖. 此命令会根据目录下的 'package.json' 文件中 "dependencies" 字块安装所需依赖
  $ npm install

  # 启动 hexo 测试服务端
  $ npx hexo server
  # `server` 也可直接缩写成 `s`

  # 以上操作若过程无误 控制台会输出:
  # `INFO  Hexo is running at http://localhost:4000/ .`

此时在浏览器访问 http://localhost:4000/ 即可看到 hexo 的初始主题页面.

如果启动或后续步骤出现类似 Error: Cannot find module 'xxx' 的报错, 说明依赖安装不完整 用 npm install {报错提示缺少的依赖} 命令补充安装依赖即可; 若还是无法解决 可以尝试删除 node_modules 文件夹和 package-lock.json 文件后重新运行 npm install

➊ 全局安装:

! 当使用 -g 参数全局安装一个包时, npm 会将可执行文件链接到系统的 PATH 环境变量所包含的目录中 (如 Node.js 安装目录), 这样系统就能在任何位置识别 hexo 命令. ! 如果全局安装后命令仍不可用, 可能需要重启终端或检查系统 PATH 环境变量配置.

创建第一篇文章

作为一个静态博客框架, Hexo 不像 WordPress, QQ空间 或 新浪微博 那样提供在线编辑器让你随时随地编辑发布 它的工作流程更接近于开发者编写代码: 在本地创建文件 - 编辑内容 - 然后通过命令生成最终的网页文件并部署

本步骤参考 (Hexo官方文档 - 写作)

使用命令创建新文章:

确保终端位于 Hexo 项目的根目录 (即 blog 文件夹内). 然后执行以下命令:

1
2
3
4
5
6

  $ npx hexo new post "我的第一篇文章"
  # `new` 是创建命令, 'post' 是文章的布局 (layout), "我的第一篇文章" 是文章标题
  # 如果标题包含空格, 最好用引号括起来

  # 控制台会输出类似信息:
  # INFO  Created: ~/your/path/to/hexo-blog/blog/source/_posts/我的第一篇文章.md

! 这个命令会在 source/_posts/ 目录下创建一个名为 “我的第一篇文章.md” 的 Markdown 文件. ! post 是 Hexo 默认的文章布局, 你也可以创建其他布局 (如 draft 草稿, page 独立页面等).

编辑文章内容:

使用你喜欢的文本编辑器 (如 VS Code, Sublime Text, Obsidian 等) 打开刚刚创建的 .md 文件 你会看到文件顶部有一段由 --- 包裹的内容, 这叫做 Front-matter, 用于定义这篇文章的元数据:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

---
layout: post  # 文章布局, 自动根据命令生成
title: 我的第一篇文章  # 文章标题, 自动根据命令生成
date: 2025-04-09 20:15:00  # 文章创建时间, 自动生成
tags: [hello, markdown]  # 文章标签, 可以自行添加
---

# 这里是正文的开始
欢迎来到我的新博客!

这是我的第一篇文章，使用 **Markdown** 语法编写。

*   列表项1
*   列表项2

你可以在 — 下方开始使用 Markdown 语法编写你的文章正文 可以修改 title, 添加 tags (多个标签用逗号分隔或使用 YAML 列表格式). date 通常保持自动生成的时间即可.

本地预览:

编辑并保存好文章后回到终端 如果之前的 hexo server 还在运行, 可以先按 Ctrl+C 停止. 然后重新启动服务器进行预览：

1
2
3
4
5
6
7
8

# 清理之前构建的文件 (可选, 但修改配置或主题后需要执行)
npx hexo clean

# 生成静态文件 (可选, server 命令通常会自动处理)
npx hexo generate

# 启动本地服务器
npx hexo server

刷新浏览器中的 http://localhost:4000/, 你应该能在首页看到你新创建的文章 “我的第一篇文章” 的摘要或标题, 点击即可进入阅读.

本节涉及的命令及其缩写:

! npm i == npm install ! hexo n == hexo new ! hexo g == hexo generate ! hexo s == hexo server ! hexo d == hexo deploy ! hexo clean (无缩写)

将 Hexo 部署到 GitHub

现在你已经在本地创建并预览了你的第一篇文章. 下一步就是将博客发布到互联网上, 让其他人也能访问.

静态博客的优势在于, 生成的网站文件无需复杂的服务器端处理; 只要将这些文件托管在任何可公开访问的 Web 服务器上, 站点就能运行.

GitHub Pages 提供了一个免费的静态网站托管服务, 非常适合部署 Hexo 生成的静态博客. Hexo 提供了一键部署功能, 可以方便地将生成的静态文件推送到指定的 Git 仓库. 在此将演示 Hexo 提供的一键部署功能

本步骤参考 (Hexo官方文档 - 一键部署)

安装 Git 部署插件:

要使用一键部署, 首先需要根据自己要部署到的平台安装对应的 deployer 插件 安装针对 GitHub (或其他 Git 仓库) 的部署插件 hexo-deployer-git:

1

  $ npm install hexo-deployer-git

配置 _config.yml:

在部署前需要编辑 Hexo 项目的设置 在 _config.yml内填入必要的信息:

1
2
3
4
5
6
7
8

# 找到文件末尾的 `deploy` 配置项 
  deploy:
     type: git
     repo: https://github.com/用户名/用户名.github.io.git  # 修改仓库地址
     # ！！极其重要：替换成你自己的仓库地址！！
     # 例如: https://github.com/LovelyRua/lovelyrua.github.io.git
     branch: main  # GitHub Pages 仓库默认分支名
     # message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"  # 可选, 自定义 commit 信息

! type: 一键部署方式的类型, 这里必须是 git ! ! repo: 务必替换成你自己的 GitHub Pages 仓库地址. 这个仓库通常命名为 {你的GitHub用户名}.github.io. 可以使用 HTTPS 或 SSH 格式的地址. ! ! branch: 指定要将静态文件推送到哪个分支. 对于 用户名.github.io 这种仓库, 通常是 main 或 master 分支作为 GitHub Pages 的源. 具体依赖于你的仓库设置.

保存文件后 执行部署命令

1
2
3

  $ npx hexo deploy
  # 这个命令会先执行 `hexo generate` (生成静态文件到 public 目录)
  # 然后将 public 目录的内容推送到你配置的 repo 和 branch。

首次部署可能遇到的情况:

Git 身份未配置: 如果你之前没有在本机配置过 Git 的用户名和邮箱, 可能会看到类似以下的提示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

  PS X:\your\path\hexo-blog\blog> npx hexo deploy
	INFO  Validating config
	INFO  Deploying: git
	INFO  Setting up Git deployment...
	Initialized empty Git repository in X:/your/path/hexo-blog/blog/.deploy_git/.git/
	Author identity unknown
	
	*** Please tell me who you are.
	
	Run
	
	git config --global user.email "you@example.com"
	git config --global user.name "Your Name"
	
	to set your account's default identity.
	Omit --global to set the identity only in this repository.
	
	...

这是因为 Git 必须提供提交时必要的身份信息 如上情况只需按照提示 通过这两条命令设置 Git 的默认身份信息:

1
2

  $ git config --global user.email "{你的邮箱}"
  $ git config --global user.name "{你的名字}"

设置完成后再重新执行 npx hexo deploy 验证部署结果:

1

  INFO  Deploy done: git

当终端输出如上日志即说明部署成功了 访问你的 Github Pages 仓库, 即可看到编译出的网页静态文件. 稍等片刻 GitHub Pages 需要一点时间来更新

🎉 恭喜你!

至此步骤在浏览器打开 https://你的用户名.github.io/ 就可以访问你刚刚部署到 Github Pages 的博客了

如需编写新文章 只需重复从 步骤1.2 开始的操作

通过 Cloudflare CDN 加速国内访问

TODO…