南栀 Space

介绍#

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

注册 Github#

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

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

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“，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装。

1
git --version
2
node -v
3
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
cd (你的博客名称)
2
code .

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

本地显示 Hexo#

在新窗口执行以下命令

1
hexo g
2
hexo s

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

Hexo 安装主题#

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

###安装方式

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

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

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

2. 使用 npm 安装

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

1
npm install hexo-theme-butterfly

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

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

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
hexo cl
2
hexo g
3
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
name: Pages
2

3
on:
4
  push:
5
    branches:
6
      - main # default branch
7

8
jobs:
9
  pages:
10
    runs-on: ubuntu-latest
11
    permissions:
12
      contents: write
13
    steps:
14
      - uses: actions/checkout@v2
15
      - name: Use Node.js 16.x
16
        uses: actions/setup-node@v2
17
        with:
18
          node-version: "16"
19
      - name: Cache NPM dependencies
20
        uses: actions/cache@v2
21
        with:
22
          path: node_modules
23
          key: ${{ runner.OS }}-npm-cache
24
          restore-keys: |
25
            ${{ runner.OS }}-npm-cache
26
      - name: Install Dependencies
27
        run: npm install
28
      - name: Build
29
        run: npm run build
30
      - name: Deploy
31
        uses: peaceiris/actions-gh-pages@v3
32
        with:
33
          github_token: ${{ secrets.GITHUB_TOKEN }}
34
          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 官网