Hexo

作者: KongXH

发表于2025.06.21

更新于2025.11.26

访问量:

实用工具

工具技术分享

个人博客搭建

本博客的搭建参考爱扑bug的熊

搭建方案

搭建方案为：hexo + github + netlify + cloudflare

• 使用hexo框架，博客文件采用GitHub托管，netlify部署博客网站，cloudflare加速
• 该方案不需要购买服务器也不需要备案，只需要购买域名，使用cloudflare加速即可
• 原教程博主使用的是Mac系统，我是Windows系统，但是实际操作并未太大差别

环境配置

安装node.js，参考网上教程下载安装，然后在系统环境变量中添加node.js路径，确保可以全局使用。
我之前做前端Vue项目时，node.js是全局安装过，所以这里没有重新安装。

检查node.js和npm是否安装成功

node -v   # 查看node.js版本
npm -v    # 查看npm版本

npm默认官网源下载较慢，可以切换为淘宝源：

npm config set registry https://registry.npmmirror.com

博客搭建

安装

有了npm包管理工具可以直接指令安装hexo：

npm install -g hexo-cli    # 全局安装hexo

-g 表示全局安装，安装后可以在任何地方使用hexo命令

这里有一个问题我先按下不表，后文会提。

初始化博客

执行命令：

hexo init 博客项目名称    # 初始化博客

等待片刻后，终端显示：

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
# 一些可能的中间信息
INFO  Start blogging with Hexo!

出现Start blogging with Hexo!表示初始化完成。

进入博客目录

cd 博客项目名称

安装所需依赖

npm install  # 安装的依赖项在package.json文件的dependencies字段中可以看到

启动博客

hexo server    # 本地运行server服务预览，浏览器打开http://localhost:4000即可看到博客

添加建站脚本

为了后续netlify部署方便，我们在package.json里面添加一个命令：

{
    "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server",
        "netlify": "npm run clean && npm run build" // 这一行为新加
    }
}

npm run clean && npm run build 的作用是先清除之前的旧的博客文件，然后重新生成新的博客静态文件，避免netlify部署时意外的错误。

GitHub托管

程序员必备的 git 和 github 使用不会的小伙伴可以自己去学习一下，对于项目开发管理十分有益。

在博客项目目录中将项目推送到远端仓库中：

git init                   # 初始化git
git remote add origin URL  # 添加远程仓库
git add .                  # 添加所有文件到git
git commit -m "博客"       # 提交文件到git
git push origin main       # 推送到远程仓库

Netlify建站

Netlify 是一个提供静态资源网络托管的综合平台，提供CI服务，能够将托管 GitHub，GitLab 等网站上的 Jekyll，Hexo，Hugo 等代码自动编译并生成静态网站。

Netlify 有如下的功能:

• 能够托管服务，免费 CDN
• 能够绑定自定义域名
• 能够启用免费的TLS证书，启用HTTPS
• 支持自动构建
• 提供 Webhooks 和 API

Netlify 的部署流程

1. 登陆注册 Netlify
   使用GitHub账号可以直接注册登录

2. 在Netlify中添加新站点
   Add new site -> Import an existing project 点击后进入下一个界面

3. 连接 GitHub
   Connect to Git provider 选择 GitHub 选项

4. 选择 GitHub 仓库
   Pick a repository from GitHub 选择之前创建的博客项目

5. 设置部署
   选择分支 - 默认为 main/master 分支，可以手动选择其他分支
   其余默认，将Build command设置为npm run netlify

6. 访问博客
   构建完成后将显示URL，点击后即可访问个人博客
   博客可以自行设置二级域名，只需在Project configuration下Change project name即可，例如我设置Netlify博客项目名称为kongxh，我可以直接在kongxh.netlify.app网址上直接访问博客网站

配置域名

该方法建站的优势便在于不需要服务器不用备案，只需购买一个域名即可。其实到上一步（即XXX.netlify.app）已经可以访问博客网站了，之后每次push代码后，Netlify会自动部署，但是都说是”个人博客”了，有一个自己的域名岂不是更香？

廉价便宜的域名推荐 6位数字.xyz 该域名，价格十年60r左右，该博客网站的域名就是该域名，我买了一年续费了三年，价格一共花费25r左右。对于大学生来说这个域名价格真的心动，听兵哥说他的一个域名一年都要90r，大学生泪目了(T_T)

之后会将如何购买配置6位数字.xyz域名，该博客暂且默认大家都有域名。

设置域名解析

即将要考试的计算机网络开始攻击我😭

字段	值
Type	CNAME
Name	自己域名的二级域名，如kblog (kblog.250603.xyz)
value / content	XXX.netlify.app
TTL	自动即可

Netlify 设置

在Netlify中 Domain management 板块 Add custom domain 添加自己的域名，一直根据提示操作continue即可。
添加后在域名后的Options板块中，点击Set up Netlify DNS 按钮设置netlify本身对外国CDN的支持。

Cloudflare 设置

Cloudflare 是一个提供CDN服务的平台，可以加速博客网站的访问速度，并且可以设置自己的域名解析。
该部分我将之后在讲解6位数字.xyz域名时再详细讲解。

工具技术分享