使用Github和vercel部署hexo博客

介绍

• GitHub是一个面向开源的代码项目的托管平台，你可以利用Github作为自己的服务器，将页面托管到Github上
• VS Code是微软发布的运行于多平台，针对于编写现代Web和云应用的跨平台源代码编辑器，你可以在这里编辑代码并将更改推送到Github上
• Vercel是一个云计算平台，主要用于托管、构建和部署静态网站和单页面应用程序

注册Github

在国内因为网络连接的问题，会时常出现网络不稳定导致打不开的情况的发生，因此我们可以下载steam++（Watt Toolkit）来加速我们的网络

勾选我们需要的服务在点击一键加速即可完成加速（按需求选）
然后我们打开Github的官网Github，点击右上角的Sign up完成注册

node.js

Git

VS Code

检查环境

同时按下 Win 键和 R 键打开运行窗口,输入`cmd`` ，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装。

1
2
3

git --version
node -v
npm -v

Hexo安装

选择一个磁盘，新建一个文件夹，自己重命名文件夹（这里的文件夹尽量选择英文路径下的，以方便以后操作，如：我的文件夹为：D:\example-hexo），这样博客相关文件将储存在此文件夹下。
然后我们打开VSCode，使用快捷键Shifit+K+O打开新建的文件夹，再使用快捷键Ctrl+~呼出终端

输入以下命令安装Hexo

1

npm install -g hexo-cli

Hexo初始化

输入以下命令初始化Hexo，更换括号里的内容，记得删除括号

1

hexo init (你的博客名称)

然后cd到新的文件夹并在新窗口打开,包括以后的所有命令都在新文件夹操作，因此你可以把此文件夹移至其他路径下

1
2

cd (你的博客名称)
code .

Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下：

本地显示Hexo

在新窗口执行以下命令

1
2

hexo g
hexo s

然后你可以访问http://localhost:4000/ 查看效果

Hexo安装主题

安装的主题以butterfly主题为例：

1

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

1

npm install hexo-theme-butterfly

1

npm install pnpm -g

修改 Hexo 根目录下的_config.yml，把主题改为 butterfly

1

theme: butterfly

更多详细教程请访问Github仓库查看文档或者自行百度

安装pug 以及 stylus插件

1

npm install hexo-renderer-pug hexo-renderer-stylus --save

然后再次Hexo三连查看效果

1
2
3

hexo cl
hexo g
hexo s

升级建议

此建议适用于任一Hexo主题

升级完成后，请到 Github 的 Releases 界面查看新版的更新内容。对照里面有标注 _config 文件的变更内容（如有）

为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做）。

在 hexo 的根目录创建一个文件_config.butterfly.yml，并把主题目录的_config.yml内容复制到`` _config.butterfly.yml` 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)

发布到Github

点击源代码管理-发布到Github-再输入仓库名
这里的仓库名建议设置为<你的 GitHub 用户名>.github.io，便于部署Github Pages


此时hexo已经成功部署到Github上了

若以上操作会产生网络问题，请参考以下教程：详细教程

Github Pages的实现

如果你想实现Github Pages，但是刚才没有更改仓库名，可以前往仓库设置将仓库名改为以上格式

创建.github/workflows/pages.yml文件，没有workfolws文件夹手动建一个

添加内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: "16"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

当部署作业完成后，产生的页面会放在储存库中的 gh-pages 分支

在储存库中前往Settings > Pages > Branch，并将branch改为 gh-pages

过一段时间后前往https://<你的 GitHub 用户名>.github.io查看网站如果长时间没有反应就多随便改点东西提交代码

使用vercel自定义域名

选择github登录，然后点击右上角的Add New...-project-你的博客仓库-import-Deploy，等待一段时间后就托管到vercel了。

这时候我们会看到已经生成了一个网页，但是这个网页被墙了，国内是访问不了的，所以然后我们继续到Dashboard（面板），选择setting-domains在方框中添加你的域名，我们再将vercel提供的CNAME值添加到DNS解析商（你可以使用cloudflare、阿里云、腾讯云等等都不影响）
过一段时间后你就可以在你的域名下访问hexo了！

总结

恭喜你~！到目前为你几乎完成了90%的工作，快去根据主题文件美化你的主题吧！
如果你还有问题或者需要更多信息，请查看Hexo官方文档！Hexo官网