关于javascript:Hexo-搭建与部署指南

1. 装置与应用 Hexo

hexo 官方网站：链接

1.1 装置

全局装置 hexo-cli，用以创立 hexo 我的项目：

npm install hexo-cli -g

装置实现后，就能够在终端应用 hexo 指令了，能够应用以下指令创立一个 hexo 我的项目：

hexo init hexo-blog
cd hexo-blog
yarn install

实现后我的项目目录如下：

.
├── _config.yml # 网站的根底配置，文档：https://hexo.io/zh-cn/docs/configuration
├── package.json
├── scaffolds # 文章模板
├── source
|   ├── _drafts
|   └── _posts # 你的 markdown 文章就须要寄存在此目录下
└── themes # 寄存主题源码 

1.2 装置第三方主题

npm 装置

Hexo 5.0.0 版本以上，能够应用 npm 装置主题，简略易用、不便降级，但毛病是无奈批改源码。

以 hexo-theme-fluid 主题为例，应用 npm 装置只须要执行：

yarn add hexo-theme-fluid
# 或者
npm install --save hexo-theme-fluid

而后在博客目录下创立 _config.fluid.yml，将主题的 \_config.yml 内容复制进去。

源码装置

源码装置是老版本 Hexo 装置主题的形式，如果你项批改主题的源码也能够很不便的间接批改。

依然以 hexo-theme-fluid 主题为例，在我的项目的 Releases 页面中下载源码文件：

下载解压后，在 themes 目录下创立一个 fluid 目录，将源码复制到该目录下，如下：

利用主题

当你装置胜利后，须要在 _config.yml 中将应用的主题设置为你下载好的主题，找到 theme 配置项，将其批改为：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid

配置第三方主题

如果你是以 npm 形式装置主题，你须要批改你方才在博客目录下创立 _config.fluid.yml 文件批改相干配置；

如果你是以源码形式装置的主题，就不须要创立 _config.fluid.yml 文件了，只须要批改 /themes/fluid/_config.yml 文件中的配置就能够了。

留神：每个主题的配置文件名称都不一样，主题的配置项也不一样，具体须要自行查看你装置主题的阐明文档

2. 部署 Hexo 到服务器

如果你不想理解如何部署网站到服务器上，或者没有属于本人的服务器，你能够跳过这一章节，间接浏览第三节。

2.1 获取编译好的 hexo 动态文件

能够应用 hexo-cli 的 generate 指令来生成动态博客，hexo-cli 曾经将这一指令写入到 package.json，因而你能够应用 npm/yarn 指令来调用构建指令：

yarn build
# 或者
npm run build

博客目录下会生成一个 public 目录，这就是 Hexo 编译好的动态博客，接下来咱们只须要将生成的动态文件部署到服务器上即可。

2.2 Nginx

服务器抉择应用 Nginx 进行部署（of course，你也能够应用 Caddy）。

装置 Nginx

首先在服务器上安装 nginx，以 Ubuntu 为例：

sudo apt install nginx
systemctl enable nginx # 将 nginx 设置为开机启动项
systemctl start nginx # 开启 nginx
systemctl status nginx # 查看 nginx 状态 

官网残缺装置文档：(链接)[https://www.nginx.com/resourc…]

查看 / 批改 Nginx 配置

你能够应用 vim 指令查看 nginx 配置：

vim /etc/nginx/nginx.conf

2.3 部署博客

上传动态资源

应用任意的 sftp 工具，mac 举荐应用 FileZilla，连贯到服务器后，进入服务器的 /var/www/html 目录下，清空目录下原有的文件，而后将方才编译好的 hexo 博客的动态文件上传至该目录下即可。

之后咱们能够间接拜访服务 ip 的 80 端口（即默认 http 的默认端口），就能够看到咱们的网站了。

然而个别正规的网站是不会间接用 ip 拜访的，因而咱们须要为本人的网站绑定一个域名。

为网站绑定域名

进入你的域名解析控制台，以腾讯云的 DNSPod 为示例，点击增加记录，记录类型抉择为 A 类型：

记录值填入你的服务器 ip，即实现了域名与服务器的绑定。

其中的『主机记录』意为二级域名的名称，如果你的域名为 domain.xyz：

• 当你写为 @ 时，用户拜访 domain.xyz 会解析为你的主机 ip
• 当你写为 * 时，用户拜访 hi.domain.xyz 与 oh.domain.xyz 等任意二级域名都会解析为你的主机 ip（个别不会这么干）
• 当你写为 www 时，用户拜访 www.domain.xyz 会解析到你的主机 ip

域名绑定胜利后就能够间接应用域名拜访你的博客啦！

3. 应用 github.io 展现网站

Github 提供了一个用以专门展现动态网站的服务，即为 github.io。

如果不是特地对网速有要求（毕竟 github.io 的服务器在国外），举荐你应用 github.io 来部署你的网站，能够省去很多部署步骤，能够完满与 Github Action 进行配合，进行自动化部署博客。

3.1 我的项目上传到 Github

在 Hexo 博客我的项目初始化 git 仓库：

git init

而后在 Github 中创立一个新我的项目仓库，名称必须为 < 你的 github 用户名 >.github.io，创立实现后依照指引将你的博客代码上传到 github。

3.2 开启 Github Pages

在执行这一步之前，先创立一个没有任何代码的新分支，命名为 release：

git checkout -b release
rm -f * # 确定你的当前目录没问题，把握不住删除指令的话就手动删除以后文件加的内容
git push --set-upstream origin release # 上传 release 分支 

在我的项目的设置中找到 Github Pages，并将展现分支设置为方才创立的 release 分支：

这就意为这你在 release 上传的任何 html 都能够应用 < 你的 github 用户名 >.github.io 这个域名来拜访了。

咱们切回 master 分支，之后执行 yarn build 将生成的 public 目录下的文件复制一份，而后从新切回 release 分支，将方才复制的内容粘贴到 release 分支下，并上传代码。如果没有操作失误的话，拜访 < 你的 github 用户名 >.github.io 即可看到你的博客了。

3.3 应用 hexo deploy 指令

在上一步，咱们演示了如何手动去将代码部署到 Github Pages 上，实际上 Hexo 提供了一个自动化的指令来帮忙咱们实现这一繁冗的过程，那就是应用 hexo deploy 指令。

然而应用之前要先装置 hexo-deployer-heroku：

yarn add hexo-deployer-heroku
# 或者
npm install hexo-deployer-heroku --save

而后在 _config.yml 中找到 deploy 配置项，将其批改为：

deploy:
  type: git
  repo: git@github.com:< 你的 github 用户名 >/< 你的 github 用户名 >.github.io.git
  branch: release

而后再执行 yarn deploy 就能够自动化实现编译博客、切换分支、替换动态文件、上传代码这一系列操作。

4. 应用 Github Action 自动化部署

回顾一下下面的步骤，咱们即便应用了 hexo deploy 指令，其实也很麻烦，须要咱们在本地等漫长的编译过程，编译完了还要更新代码到 github 仓库上。为了简化这一流程，就能够抉择应用 Github Action 来帮咱们做自动化部署。

Github Action 能够实现在一个行为触发之后再执行一些其余的行为，利用这个能力咱们就能够实现当咱们写完一篇文章后，将代码 Push 到 Github 仓库的这一刻，让 Github 来帮咱们实现编译以及部署这个流程，也就是实现继续集成（CI）、继续交付（CD）的这个成果。

对于 Github Action，具体教程能够查看 官网文档。依照文档中所形容的，只有咱们在代码中增加一层 .github/workflows 目录，并且在目录下创立一个 yml 文件来形容具体的行为，就能够实现开启 Github Action。

如下是一个编写好的部署 hexo 博客的 yml 文件，你能够将其写入到 .github/workflows/blog-deploy.yml 文件中：

name: Deploy hexo blog
on:
  push:
    branches:
      - "master"
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          ref: "master"

      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: "14"

      - name: Setup yarn & Install node_modules
        uses: borales/actions-yarn@v3.0.0
        with:
          cmd: install

      - name: Check yarn & node version
        run: |
          echo "Node version is `node -v`"
          echo "Yarn version is `yarn -v`"

      - name: Build & Deploy
        run: |
          git config --global user.name "GitHub Action"
          git config --global user.email "action@github.com"
          sed -i''"s~git@github.com:~https://${{secrets.GH_TOKEN}}@github.com/~" _config.yml
          rm -rf .deploy_git
          yarn clean
          yarn build
          yarn deploy

保留后提交代码后，就能够在你的博客的 Github 我的项目仓库里的 Actions 标签页里找到创立好的 workflow 了，并且当你 push 代码时，这个工作流就会被触发：

但其实它最终会失败的，因为咱们还有一步没有实现。在下面的脚本中应用了一个 Github Action 的 secrets 上下文，即 ${{secrets.GH_TOKEN}} 这里。

${{xxx}} 是 Github Action 中的特定模板语法，能够获取到一些 Github 相干的内置的零碎变量（权且这么说吧），但又区区别与 Github Action 的环境变量。咱们这里获取的 secrets.GH_TOKEN 是 Github Personal access token，获取这个 token 的目标是为了让以后的 Github Action 工作流有向咱们的我的项目推送代码的权限。

首先咱们要获取这个 Token，你能够在你的用户头像菜单里抉择 Setting，进入设置后抉择 Developer settings，再抉择 Persona access token 就能够看到它了：

点击右上角的 Generate new token 按钮生成新的 Token，填写一个你比拟容易辨别的备注后，勾选 repo 和 workflow 权限，并将 Expiration 过期工夫选为 No expiration：

这个 Token 相当重要，千万不能泄露，如过泄露立即重置该 token！！！

点击 Generate token 按钮后，就会生成一个 ghp 结尾的 token，你须要在此复制该 token（前面不能再查看了，只能从新生成）:

复制该 token 后，进入到博客仓库的设置中，抉择 Secrets - Actions，点击 New repository secret 按钮生成一个密钥信息：

咱们将密钥名称写为 GH_TOKEN，值填入方才复制的 Github token：

这里所新建的 secret 字段，就能够被 Github Action yml 配置中的 secret 上下文对象所获取到。

至此 Github Action 工作流就能够失常应用了，你能够欢快的开始写你的博客啦，你的每次提交 Github Action 都会帮你进行主动部署，enjoy yourself ~