HEXO搭建

前言

在当今数字化的时代，博客作为一种重要的表达和交流工具，已经变得不可或缺。无论是个人还是企业，写博客都有其独特的价值和作用。首先，博客为个人提供了一个分享知识、经验和观点的平台，使人们能够在全球范围内相互学习和交流。其次，博客是企业品牌建设和营销的有效手段，通过发布有价值的内容，企业可以吸引潜在客户，提升品牌知名度。此外，博客还有助于提升写作和思考能力，培养自我表达的技巧，并记录个人成长的历程。总之，在这个信息爆炸的时代，博客不仅是信息传播的重要媒介，更是个人与社会互动、成长和发展的重要途径。

0成本部署博客

所以，我们特地准备了一份教程，教你如何将Hexo博客部署到Cloudflare Pages或Vercel，零成本搭建属于你自己的博客平台。不需要复杂的技术背景，只要跟着我们的步骤，你就能轻松创建和管理自己的博客，开始你的创作之旅。

你需要准备的东西

• Github 账号

• Cloudflare/Vercel 账号，其中一个即可

• Github Desktop （如果你熟练使用Git可以忽略）

• Visual Studio Code

• Nodejs （包含NPM包管理器）

安装 Node.js

Node.js 为大多数平台提供了官方的 安装程序 。对于中国大陆地区用户，可以前往 淘宝 Node.js 镜像 下载。

其它的安装方法：

• Windows：通过 nvs （推荐）或者 nvm 安装。
• Mac：使用 Homebrew 或 MacPorts 安装。
• Linux（DEB/RPM-based）：从 NodeSource 安装。
• 其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导 。

对于 Mac 和 Linux 同样建议使用 nvs 或者 nvm，以避免可能会出现的权限问题。

Windows 用户
使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

For Mac / Linux 用户
如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误，请遵循 由 npmjs 发布的指导 修复该问题。强烈建议 不要 使用 root、sudo 等方法覆盖权限

Linux
如果您使用 Snap 来安装 Node.js，在 初始化 博客时您可能需要手动在目标文件夹中执行 npm install。

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

Hexo的安装和使用

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

npm install hexo

安装以后，使用以下方式执行 Hexo：

npx hexo <command>

创建Hexo项目

假设你使用了第一条命令，则是全局安装，它会安装在你 Windows

在 Windows 上，全局安装的 Node.js 模块通常会安装到如下路径：

C:\Users\你的用户名\AppData\Roaming\npm\node_modules

创建文件夹

我们需要选择一个位置才存放你的网站源码
我将它安装在E:\source\hexo

我们打开文件夹，在里面右键中选择 “在终端中打开”
或者 打开CMD

1. 输入 E:
2. 输入 cd /source/hexo

这个文件夹在下面的部分会被叫做工作目录
CD进去以后，输入以下命令

• hexo init (创建hexo项目)
• npm install （安装Hexo所需的依赖）

至此已经本地安装完成，输入以下命令可以一键启动

• npx hexo s 相当于 npx hexo sever

输入以下命令，可以生成静态文件，在目录/public

• npx hexo g 相当于 npx hexo generate

输入一下命令，可以清除静态文件

• npx hexo c 相当于 npx hexo clean

如何部署到Cloudflare / Vercel ？

众所周知，，，，

HEXO 部署在 Cloudflare Pages 教程

前置准备

在开始之前，你需要确保以下工具和账户已经准备好：

1. Node.js 和 npm：HEXO 需要 Node.js 环境。
2. Git：用来管理代码版本。我们推荐使用Github Desktop
3. Cloudflare 账户：用于创建和管理 Cloudflare Pages 项目。
4. HEXO 博客：一个已经创建并运行良好的 HEXO 博客。

步骤一：确保已经安装了HEXO

步骤二：生成静态文件

在本地生成 HEXO 的静态文件：

hexo generate

步骤三：使用 GitHub Desktop 推送代码到 GitHub

1. 打开 GitHub Desktop，点击 File > Add Local Repository，选择你的 HEXO 项目文件夹。
2. 在 GitHub Desktop 中，点击 Publish repository。
3. 填写仓库名称和描述，确保仓库设置为 Private 或 Public，然后点击 Publish Repository。

步骤四：在 Cloudflare Pages 创建项目

1. 登录到 Cloudflare ，进入 Pages。
2. 点击 Create a project。
3. 选择 Connect to Git 并授权 Cloudflare 访问你的 GitHub 仓库。
4. 选择你的 HEXO 项目仓库，并点击 Begin setup。

步骤五：配置项目

在配置页面进行以下设置：

1. Project name: 填写你的项目名称。
2. Production branch: 填写 main（或者你推送代码的分支名称）。
3. Build settings:

• Framework preset: 选择 None。
• Build command: 填写 npx hexo generate。
• Build output directory: 填写 public。

点击 Save and Deploy。

步骤六：部署

Cloudflare Pages 会自动检测你的 GitHub 仓库变化并触发部署。每次你推送代码到 GitHub 仓库时，Cloudflare Pages 都会自动构建并部署最新的代码。

验证部署

几分钟后，访问 Cloudflare Pages 提供的 URL，查看你的 HEXO 博客是否已经成功部署。

最后

至此，你已经成功将 HEXO 博客部署到 Cloudflare Pages。每次更新博客内容并推送到 GitHub 后，Cloudflare Pages 会自动重新部署最新版本。

如果你遇到任何问题，请参考 Cloudflare Pages 文档 或 HEXO 官方文档。

HEXO 部署到 Vercel 教程

本文将详细介绍如何将 HEXO 博客部署到 Vercel，并通过 GitHub Desktop 管理代码。

前置准备

在开始之前，你需要确保以下工具和账户已经准备好：

1. Node.js 和 npm：HEXO 需要 Node.js 环境。
2. GitHub Desktop：用于管理代码版本。
3. Vercel 账户：用于创建和管理 Vercel 项目。
4. HEXO 博客：一个已经创建并运行良好的 HEXO 博客。

步骤一：生成静态文件

在本地生成 HEXO 的静态文件：

hexo generate

这会在 public 文件夹中生成静态文件。

步骤二：初始化 Git 仓库

在你的 HEXO 项目根目录下初始化一个 Git 仓库，并提交代码：

git init
git add .
git commit -m "Initial commit"

步骤三：使用 GitHub Desktop 推送代码到 GitHub

1. 打开 GitHub Desktop，点击 File > Add Local Repository，选择你的 HEXO 项目文件夹。
2. 在 GitHub Desktop 中，点击 Publish repository。
3. 填写仓库名称和描述，确保仓库设置为 Private 或 Public，然后点击 Publish Repository。

步骤四：在 Vercel 创建项目

1. 登录到 Vercel ，点击右上角的 New Project。
2. 选择 Import Git Repository，并授权 Vercel 访问你的 GitHub 仓库。
3. 选择你的 HEXO 项目仓库，并点击 Import。

步骤五：配置项目

在配置页面进行以下设置：

1. Project Name: 填写你的项目名称。
2. Framework Preset: 选择 Other。
3. Root Directory: 留空（默认值）。

点击 Continue。

在 Build and Output Settings 中进行以下设置：

1. Build Command: 填写 npm run build。
2. Output Directory: 填写 public。

点击 Deploy。

步骤六：部署

Vercel 会自动检测你的 GitHub 仓库变化并触发部署。每次你推送代码到 GitHub 仓库时，Vercel 都会自动构建并部署最新的代码。

验证部署

几分钟后，访问 Vercel 提供的 URL，查看你的 HEXO 博客是否已经成功部署。

踩坑合集

1. 如果你删除了帖子，或者新增了帖子，PUSH上去不显示

你可以在本地

npx hexo clean  (清理Public的静态文件)

再重新生成静态文件

npx hexo g

把GIthub目录除了GIT文件夹全删掉（直接复制就覆盖了，所以要先删掉）
重新复制上去,然后再PUSH到Github，构建完成就会显示了

2. 构建失败

因为你本地没有构建public文件夹

需要本地生成静态文件，然后在PUSH上去构建，否则构建失败