介绍

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

注册 Github

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

node.js

node.js 官网 按照自己的机器选择对应的版本下载，我是 windous 64 位

node.js 的详细安装教程：详细教程

Git

Git 官网

和 node.js 一样，安装好自己对应的版本后一直下一步就好了

Git 的详细安装教程：详细教程

VS Code

VS Code 官网

按照自己的机器选择对应的版本下载，我是 windous 64 位

安装完成后，可以点击侧边栏的四个小方块的按钮（Extensions 拓展），搜索Chinese关键词来安装中文语言包，安装好后右下角会弹出一个弹窗提示让你切换语言并重启

提示：以下使用 VSCode 绑定 github 的教程基于科学上网的前提下（好处是这样操作简易），否则会提示fetch failed，平民教程参考：详细教程

重启 VSCode 后，在顶部的搜索框里输入>git的关键词后任意点击一个，可以以第一个为例，它会让你连接你的 Github 账号，你只需要一步步根据指引来做就可以了

检查环境

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

git --version
node -v
npm -v

Hexo 安装

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

输入以下命令安装 Hexo

npm install -g hexo-cli

Hexo 初始化

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

hexo init (你的博客名称)

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

cd (你的博客名称)
code .

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

本地显示 Hexo

在新窗口执行以下命令

hexo g
hexo s

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

Hexo 安装主题

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

安装方式

1. 使用 Git 安装
   安装 butterfly 主题

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

更新方法：再运行一下这个命令

2. 使用 npm 安装
   > 使用 npm 安装，主题文件会被隐藏在node_modules\hexo-theme-butterfly路径下

npm install hexo-theme-butterfly

升级方法：在 Hexo 根目录下，运行npm update hexo-theme-butterfly

如果下载过慢或卡住，可以把npm字符换成pnpm，如果提示出错，需要使用 npm 安装 pnpm，执行以下命令

npm install pnpm -g

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

theme: butterfly

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

安装 pug 以及 stylus 插件

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

然后再次 Hexo 三连查看效果

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

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

Github Pages 的实现

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

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

添加内容:

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 官方文档！

参考文章：安知鱼 Blog
butterfly 官网