使用github-action推送博客部署仓库至NPM

更新记录

2022-01-17:教程起草

编写参考教程
解决.github无法通过hexo deploy推送的问题
弃用新增npm插件的方案。改为直接使用本地新建scripts
绘制流程图

参考方向	教程原贴
参考了小康的博文中，关于解决hexo deploy无法提交.github文件夹至博客部署仓库的办法。	hexo 博客每天定时提交网址给百度
参考了hexo的生成器的API写法	HEXO-API-生成器（Generator）

思路讲解

自从2021年12月20日，jsdelivr因为“某些原因”，在大陆和台湾的ICP证书被吊销。可以说，这让国内的开发生态瞬间天塌一般。目前，虽然jsdelivr已经恢复了服务，但是这只是通过在“中国附件”的节点提供的CDN加速服务，速度上还不如放到本地。这种反向加速的CDN服务，我们已经可以认为jsdelivr已经挂了。

在这一背景下，寻求新的，重点是免费的CDN加速服务，就成了当前最迫切的事情。幸运的是，虽然jsdelivr挂了，但是npm依然有大量的镜像节点可以使用，关于此项内容可以参考本站的另一篇教程：

https://akilar.top/posts/3e956346/

那么，新的问题又出现了，众所周知，jsdelivr存在两个加速分支，一个是https://cdn.jsdelivr.net/npm/package@version/file,一个是https://cdn.jsdelivr.net/gh/user/repo@version/file,前者可以通过用npm的其他镜像节点加速来解决，但后者就没有这么多加速节点可以使用了。虽然也有很多同学尝试通过服务器自建反代jsdelivr来恢复访问速度，可是先抛开反向代理所需的知识点不谈，依赖于服务器的操作一开始就已经为这一方案设立了门槛。本文尝试通过github action配合自动打包username.github.io仓库至npm。鉴于传统的hexo deploy方案并不能达成这一目的，所以这里需要各位先完成github action自动部署的配置。

流程图

具体操作步骤

新建[Blogroot]scriptsnpmpublish.js, 使用 hexo 的生成器 API 生成 npm 自动推送 action 脚本。这一步是因为默认的hexo generate指令并不会将 source 目录下的.github文件夹编译到public文件夹下，所以必须要用生成器来生成。

代码语言：javascript复制

hexo.extend.generator.register('npmpush', function(locals){
  // Object
  return {
    path: '/.github/workflows/autopublish.yml',
    data: `name: Node.js Package
# 监测分支，2020年10月后github新建仓库默认分支改为main，记得更改
on:
  push:
    branches:
      - master

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: `  '${{secrets.npm_token}}'
};
});

因为直接使用 hexo deploy 无法推送public文件夹中的.github文件夹至博客部署仓库username.github.io，所以此处需要我们手动提交。推荐使用 ssh 链接，这样可以避免反复输入 github 的账号和密码。

指令流程

代码语言：javascript复制

cd ./public
git init
git config --global user.name 'name'
git config --global user.email 'example@example.com'
git add .
git commit -m 'updated'
git push --force --all git@github.com:username/username.github.io.git #强制提交至github

我的示例

代码语言：javascript复制

cd ./public
git init
git config --global user.name 'akilarlxh'
git config --global user.email 'akilarlxh@gmail.com'
git add .
git commit -m 'updated'
git push --force --all git@github.com:Akilarlxh/Akilarlxh.github.io.git #强制提交至github

故此，未配置github action的可以通过新建一个自动提交脚本[Blogroot]autopublish.sh，其他指令可以自己考虑加。这样一来，每次通过双击这个提交脚本就可以完成提交了。

脚本逻辑

代码语言：javascript复制

hexo clean
hexo generate
cd ./public
git init
git config --global user.name 'name'
git config --global user.email 'example@example.com'
git add .
git commit -m 'updated'
git push --force --all git@github.com:username/username.github.io.git #强制提交至github

我的示例

代码语言：javascript复制

hexo clean
hexo bangumi -u
hexo generate
gulp
cd ./public
git init
git config --global user.name 'akilarlxh'
git config --global user.email 'akilarlxh@gmail.com'
git add .
git commit -m 'updated'
git push --force --all git@github.com:Akilarlxh/Akilarlxh.github.io.git #强制提交至github

使用了github action的，首先需要用到github的token，如果之前配置 action 的时候用到的 token 还记得的话可以拿来复用：

访问Github-> 头像（右上角）->Settings->Developer Settings->Personal access tokens->generate new token, 创建的Token名称随意，但必须勾选 repo 项。

因为直接使用 hexo deploy 无法推送public文件夹中的.github文件夹至博客部署仓库username.github.io，所有此处我们需要更改autopublish.yml中关于hexo deploy部分的指令内容。以本站的教程为例，需要更改部署部分的指令内容：

更改部分

代码语言：javascript复制

  - name: 部署到Github
    run: |
-     git config --global user.name 'name'
-     git config --global user.email 'example@example.com'
-     git clone https://github.com/username/username.github.io.git .deploy_git
-     hexo deploy
      cd ./public
      git init
      git config --global user.name 'name'
      git config --global user.email 'example@example.com'
      git add .
      git commit -m 'updated by github action'
      git push --force --all https://[token]@github.com/username/username.github.io

我的示例

代码语言：javascript复制

- name: 部署到Github
  run: |
    # git config --global user.name "akilarlxh"
    # git config --global user.email "akilarlxh@gmail.com"
    # git clone https://github.com/Akilarlxh/Akilarlxh.github.io.git .deploy_git
    cd ./public
    git init
    git config --global user.name 'akilarlxh'
    git config --global user.email 'akilarlxh@gmail.com'
    git add .
    git commit -m 'updated by github action'
    git push --force --all https://1407sadagh4rixzf9343245834dafrdfb13a4856sa2babf2@github.com/Akilarlxh/Akilarlxh.github.io

提交前，需要在 source 目录下先初始化一下 npm 包，在[Blogroot]source目录下打开终端，输入

代码语言：javascript复制

npm init

然后输入你的博客包的主要信息。

最后会输出一段package.json，请求确认，输入yes即可。

在 npm 官网 ->头像 ->Access Tokens->Generate New Token, 勾选Automation 选项，Token 只会显示这一次，之后如果忘记了就只能重新生成重新配置了。

在 github 的博客部署仓库（username.github.io）设置项里添加一个名为NPM_TOKEN的secrets，把获取的 Npm 的 Access token 输入进去。

此处利用 npm 提交必须要更改 package.json 里的版本号才能顺利提交新版本的特性，我们可以手动更改 [Blogroot]sourcepackage.json 中的 version, 从而避免每次提交就发布一个版本，导致版本号泛滥的问题。
欲发布新版本至 npm 时，先更改 [Blogroot]sourcepackage.json 中的 version，然后通过上述的 github action 或者本地提交 shell 脚本实现提交即可。
最后，就可以利用 npm 的 CDN 节点来加速我们博客的静态资源了。比如博客中的图片，
- 绝对路径：[Blogroot]/source/img/image.jpg;
- 在 markdown 中引用图片（相对路径）：![](/img/image.jpg);
- 在 markdown 中引用图片（图床链接 gh jsd）：![](https://cdn.jsdelivr.net/gh/akilarlxh/akilarlxh.github.io/akilar-blog/img/image.jpg);
- 在 markdown 中引用图片（图床链接 npm zhimg）：![](https://unpkg.zhimg.com/akilar-blog/img/image.jpg), 其中 akilar-blog 是我的 npm 包名。

github git 开源 hexo npm

0 人点赞

使用github-action推送博客部署仓库至NPM

思路讲解

推荐阅读前置教程

流程图

具体操作步骤