关于前端:HexoGitHub搭建博客实现云端编辑一键发布

操作环境：Windows10、Node、Git、ssh

前置筹备: <username>github.io 仓库已建设，预计托管博客网址为<username>github.io/blog

先对 hexo 有个清晰的意识，不至于稀里糊涂的跟着步骤走。

1、Hexo 公布博客流程概览

1. 搭建 hexo 环境
2. hexo new "title" (创立新文章)
3. 编写 md 文档
4. hexo clean

• 革除缓存文件 (db.json) 和已生成的动态文件 (public)

5. hexo generate (生成动态文件)
6. hexo deploy (Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中，并且齐全笼罩该分支下的已有内容。)
7. 本地仓库同步到 GitHub (不同步的话，文章源码只会保留在本地，不易治理)

因为 Hexo 的部署默认应用分支 master，所以如果你同时正在应用 Git 治理你的站点目录，你该当留神你的部署分支该当不同于写作分支。

Hexo 在部署你的站点生成的文件时并不会更新你的站点目录。因而你应该手动提交并推送你的写作分支。

一般来说第一步环境搭建只须要在最开始创立博客网站的时候进行，写文的话只须要反复第 2 - 7 步就能够了，这种应用形式强烈依赖于本地环境。然而，有时候咱们并不只是固定在一台电脑上写文，（比方：始终写文的电脑坏了，须要换新电脑；电脑重装系统等等）这样就须要在另一台电脑上搭建环境，这样十分的麻烦，而且难免会带来一些其它依赖版本兼容问题。所以，能够采纳 GitHub Actions 继续集成平台来简化公布文章的流程。

简化后的流程如下：

1. hexo new "title" (创立新文章)
2. 编写 md 文档
3. 本地仓库同步到 GitHub
4. push 到 GitHub 上之后，GitHub Actions会监听分支文件变动，触发公布流程（跟 Jenkins 构建流程相似）

下文整体分为两个步骤：

1. 借助 GitHub Pages 手动部署。
2. 减少 GitHub Actions 配置，实现主动部署

2、Hexo 搭建博客

Hexo 是一个疾速、简洁且高效的博客框架。Hexo 应用 Markdown（或其余渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成动态网页。

文档

npm install -g hexo-cli
cd [workspace]
hexo init <folder:blog>
cd <folder:blog>
npm install
hexo s

网站根底配置批改参考这里

3、GitHub 托管 Hexo 博客

能够采取 分支治理 的形式，也能够新建 repo，在 ci 配置上略有不同，这里我采纳的是将 hexo 博客源码托管到 独立的 repo 上，将 Hexo 我的项目编译生成动态页面，部署到 gh-pages 分支

1. 新建仓库：blog（名字本人起）
2. 本地 hexo 仓库关联近程 GitHub 仓库
   将本地仓库推送到远端
3. 本地仓库一些必要的批改配置

4. 装置 hexo-deployer-git。

   https://github.com/hexojs/hexo-deployer-git

• 批改 _config.yml 配置，如下：

  url: https://all-smile.github.io/blog
  root: /blog/
  
  # ...
  
  deploy:
  type: 'git'
  repo: git@github.com:all-smile/blog.git
  branch: gh-pages

• 提交到近程仓库

3. 创立 gh-pages 分支

hexo 联合 GitHub 创立集体网站指定的分支名，hexo 内默认设置的分支也是叫这个名字

git checkout -b gh-pages
git push -u origin gh-pages

4. 近程仓库开启 github pages

指定部署分支：gh-pages

4、手动部署

本地我的项目执行命令：

hexo clean
hexo g
hexo deploy

hexo 模板引擎生成动态文件，并推送到 gh-pages 分支下（替换原先分支下的所有文件）

到这里就曾经实现了博客的搭建

须要留神的是：hexo deploy 命令并不会帮忙咱们同步本地的批改到近程仓库，所以当在本地写完博文之后，要做两件事：一是公布站点，二是同步近程仓库，这样做比拟麻烦，上面会解说如何配置 继续集成

4.1、查看成果

这里我配置了自定义域名

5、主动部署

就是 DevOps，能够了解成 GitHub 通过一些 流水线 的配置（CI/CD），而后在本地推送代码的时候触发 流水线 执行，主动部署站点。

因为 GitHub Actions 也能够实现 CI/CD，travis-ci 的市场被挤压了，所以他们扭转了经营策略，变成免费应用了！咱们换用 GitHub Actions

GitHub Actions 是开源继续集成构建我的项目，用来继续集成托管在 GitHub 上的代码，应用起来也十分的简略不便。

应用 GitHub Actions 后，能够将后面部署的步骤自动化，咱们只须要将本地批改的文件推送到 github 仓库，GitHub Actions 检测到 master 分支代码有变动，会主动执行脚本命令，将 Hexo 我的项目编译生成动态页面，部署到 gh-pages 分支，very good！

6、GitHub Actions

GitHub Actions文档请点击这里

应用 Github Action 来部署 hexo，这样电脑本地就不须要装置 npm 相干的货色了。另外利用github.dev 也能够实现在页面上编辑了。

在线编辑:
Github有提供一个在线编辑的页面，在 Repo 页面按下按键 . 就能够关上编辑页面了

每个 action 就是一个独立脚本，因而能够做成代码仓库，应用 userName/repoName 的语法援用 action。比方，actions/setup-node就示意 github.com/actions/setup-node 这个仓库，它代表一个 action，作用是装置 Node.js。事实上，GitHub 官网的 actions 都放在 github.com/actions 外面。

6.1、反对的令牌

反对三个令牌。

留神：GITHUB_TOKEN不是集体拜访令牌，GitHub Actions 运行器会主动创立一个 GITHUB_TOKEN 密钥以在您的工作流程中进行身份验证。因而，您无需任何配置即可立刻开始部署

6.2、反对的平台

所有 Actions 运行器：反对 Linux (Ubuntu)、macOS 和 Windows。

7、为 Hexo 配置 GitHub Actions

具体步骤：

7.1、设置 SSH 私钥 deploy_key

创立 SSH 部署密钥，应用以下命令生成部署密钥。

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

您将取得 2 个文件：

• gh-pages.pub 是公钥
• gh-pages 是私钥

接下来，转到博客源码存储库设置

• 转到 Deploy Keys 并应用 Allow write access 增加您的公钥 gh-pages.pub，name 写为public key of ACTIONS_DEPLOY_KEY，指定用处，不便前面保护

• 转到 Actions secrets 并将您的私钥 gh-pages 增加为 ACTIONS_DEPLOY_KEY（这个名称在 yml 文件中须要应用）

7.2、新建 .github/workflows/pages.yml 文件

yml文件通过缩进（空格，不是 tab）来示意层级关系。

yaml不会的，能够去看一下这里，理解一下语法即可。

以下文件是我集体的配置的一部分，不倡议间接应用

name: Pages

# 触发器、分支
on:
  push:
    branches:
      - master  # default branch
jobs:
  # 子工作
  pages:
    runs-on: ubuntu-latest # 定运行所须要的虚拟机环境
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v2
        # with:
        #   submodules: true
        #   fetch-depth: 0
      # 每个 name 示意一个步骤:step
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: '16.14.1' # 本人正在应用的 node 版本即可
      # - run: node -v # 查看 node 版本号
      # 缓存依赖项: https://docs.github.com/cn/actions/using-workflows/caching-dependencies-to-speed-up-workflows
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          # path: node_modules
          key: ${{runner.OS}}-npm-cache
          restore-keys: |
            ${{runner.OS}}-npm-cache
      # 查看门路 : /home/runner/work/blog/blog
      # - name: Look Path
      #   run: pwd
      # 查看文件
      - name: Look Dir List
        run: tree -L 3 -a
      # 第一次或者依赖发生变化的时候执行 Install Dependencies，其它构建的时候不须要这一步
      - name: Install Dependencies
        run: npm install
      - name: Look Dir List
        run: tree -L 3 -a
      # - name: clean theme cache
      #   run: git rm -f --cached themes/tenacity
        # run: git submodule deinit themes/tenacity && git rm themes/tenacity
      # 装置主题
      - name: Install Theme
        run: git submodule add https://github.com/all-smile/tenacity.git themes/tenacity
      - name: Clean
        run: npm run clean
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{secrets.ACTIONS_DEPLOY_KEY}}
          user_name: xiao
          user_email: allblue95@126.com
          # 获取提交文章源码时的 commit message，作为公布 gh-pages 分支的信息
          commit_message: ${{github.event.head_commit.message}}
          full_commit_message: ${{github.event.head_commit.message}}
          github_token: ${{secrets.GITHUB_TOKEN}}
          # GITHUB_TOKEN 不是集体拜访令牌，GitHub Actions 运行器会主动创立一个 GITHUB_TOKEN 密钥以在您的工作流程中进行身份验证。因而，您无需任何配置即可立刻开始部​​署
          publish_dir: ./public
          allow_empty_commit: true # 容许空提交
      # Use the output from the `deploy` step(use for test action)
      - name: Get the output
        run: |
          echo "${{steps.deploy.outputs.notify}}"

7.3、批改 _config.yml 文件中的 Deploy 配置

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: git@github.com:all-smile/blog.git
  branch: gh-pages
  # 默认提交信息：Site updated: {{now('YYYY-MM-DD HH:mm:ss') }}
  message: ${{github.event.head_commit.message}} # 间接将提交音讯传输到 GitHub Pages 存储库

公布成果

本地仓库间接push，触发 GitHub Actions 主动构建公布

Hexo 主题

请查看文档，自行装置配置

8、GitHub Actions 问题解决

8.1、非法输出值

在 pages.yml 文件的 Deploy 步骤下，公布的时候须要一些参数配置，这些参数名是指定好的，不能够轻易写，比方 commit_msg应该应用 commit_message

commit_message: ${{github.event.head_commit.message}}

Warning: Unexpected input(s) ‘commit_msg’, valid inputs are [‘deploy_key’, ‘github_token’, ‘personal_token’, ‘publish_branch’, ‘publish_dir’, ‘destination_dir’, ‘external_repository’, ‘allow_empty_commit’, ‘keep_files’, ‘force_orphan’, ‘user_name’, ‘user_email’, ‘commit_message’, ‘full_commit_message’, ‘tag_name’, ‘tag_message’, ‘enable_jekyll’, ‘disable_nojekyll’, ‘cname’, ‘exclude_assets’]

8.2、The process ‘/usr/bin/git’ failed with exit code 128

这个问题大概率是 GITHUB_TOKEN 造成的，参考配置文档

GITHUB_TOKEN 是一种 GitHub 利用程序安装拜访令牌。能够应用装置拜访令牌代表仓库中装置的 GitHub 应用程序进行身份验证。令牌的权限仅限于蕴含您的工作流程的仓库。

解决：

• 查看 yml 文件中的名字是否写错

github_token: ${{secrets.GITHUB_TOKEN}}

• 在 仓库 Settings/Actions/general 下，批改 GITHUB_TOKEN 的权限

8.3、deploy key 问题

ERROR: Permission to all-smile/blog.git denied to deploy key
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

解决：

• 查看 pages.yml 中援用的变量名称是否跟 GitHub 仓库上设置的一样
• 公私钥是否匹配，如果不匹配，则从新生成增加即可

👉👉 如果还有其它问题也能够看一下这里，应该会有帮忙的😊

最初

• 本地写文只须要在写完之后 push 到近程仓库即可公布
• 其它电脑本地应用，有 git 就能够了，间接拉取近程仓库源码，在本地创立文件、编辑、推送远端，即可公布
• 也能够用 github.dev 在线创立、编辑、发文

🎈🎈🎈

🌹 继续更文，关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。

🎉 喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路 😉

🎁 欢送大家评论交换, 蟹蟹😊