》》 将心比心，换位思考；务实求索，无限进步 《《
##前言##
本文将基于实操使用 Hexo 静态博客框架, 并借助 GitHub Pages 和 Cloudflare CDN 服务, 搭建一个无需租用服务器, 无需支付任何费用即可访问的高性能个人博客站点. 本文旨在帮助读者了解以下内容:
✨>_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
接下来便可跟随本文步骤指引搭建你的博客
1.1 安装 Hexo
选择一个合适目录储存项目, 这里创建一个 hexo-blog 文件夹为例:
# 创建并进入项目目录; `&&` 表示前一个命令成功执行后执行后一个命令
$ 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 环境变量配置.
1.2 创建第一篇文章
作为一个静态博客框架, Hexo 不像 WordPress, QQ空间 或 新浪微博 那样提供在线编辑器让你随时随地编辑发布
它的工作流程更接近于开发者编写代码: 在本地创建文件 - 编辑内容 - 然后通过命令生成最终的网页文件并部署
使用命令创建新文章:
确保终端位于 Hexo 项目的根目录 (即 blog 文件夹内). 然后执行以下命令:
$ 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, 用于定义这篇文章的元数据:
---
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 停止. 然后重新启动服务器进行预览：
# 清理之前构建的文件 (可选, 但修改配置或主题后需要执行)
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 (无缩写)
2. 将 Hexo 部署到 GitHub
现在你已经在本地创建并预览了你的第一篇文章. 下一步就是将博客发布到互联网上, 让其他人也能访问.
静态博客的优势在于, 生成的网站文件无需复杂的服务器端处理;
只要将这些文件托管在任何可公开访问的 Web 服务器上, 站点就能运行.
GitHub Pages 提供了一个免费的静态网站托管服务, 非常适合部署 Hexo 生成的静态博客.
Hexo 提供了一键部署功能, 可以方便地将生成的静态文件推送到指定的 Git 仓库.
在此将演示 Hexo 提供的一键部署功能
安装 Git 部署插件:
要使用一键部署, 首先需要根据自己要部署到的平台安装对应的 deployer 插件
安装针对 GitHub (或其他 Git 仓库) 的部署插件 hexo-deployer-git:
$ npm install hexo-deployer-git
配置 _config.yml:
在部署前需要编辑 Hexo 项目的设置
在 _config.yml内填入必要的信息:
# 找到文件末尾的 `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 的源. 具体依赖于你的仓库设置.
保存文件后 执行部署命令
$ npx hexo deploy
# 这个命令会先执行 `hexo generate` (生成静态文件到 public 目录)
# 然后将 public 目录的内容推送到你配置的 repo 和 branch。
首次部署可能遇到的情况:
Git 身份未配置: 如果你之前没有在本机配置过 Git 的用户名和邮箱, 可能会看到类似以下的提示:
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 的默认身份信息:
$ git config --global user.email "{你的邮箱}"
$ git config --global user.name "{你的名字}"
设置完成后再重新执行 npx hexo deploy
验证部署结果:
INFO Deploy done: git
当终端输出如上日志即说明部署成功了
访问你的 Github Pages 仓库, 即可看到编译出的网页静态文件.
稍等片刻 GitHub Pages 需要一点时间来更新
🎉 恭喜你!
至此步骤在浏览器打开 https://你的用户名.github.io/
就可以访问你刚刚部署到 Github Pages 的博客了
如需编写新文章 只需重复从 步骤1.2 开始的操作
3. 通过 Cloudflare CDN 加速国内访问
TODO...