Hexo 博客搭建指南

使用 Hexo Fluid 主题和 Cloudflare Pages 搭建个人博客的完整指南。

1 预先要求

1. Git
2. node.js
3. GitHub 账号
4. Cloudflare 账号

2 步骤

2.1 本地站点

1. 打开终端管理员，输入

   bash

   npm install -g hexo-cli

2. 在你喜欢的位置打开终端，输入

   bash

   hexo init myblog

   会新建一个 myblog 文件夹。你可以按照喜好命名。

3. 继续执行：

   bash

   cd myblog
   npm install

4. 继续执行：

   bash

   hexo clean
   hexo g
   hexo s

5. 打开浏览器，输入 http://localhost:4000/，可见：

   

这样，我们本地的网站就初步构建好了。

2.2 部署

2.2.1 GitHub

1. 登录 GitHub，新建一个 repository，名字最好和刚刚 hexo init 的名字一致，权限设置 Private，其余保持默认。

2. 在博客根目录下：

   bash

   git init

3. 设置用户名、邮箱地址、远程存储库：

   bash

   git config user.name "你的 GitHub 用户名"
   git config user.email "你的 GitHub 邮箱地址"
   git remote add origin <你的仓库地址>

4. 提交并推送代码：

   bash

   git add .
   git commit -m "Initial Commit"
   git push

这样，网站代码已经上传到 GitHub 的仓库了。

2.2.2 Cloudflare

1. 登录
2. 计算和 AI -> Workers 和 Pages -> 创建
3. Pages -> 连接到 git 里，关联 GitHub 账号，选择仓库，开始设置
4. 按喜好修改名称 (同时域名也会改变)，构建命令写 npx hexo generate，构建输出目录写 public，保存并部署
5. 等待构建成功

约一分钟后网站可以访问了。

2.3 Hello World

1. 在博客根目录下:

   bash

   hexo new "first"

2. 转到 source/_post，找到新建的 md 文件，用你喜欢的 markdown 编辑器编辑

3. 修改好后，在博客根目录下：

   bash

   hexo clean
   hexo g
   hexo s

4. 打开浏览器，输入 http://localhost:4000/，可以看到修改生效了

5. 如果确认可以提交了，在博客根目录下：

   bash

   git add .
   git commit -m "up"
   git push --force-with-lease

6. 约一分钟后访问你的网址，可以看到修改生效了

2.4 自定义站点样式

hexo 提供许多主题和配色方案，个人推荐 fluid。

它的优点比较显著：

• 免费 & 开源
• 配置简单
• 文档丰富

2.4.1 fluid 主题配置

2.4.1.1 安装与启用

npm install --save hexo-theme-fluid

修改_config.fluid.yml 里 theme: fluid

2.4.1.2 自定义配置

详见_config.yml 和官方文档

一些自定义的配置：

• 背景图全屏 & 随日夜模式切换 & 毛玻璃效果
• 运行时间 & 版权声明优化 & 关于页评论
• 自定义字体

2.4.1.3 评论功能

comments:
enable: true
type: # your scheme

1. valine

   需要先注册 LeanCloud，创建应用，点击，再在设置 - 安全中心 - Web 安全域名里填你的域名

   配置：

   yaml

   valine:
   appId: xxx
   appKey: yyy
   meta: ['nick', 'mail']
   placeholder: '说点什么吧...'
   serverURLs: https://xxx.yyy

   注意

   如使用国际版 LeanCloud，可能会出现国内无法加载评论的问题；使用国内版则需要实名。

2. waline

   相对复杂但效果更好，详见这篇博客

   注意

   国内无法使用

3. twikoo

   步骤较繁琐，详见这篇博客

3 技巧

1. 上传某些文件到网站根目录：

   直接放到 source 目录下即可

   或执行：

   bash

   npm install -g wrangler
   wrangler login
   wrangler pages publish <本地文件夹路径> --project-name=<项目名>

4 常见问题

1. npm 安装报错

   • 尝试使用管理员权限运行
   • 可以使用 npm config set registry https://registry.npm.taobao.org 切换到国内镜像

2. hexo 命令未找到

   • 确保已正确安装 node.js
   • 检查环境变量是否正确设置

3. 更改未生效

   • 确保已执行以下命令

     bash

     hexo clean
     hexo g
     hexo s

   • 网页 build、上线和更新需要一定时间，请过几分钟后再次查看

4. 个人博客需要备案吗？

   • 未设置自定义域名，只使用 *.pages.dev：不需要
   • 网站的自定义域名不使用国内的域名：不需要
   • 网站的自定义域名使用国内的域名：需要