第一期： 零基础快速搭建个人博客， Hexo + GitHub Pages + Cloudflare Pages 全流程指南， 免费部署超详细！

第一期: 零基础快速搭建个人博客, Hexo + GitHub Pages + Cloudflare Pages 全流程指南, 免费部署超详细!

1. 前期准备工作

  1. Node (必备)
  2. Git (必备)
  3. VSCode (可选)
  4. 域名, 建议配置一个域名以避免被 “防火墙” 阻挡, 国内域名需要备案，备案周期较长
  5. 配置 Cloudflare, 托管域名
  6. Hexo 官方主题展示: Themes

2. 安装 Node

  1. 从 Node 官网 找到适合自己系统的版本
  2. 我这里部署在 VPS 上，操作系统是 CentOS Stream 9 64位 UEFI版
  3. Linux系统 下载压缩包 node-v22.11.0-linux-x64.tar.xz
  4. 验证安装成功，在命令行中输入 node -v 和 npm -v 验证版本信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 安装 curl 和 bash（如果还没有安装）
sudo dnf install -y curl bash

# 使用 SCP 将 Node.js 的安装包从本地机器传输到远程服务器上的指定目录
scp node-v22.11.0-linux-x64.tar.xz root@服务器IP地址:~/.

# 在远程服务器上解压缩 Node.js 安装包
tar -xvf node-v22.11.0-linux-x64.tar.xz

# 创建 Node.js 命令的符号链接到系统的 bin 目录，使其全局可用
mv node-v22.11.0-linux-x64 /usr/local/lib/nodejs

# 创建 npm 命令的符号链接到系统的 bin 目录，使其全局可用
sudo ln -s /usr/local/lib/nodejs/bin/node /usr/local/bin/node

# 检查 Node.js 的版本，验证安装是否成功
sudo ln -s /usr/local/lib/nodejs/bin/npm /usr/local/bin/npm

# 检查 Node.js 的版本，验证安装是否成功
node -v

# 检查 npm 的版本，验证 npm 是否正确安装并可用
nmp -v

3. 安装 Git

  1. 从 Git 官网 下载适配的 Git 版本
  2. Linux 系统 安装 Git
1
2
3
4
5
6
7
8
# 安装 EPEL 存储库
dnf install epel-release

# 安装 Git
dnf -y install git

# 查看 Git 版本
git -v

4. 配置 Git 密钥并连接 Github

  1. 常用 Git 命令
1
2
3
4
5
6
7
8
# 显示当前 Git 配置文件中的所有配置项
git config -l

# 显示系统级（适用于所有用户）的 Git 配置文件中的配置项
git config --system --list

# 显示全局（用户级） Git 配置文件中的配置项
git config --global --list
  1. 配置用户名和邮箱
1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
  1. 通过 git config -l 验证是否成功

  1. 配置公钥连接 Github
1
2
# 生成 SSH 公钥
ssh-keygen -t rsa -C "你的邮箱"

1
2
3
4
5
6
# 一路回车生成密钥，进入 .ssh 文件夹复制 id_rsa.pub 公钥内容，配置到 Github 的 SSH 设置中
cd .ssh

ls

cat id_rsa.pub

  1. 将 SSH KEY 配置到 Github

    进入 GitHub，点击右上角头像 选择 settings，进入设置页选择 SSH and GPG keys，名字随便起，公钥填入 key 那一栏。

  1. 测试连接
1
ssh -T git@github.com

5. 创建 Github.io 仓库

  1. 点击右上角的 + 按钮，选择新建仓库，命名格式为 <用户名>.github.io，（注意：前缀必须为用户名）选择公开 Public。
  2. 点击 Creat repository 进行创建即可。

6. 初始化Hexo博客

  1. 创建文件夹保存博客源码
1
mkdir ~/hexo
  1. 设置 npm 镜像源
1
2
3
4
5
# 设置 npm 镜像源为华为镜像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

# 设置 npm 镜像源为阿里镜像源
npm config set registry https://registry.npmmirror.com/
  1. 安装 Hexo （注意：如果出现报错就是没有设置环境变量）
1
npm install -g hexo-cli && hexo -v
  1. 设置环境变量
1
2
3
4
5
vim ~/.bashrc

export PATH="/usr/local/lib/nodejs/lib/node_modules/hexo-cli/bin:$PATH"

source ~/.bashrc
  1. 使用 hexo -v 命令验证安装成功

  1. 初始化 hexo 项目安装依赖
1
hexo init blog-demo #因为网络问题执行不了这条命令，就换下面我提供的安装方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# GitHub下载软件包
https://github.com/hexojs/hexo-starter

# Windows上传软件包到vps上
scp hexo-starter-master.zip root@IP地址:~/.

# 将压缩包解压
unzip hexo-starter-master.zip

# 文件重命名
mv hexo-starter-master blog-demo

# 切换到博客目录
cd blog-demo

# 安装 Node.js 项目中的依赖包
npm i
  1. 初始化项目成功截图

  1. 启动项目并验证
1
hexo cl && hexo s

  1. 在浏览器中访问 https://localhost:4000/ 以查看效果

7. 将静态博客挂载到 Github Pages

  1. 修改 _config.yml 文件，配置 repository 为你的 GitHub 地址，分支改为 main：
1
2
3
4
5
6
102 # Deployment
103 ## Docs: https://hexo.io/docs/one-command-deployment
104 deploy:
105   type: git
106   repository: git@github.com:zetman-lz/zetman-lz.github.io.git
107   branch: main

  1. 安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. 部署到 GitHub
1
2
3
4
5
6
7
# Git BASH终端
hexo clean && hexo generate && hexo deploy  

# 或者

# VSCODE终端
hexo cl; hexo g; hexo d
  1. 部署成功会出现以下信息

  1. 访问 https://<用户名>.github.io/ 以查看博客

8. 将静态博客挂载到 Cloudflare Pages

  1. 通过 Cloudflare Pages 连接 Git 仓库，左边找到 Workers和Pages，点击右上角创建。
  2. 登录 GitHub，点击保存并部署。
  3. 部署成功后，访问 Cloudflare 提供的链接。

（注意：如有自定义域名，可以在 Cloudflare Pages 中绑定。没有建议去申请，这样博客就不被墙了。）

  1. 部署成功后点击访问

9. 基本使用

  1. 新建一篇博文
1
hexo new 这是一篇新的博文

（注意：编辑 _posts 文件夹中的新建文章，使用 Markdown 语法编写内容。）

  1. 本地预览
1
hexo cl && hexo s
  1. 推送到 GitHub
1
hexo cl && hexo g && hexo d