Hexo博客搭建全流程

Hexo 博客搭建全流程

环境准备 → GitHub 关联 → Hexo 初始化 → 主题安装 → 配置部署，一篇搞定！

1. 环境准备

macOS

在 macOS 上，一切从终端（Terminal）开始。

安装 Homebrew（如果还没装）

1
/bin/bash -c "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh](https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh))"

一键安装所有工具

1
brew install node git gh

配置镜像源（加速 npm 下载）

1
npm config set registry [https://mirrors.huaweicloud.com/repository/npm/](https://mirrors.huaweicloud.com/repository/npm/)

Windows

在 Windows 上，推荐使用 PowerShell 或 Windows Terminal。

安装工具

  1. Node.js：从 Node.js 官网 下载 LTS 版本
  2. Git：从 Git 官网 下载安装
  3. GitHub CLI：从 gh 官网 下载安装

配置镜像源（加速 npm 下载）

1
npm config set registry [https://mirrors.huaweicloud.com/repository/npm/](https://mirrors.huaweicloud.com/repository/npm/)

配置 Git（可选但推荐）

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的邮箱"

2. 关联 GitHub (网页一键登录)

这是你要求的”网页登录”核心步骤，通过 gh 工具直接在浏览器完成授权。

启动登录流程

1
gh auth login

交互式选择

1
2
3
4
What account...? -> GitHub.com
Preferred protocol...? -> HTTPS (选这个，不需要 SSH)
Authenticate Git with your GitHub credentials? -> Yes
How would you like to authenticate...? -> Login with a web browser

网页授权

终端会给出一串 8 位验证码 并自动打开浏览器。在网页中输入代码，点 Authorize，回到终端就登录成功了。

3. 初始化 Hexo 博客（从零开始搭建）

注意：如果你已经有博客源码，请直接跳到 第 7 节：多设备同步与极简恢复。

选择一个你喜欢的文件夹（比如 Documents），开始搭建。

1
2
3
4
5
6
7
8
9
10
11
# 安装 Hexo 脚手架
npm install -g hexo-cli

# 创建博客文件夹
cd ~/Documents
hexo init my-blog
cd my-blog
npm install

# 本地预览（看到 "Hexo is running" 后访问 http://localhost:4000）
hexo s

4. 安装安知鱼 (Anzhiyu) 主题

根据教程 No.2 的配置，快速应用美化。

下载主题

1
2
git clone -b main [https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git](https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git) themes/anzhiyu
npm install hexo-renderer-pug hexo-renderer-stylus --save

应用配置

修改根目录 _config.yml，设置 theme: anzhiyu。

覆盖配置（macOS 命令）：

1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

5. 配置部署 (Deployment)

由于我们改用了 HTTPS 网页登录，部署配置也需要调整为 HTTPS 链接。

安装插件

1
npm install hexo-deployer-git --save

修改 _config.yml 末尾

将 repository 改为你的 GitHub 仓库 HTTPS 地址：

1
2
3
4
deploy:
  type: git
  repository: [https://github.com/你的用户名/你的用户名.github.io.git](https://github.com/你的用户名/你的用户名.github.io.git)
  branch: main

6. 传统的日常更新流程（本地部署）

如果你的博客是纯本地生成静态页面并推送到 GitHub，日常写博客需要记住这三组命令：

动作 命令
新建文章 hexo new "文章标题"
本地预览 hexo cl && hexo s
部署上线 hexo cl && hexo g && hexo d

7. 进阶：多设备同步与极简恢复（已有源码环境）🔥

如果你已经将博客源码备份到了 GitHub 的 code 分支（并配置了自动化部署），那么换电脑或重装系统时，在完成环境配置（第 1、2 步）之后，你完全不需要再去执行初始化和配置主题的繁琐步骤。

极简环境恢复

只需要依次执行以下三行命令，你的写作环境就全部回来了：

1
2
3
4
5
6
7
8
# 1. 克隆你的博客源码分支（注意替换为你的真实仓库地址）
git clone --branch code [https://github.com/yusialone/yusialone.github.io.git](https://github.com/yusialone/yusialone.github.io.git)

# 2. 进入博客目录
cd yusialone.github.io

# 3. 一键安装所有依赖
npm install

极简的写博与发布体验

在这种双分支（code 存源码，main 存页面）和自动部署的工作流下，你写完博文后的发布过程将被极度简化。不再需要 hexo d，只需把代码推送到云端即可：

1
2
3
git add .
git commit -m "Update new post"
git push

搞定！只要一 git push，剩下的页面生成和部署工作将由云端自动完成。

多设备同步

当你在本机修改了博客内容并推送后，在另一台 PC 上只需要以下步骤即可同步最新内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 1. 确保已经克隆过博客源码（首次需要，只需执行一次）
git clone --branch code https://github.com/yusialone/yusialone.github.io.git
cd yusialone.github.io
npm install

# 2. 之后每次在另一台 PC 开始写作前，执行同步
git remote update

# 3. 拉取最新代码
git pull origin code

# 4. 开始写作...
hexo new "新文章标题"

# 5. 写完后推送
git add .
git commit -m "在新电脑上完成文章"
git push

这样，无论你用哪台电脑，都能保持博客源码的同步。

常见问题：SSH 转 HTTPS 报错

找到原因了！ 你的 _config.yml 配置文件里，deploy 部分用的还是 SSH 地址（git@github.com:...），而我们之前配置的是 HTTPS 网页登录。

Git 在尝试通过 SSH 连接时找不到密钥，所以报错了。

解决方案

1. 修改 _config.yml (核心修复)

URL 部分：把 example.com 换成你真正的域名，否则博文里的图片和链接可能会失效。

1
2
3
# URL
url: [https://yusialone.github.io](https://yusialone.github.io)
root: /

Deployment 部分（重点）：把 repo 的地址从 git@ 开头换成 https:// 开头：

1
2
3
4
5
6
# Deployment
deploy:
  type: git
  # 替换为 HTTPS 地址
  repo: [https://github.com/yusialone/yusialone.github.io.git](https://github.com/yusialone/yusialone.github.io.git)
  branch: main

2. 激活 HTTPS 免密推送

由于你之前已经用 gh auth login 登录过了，现在只需要告诉 Git：”以后碰到 GitHub 的 HTTPS 链接，直接管 GitHub CLI 要授权。”

在终端执行：

1
gh auth setup-git

3. 清理并重新发布

配置改好后，执行这套”组合拳”：

1
2
3
4
5
6
7
8
# 1. 进入博客根目录
cd ~/Documents/blog/my-blog

# 2. 删除旧的部署缓存（防止旧地址残留）
rm -rf .deploy_git

# 3. 重新生成并发布
hexo clean && hexo g && hexo d

💡 为什么之前会报错？

报错原因：git@github.com 是 SSH 协议，它强制要求你的电脑里有一对 id_rsa 密钥。

解决方案：我们改用 https://github.com 协议，它会通过你网页登录后的 Token（由 gh 工具管理）进行身份验证。这更符合你”网页登录”的需求，也不用再去折腾 SSH 密钥了。