1 前言

Hexo 是一个快速、简洁且高效的静态博客生成器。它借助 Node.js 进行开发，能够将我们用 Markdown 所撰写的文章内容，在短短几秒内转化为静态 HTML 页面。这意味着我们只需专注于文章本身的创作，利用简单易懂的标记语言书写内容，而无需深入掌握复杂的网页开发知识，Hexo 就能帮我们快速生成可以展示的网页，为搭建个人网站提供了极大的便利。

前几日有一好友向我求助，想搭建一个博客网站但不想有太多的资金投入，我将之前写过的一篇使用云服务器 + 宝塔面板部署 Hexo 的教程文章发给了他，但他说也不太想购买服务器，这下就有点难到我了，后来突然回想起我开始接触个人博客时，网上很多 免费、零成本 等字眼的博客搭建教程，当时我对此类文章是将信将疑的，没想到现在让我不得不翻出此类文章，而经过阅读学习后发现免费不仅是真的，有的还特别有意思，于是我协助好友使用 Hexo + GitHub + CloudFlare 成功搭建出了零成本博客，通过对此过程的总结学习，我将一些 Hexo 的部署方法归纳整理并且实操验证写下了这篇文章。

本文将使用 GitHub Pages、Cloudflare、Vercel 和 Netlify 四种方式部署 Hexo 项目，下面是对四种方式的简单比较：

  • GitHub Pages：部署流程相对简单，依赖本地构建部署，需要一个公开仓库。
  • Cloudflare：网络性能强大，每月 500 次构建使网站不得频繁更新。
  • Vercel：有快速的构建和部署速度，默认域名在国内无法直接访问需额外自定义域名。
  • Netlify：部署流程简单直观，免费账户功能限制较多。

2 准备工作

如果你的设备上已经安装过 Node.js 和 Git，并且拥有 GitHub 账户，那么你可以跳过本节。

2.1 安装 Node.js

Node.js 是 Hexo 运行的基础依赖，我们首先要进行安装。可以前往 官网 根据自己的操作系统选择合适的版本进行下载安装。这里推荐选择支持更稳定的 LTS 版本。

在选择自定义安装程序时，建议选择 Add to PATH，这样就免去了手动配置环境变量的麻烦。

image-20231213204028814

分别执行 node -v 和 npm -v 来检查是否被正确安装或是否可用。

image-20231213204347624

2.2 安装 Git

Git 在 Hexo 部署过程中起着重要作用，前往 官网 下载最新版本 Git 并按照指引进行安装。

使用 git -v 命令检查 Git 是否安装成功。

image-20231213203205991

2.3 注册 GitHub（部分方式需使用）

GitHub 是部分部署方式的过程所必需的，进入 官网，点击 “sign up” 来到注册页面，按照提示填写有效信息。请慎重设置用户名，因为它可能成为你的域名内容。

3 安装 Hexo

如果你已经拥有了一个 Hexo 项目，那么可以跳过本节。

在确保已经安装好 Node.js 和 npm 的前提下，在本地打开 CMD 命令提示符，输入并执行 hexo-cli 的全局安装命令。

1
npm install -g hexo-cli

初始化 Hexo 项目，在想要创建项目的目录下打开 CMD 命令提示符，使用 hexo init 命令使当前目录作为根目录创建项目，若想新建一个文件夹作为项目根目录，只需在 hexo init 命令后添加项目名称。

1
2
hexo init  # 当前目录为根目录
hexo init myblog  # 新建文件夹为根目录

初始化完成后，会在该目录下生成一系列的文件夹和文件。

  • _config.yml：Hexo 项目的核心配置文件。配置网站信息、部署设置等各种参数都需要这个文件。
  • package.json：记录项目所依赖的各种模块以及项目的一些基本信息。当需要分享项目或者在其他环境重新安装依赖时使用。
  • scaffolds\：文章和页面初始结构模板。当创建文章或者页面时，会根据该文件夹下的对应模板来新建文件。
  • source\：用于存放文章文件、页面文件和图片等资源，其中文章就存放在该文件夹下的 _posts 子文件夹中。

当一切准备就绪后，在 Hexo 项目根目录下使用 hexo g 和 hexo s 命令构建并预览该博客。

1
hexo g && hexo s

若出现疑似端口问题的报错，可以尝试重启 winnat 服务，具体方法请自行搜索。

通过预览你可能会感觉默认的主题并不好看，那么你可以通过官网主题库或者其他途径找寻感兴趣的主题，这里推荐本站同款。

1
git clone -b main https://github.com/talen8/hexo-theme-flecui.git themes/flecui

以上完成后你可以通过 Hexo 文档和相应主题文档来进行网站配置，你可以随时通过 hexo cl && hexo g && hexo s 命令预览博客。

4 部署到 GitHub Pages

目前版本的 GitHub Pages 仅支持公开仓库使用，页面文件将会被直接暴露在网络上。

4.1 创建仓库

在浏览器打开 GitHub 并登录你的账户，点击新建仓库。仓库名称为 用户名.github.io，这里用户名必须是你的 GitHub 用户名，另外需要注意，这个仓库需是公开的，不然无法使用 GitHub Pages。

image-20241219230542403

4.2 配置本地与 Github 关联

在本地博客根目录打开命令行工具安装 hexo-deployer-git 部署插件。

1
npm install hexo-deployer-git --save

在本地博客根目录使用文本编辑器打开 _config.yml 核心配置文件，找到 deploy 部分进行配置。

1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git
  branch: main

这里的 repo 就是你创建的 Github 仓库的地址，可以根据上方示例填写，也可以进入仓库查看。

image-20241220211154447

确保 hexo-deployer-git 插件和 deploy 配置正确后，就可以通过一系列 Hexo 命令将生成的文章部署到 Github 上了。

1
2
3
hexo clean
hexo generate
hexo deploy

4.3 GitHub Pages 配置

部署完成后打开 GitHub 仓库可以发现 main 分支下不再为空，GitHub Pages 也默认开启，如果需要更改，点击 Settings 设置选项卡，在页面左侧找到 Pages 页面选项，在这里可以配置来源、分支、自定义域名等内容，然后点击 Save 保存按钮。

image-20241220215330536

最后就可以通过 你的GitHub用户名.github.io（仓库名）访问你的博客了。

5 部署到 CloudFlare

静态页面部署需要使用 Cloudflare Pages，他是一个用于构建和部署网站的平台。

5.1 注册 Cloudflare

前往官网注册一个 Cloudflare 账号，需要使用一个邮箱，官网为 https://cloudflare.com，注册地址为 https://dash.cloudflare.com/sign-up。

image-20241220224507915

我们需要使用 Cloudflare Pages 功能，它的免费版本的功能有一些限制，但对于一个初步的个人博客网站来说绰绰有余。

  • 并发构建数为 1（同一时刻只能进行一个 pages 的构建）
  • 每月构建次数上限为 500 次
  • 一个 pages 项目最多可绑定 100 个自定义域名
  • 单个 pages 站点最多包含 20000 个文件，单个文件最大为 25MB
  • 每日限制函数请求数为 100000 次，超出后请求会失败
  • 不限制静态文件请求次数

5.2 创建 GitHub 仓库

在浏览器打开 GitHub 并登录你的账户，点击新建仓库。仓库名称自定义，可见性建议设置为私有，避免 Hexo 项目中某些可能的密钥直接暴露在网络。

image-20241221181056018

在本地博客根目录打开命令行工具将项目提交到仓库中。（注意：在提交之前请删除根目录下的 yarn.lock 文件，否则后续会出现构建失败问题）

1
2
3
4
5
6
git init
git add .
git commit -m "myblog"
git branch -M main
git remote add origin https://github.com/你的GitHub用户名/你的GitHub仓库名称.git  # git remote add origin [仓库URL]
git push -u origin main

后续本地 Hexo 项目有修改只需要使用 Git 工作流程提交命令

1
2
3
git add .
git commit -m "提交信息"
git push

以上完成后你的本地 Hexo 项目就成功提交到 GitHub 仓库里了，建议使用 VSCode Git 工具或者 GitHub Desktop 简化流程。

5.3 Cloudflare Pages 配置

在控制台点击侧边栏的 Workers 和 Pages，然后点击页面上的 Pages，最后点击连接到 Git。

image-20241221175423340

连接绑定你的 GitHub 账户来获取你的仓库，账号授权后你可以在应用程序集成中设置仓库访问权限。

image-20241221200427582

设置完成后自动跳转回 Cloudflare 控制台部署站点引导的选择存储库步骤，选择你将要部署站点的仓库，确认账户和数据库无误后点击开始设置。

image-20241221200726941

在设置构建和部署步骤中完成相关设置：

  • 项目名称：自定义，将作为域名内容
  • 生产分支：结合实际情况，若完全按照本教程进行就是 main
  • 框架预设：这里没有 Hexo，所以设置为无
  • 构建命令：npm run build
  • 构建输出目录：public

image-20241221201840578

在部署站点步骤中耐心等待一会，出现域名表示部署完成，访问链接能够打开页面表明部署成功，如果页面无法访问请再耐心等待一会，可能是网络问题导致。

image-20241221202624018

操作进行到这里就基本完成了，此后你的 Hexo 项目每次提交至 GitHub 都会自动再次构建部署。

6 部署到 Vercel

Vercel 提供了一个云平台，并且能够识别仓库为 Hexo 项目，简化了操作流程，降低了出错风险。

6.1 注册 Vercel

前往 Vercel 官网注册一个账户，可以直接连接你的 GitHub 账户。

image-20241221205138455

6.2 创建 GitHub 仓库

同本文 5.2 章节。

6.3 导入仓库

首先连接你的 GitHub 账户，你可以在应用程序集成中设置仓库访问权限，在构建引导页面中导入 Git 仓库，首先找到正确的 GitHub 账户和仓库，点击 Import 按钮。

image-20241221210315110

在新建项目中完成相关设置，Project Name 可自定义，Framework Preset 选择 Hexo，其它项保持默认即可，点击 Deploy 按钮部署。

image-20241221211310245

耐心等待一会出现预览页面即完成导入和部署。

image-20241221211859656

6.4 配置域名

部署完成后打开仪表盘，网站自动绑定三条默认域名，但由于在国内域名被污染，所以需要绑定其它域名。

image-20241221212750834

点击右上角 Domains 按钮进入项目域名配置页，添加一个域名，并按照要求在域名提供商处添加 CNAME 记录。

image-20241221213242642

最后通过绑定的自定义域名成功访问到个人博客。

7 部署到 Netlify

Netlify 是一个提供静态网站托管的服务，使用 Hexo+GitHub+Netlify 可以以最快的速度部署一个网站。

7.1 注册 Netlify

在 Netlify 官网注册一个账号，可以使用你的 GitHub 账户授权注册，然后根据提示进行账户配置。

image-20241221214801510

7.2 创建 GitHub 仓库

同本文 5.2 章节。

7.3 开始部署

在引导中选择 GitHub 来导入你的 GitHub 仓库，你可以在应用程序集成中设置仓库访问权限。

image-20241221215625407

选择正确的 GitHub 账户和仓库开始部署。

image-20241221220034766

然后耐心等待一会，平台会自动识别仓库为 Hexo 项目并按照预设开始部署，部署完成后就可以通过平台分配的默认域名访问网站了。

image-20241221220422886

8 写在最后

通过以上多种部署方法的介绍，我们可以看到利用 Hexo 搭建个人博客方法众多，不仅操作过程十分简单，还基本实现了零成本搭建，降低了技术门槛和资金门槛，选择一个适合自己的部署方式，搭建一个有趣的个人博客吧。