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

操作环境：Windows10、Node、Git、ssh
前置筹备: <username>github.io 仓库已建设，预计托管博客网址为<username>github.io/blog

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

1、Hexo公布博客流程概览

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

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

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

因为 Hexo 的部署默认应用分支 master，所以如果你同时正在应用 Git 治理你的站点目录，你该当留神你的部署分支该当不同于写作分支。
Hexo 在部署你的站点生成的文件时并不会更新你的站点目录。因而你应该手动提交并推送你的写作分支。

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

简化后的流程如下：

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

下文整体分为两个步骤：

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

2、Hexo 搭建博客

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

文档

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

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

3、GitHub 托管 Hexo 博客

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

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

装置 hexo-deployer-git。

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

批改_config.yml配置，如下：

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

提交到近程仓库

创立 gh-pages 分支

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

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

近程仓库开启 github pages

指定部署分支：gh-pages

4、手动部署

本地我的项目执行命令：

hexo cleanhexo ghexo 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	✅️	✅️	HTTPS	不必要
deploy_key	✅️	✅️	SSH	必要的
personal_token	✅️	✅️	HTTPS	必要的

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

6.2、反对的平台

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

环境	github_token	deploy_key	personal_token
ubuntu-20.04	✅️	✅️	✅️
ubuntu-18.04	✅️	✅️	✅️
macos-最新	✅️	✅️	✅️
windows-最新	✅️	(2)	✅️

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 branchjobs:  # 子工作  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-deploymentdeploy:  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 keyfatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.

解决：

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

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

最初

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

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

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

欢送大家评论交换, 蟹蟹