Github Action / Gulp / Hexo b

Github Action / Gulp / Hexo b

Hexo b + Github Action 实现自动化流程

Github Action

获取 Token

Personal access tokens->Generate new token,创建的 Token 名称随意,但必须勾选 repo 项 和 workflows 项。

token 只会显示这一次,之后将无法查看,所以务必保证用户名已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

为了确保交由Github Action来持续部署时,Github Action 具备足够的权限来进行 hexo deploy 操作,需要先获取 Token

Github 参考官方为命令行创建个人访问令牌

关于GiteeCoding的步骤与Github相似 具体参考此文

创建存放源码的私有仓库

Private(私有仓库)

首先获取远程仓库地址,此处虽然 SSH 和 HTTPS 均可。
SSH 在绑定过 ssh key 的设备上无需再输入密码,但是 SSH 偶尔会遇到端口占用的情况。
而 HTTPS 则需要输入密码,请自主选择。

这里之所以是私有仓库,是因为在接下来的配置中会用到 Token,如果 Token 被盗用,别人可以肆意操作 github 仓库内容,为了避免这一风险,才选择的源码闭源。

配置 Github Action

Github Marketplace 已有现成写好的脚本配置 Hexo Action

    1. 新建 autodeploy.yml

[Blogroot]/.github/workflows/autodeploy.ymlCOPY# 当有改动推送到master分支时,启动Action
name: 自动部署
on:
  push:
    branches:
      - master #2020年10月后github新建仓库默认分支改为main,注意更改
  release:
    types:
      - published
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支
      uses: actions/checkout@v2
      with:
        ref: master #2020年10月后github新建仓库默认分支改为main,注意更改
    - name: 安装 Node
      uses: actions/setup-node@v1
      with:
        node-version: "16.x"
    - name: 安装 Hexo
      run: |
        export TZ='Asia/Shanghai'
        npm install hexo-cli -g
    - name: 缓存 Hexo
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}
    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save
    - name: 生成静态文件
      run: |
        hexo clean
        hexo generate
    - name: 部署 #此处master:master 指从本地的master分支提交到远程仓库的master分支,若远程仓库没有对应分支则新建一个。如有其他需要,可以根据自己的需求更改。
      run: |
        cd ./public
        git init
        git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
        git config --global user.email '${{ secrets.GITHUBEMAIL }}'
        git add .
        git commit -m "🎉${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" master:master

    1. 前往Github仓库的 Settings->Secrets->Actions 下添加环境变量New repository secret变量名参考脚本中出现的,(autopublish.yml里面需要什么就生成什么)依次添加。

这里的变量名指的是下面的常量,需要对应上方autopublish.yml中出现了什么就添加什么进去。

常量声明

以下将使用特定的常量名来指代一些名词,直接使用教程内容的常量名。在最后再逐一搜索替换。这样可以避免对各种常量名的混淆。

常量名常量释义
[Blogroot]本地存放源码的文件夹路径
[SourceRepo]存放源码的私有仓库名
[SiteBlogRepo]存放编译好的页面的公有仓库名 Site 指站点,教程中会替换成 Github、Gitee、Coding
[SiteUsername]用户名 Site 指站点,教程中会替换成 Github、Gitee、Coding
[SiteToken]申请到的令牌码 Site 指站点,教程中会替换成 Github、Gitee、Coding
[GithubEmail]与 github 绑定的主邮箱,建议使用 Gmail
[TokenUser]Coding 配置特有的令牌用户名

COPY# 以下是在记事本中逐个记录,方便替换
[Blogroot]:本地存放源码的文件夹路径
[SourceRepo]:用户名/存放源码的私有仓库名
[SiteBlogRepo]
  [GithubBlogRepo]:用户名.github.io
  [GiteeBlogRepo]:用户名
  [CodingBlogRepo]:用户名/私有仓库名
[SiteUsername]
  [GithubUsername]:用户名
  [GiteeUsername]:用户名
  [CodingUsername]:用户名
[SiteToken]
  [GithubToken]:密钥
  [GiteeToken]:密钥
  [CodingToken]:密钥
[GithubEmail]:用户名@gmail.com
[TokenUser]:Coding 配置特有的令牌用户名

重新设置远程仓库和分支

第1次使用Git管理源码

    1. 删除或者先把[Blogroot]/themes/butterfly/.git移动到非文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目,从而无法被上传到源码仓库。

    1. 在根目录[Blogroot]路径下运行指令

   COPYgit init #初始化
   git remote add origin git@github.com:[用户名]/[存放源码的私有仓库名].git
   git checkout -b master # 切换到master分支,
   #2020年10月后github新建仓库默认分支改为main
   # 如果不是,后面的所有设置的分支记得保持一致

    1. 添加屏蔽项 因为能够使用指令进行安装的内容不包括在需要提交的源码内,所有需要将这些内容添加到屏蔽项,表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。

   [Blogroot]/.gitignoreCOPY.DS_Store
   Thumbs.db
   db.json
   *.log
   node_modules/
   public/
   .deploy*/
   .deploy_git*/
   .idea
   themes/butterfly/.git

如果不是butterfly主题,替换最后一行内容为用户名当前使用的主题。

    1. 之后再运行 git 提交指令,将源码提交到 github 上。

   COPYgit add .
   git commit -m "github action update"
   git push origin master
   #2020年10月后github新建仓库默认分支改为main

    1. 此时主题文件夹若已经被正常上传,并且用户名也添加了主题文件夹下的.git 文件夹的屏蔽项。那用户名可以考虑把第二步移走或删除的.git放回来,用作以后升级。(一般没什么人用这个方法升级)

曾做过git管理源码的操作

1.添加屏蔽项
因为能够使用指令进行安装的内容不包括在需要提交的源码内,所有需要将这些内容添加到屏蔽项,表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。

[Blogroot]/.gitignoreCOPY.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git

如果不是 butterfly 主题,记得替换最后一行内容为用户名自己当前使用的主题。 2.提交源码到私有仓库[存放源码的私有仓库名]
在根目录[Blogroot]下启动终端,使用 git 指令重设仓库地址。这样在新建仓库,仍旧可以保留珍贵的 commit history,便于版本回滚。

COPYgit remote rm origin # 删除原有仓库链接
git remote add origin git@github.com:[用户名]/[存放源码的github私有仓库名].git
git checkout -b master # 切换到master分支
#2020年10月后github新建仓库默认分支改为main
# 如果不是,后面的所有设置的分支记得保持一致
git add .
git commit -m "github action update"
git push origin master
#2020年10月后github新建仓库默认分支改为main

3.可能遇到的 bug
因为 butterfly 主题文件夹下的.git 文件夹的存在,那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项,但是还是无法正常上传主题文件夹的情况。请先将本地源码中的 themes 文件夹移动到别的目录下。然后 commit 一次。接着将 themes 文件夹移动回来,再 commit 一次。

要是还不行,那就删了 butterfly 主题文件夹下的.git 文件夹,然后再重复上述的 commit 操作。

查看部署情况

此时,打开 GIthub 存放源码的私有仓库,找到 Action
根据刚刚的 Commit 记录找到相应的任务
点击 Deploy 查看部署情况
若全部打钩✔,说明部署成功。

可能遇到的 bug

⛔ 主题文件夹被列为子模块

git 上传源码之后,自动执行action时,报错code 128或是theme/butterfly无法解析hexo语法。
网页版在线查看仓库主题文件夹为空,图标上出现白色箭头。

这是因为一般使用了butterfly主题官方使用文档的 git clone 命令(克隆含有子模块的项目),当克隆这样的项目时,默认会包含该子模块目录,但其中还没有任何文件。

    1. 将被列为子模块主题文件夹删除,然后 git 上传源码。

    1. 不使用git clone命令来导入主题文件夹(且不包含主题文件夹内的.git文件夹)并 git 上传源码即可。

⛔unknown block tag: “tagname”

要是在 github action 部署时遇到 unknown block tag: “tagname”这样的报错,说明用户名可能没有正确上传主题文件夹,也可能遇到安装依赖或生成页面失败的情况。

    1. 是否将node_modules也上传到源码仓库[存放源码的私有仓库名]。源码仓库不需要有node_modules文件夹。

    1. 是否有将[Blogroot]/themes/下的主题文件夹上传,例如检查[存放源码的私有仓库名]内的[Blogroot]/themes/Butterfly是否为空文件夹。为了能够正常编译页面,源码仓库需要有[Blogroot]/themes/Butterfly文件夹及它所包含的主题文件内容。为了避免这两点,需要添加 git 屏蔽项。通过给.gitignore添加屏蔽项解决。

   [Blogroot]/.gitignoreCOPY.DS_Store
   Thumbs.db
   db.json
   *.log
   node_modules/
   public/
   .deploy*/
   .deploy_git*/
   .idea
   themes/butterfly/.git

3.若是遇到添加屏蔽项,但是还是无法正常上传主题文件夹的情况。

    • 先将本地源码中的themes/butterfly文件夹下的~.git文件夹删除。

    • 然后将butterfly文件夹移动到别的目录下。然后 commit`一次。

    • 接着将`butterfly文件夹移动回来,再

    • commit`一次。

2020 年 10 月后 github 新建仓库默认分支改为 main

⛔spawn failed

报错类似COPY- fatal: in unpopulated submodule '.deploy_git' 
- FATAL {
  err: Error: Spawn failed

若是遇到 spawn failed 报错。在 github action 的配置中出现这一报错。一般是因为涉及到部署地址的配置项有误。

    1. 首先排查用户名在[Blogroot]\_config.ymldeploy配置项是否按照上文配置 deploy 项中的步骤正确组装配置链接。

    1. 其次排查[Blogroot]\.github\workflows\autodeploy.yml中各个关于仓库链接的配置内容,注意按照注释指引检查空格、分支等。

    1. 更多可能的因素和解决方案可以参考@HEO写的方案:Hexo 错误:spawn failed 的解决方法

2020 年 10 月后 github 新建仓库默认分支改为 main

⛔变量名称问题

部分不愿意用教程给出的变量名的可能遇到未知bug,此处给出官方的命名规则:

以下规则适用于密码名称:

密钥名称只能包含字母数字字符([a-z]、[A-Z]、[0-9])或下划线 (_)。 不允许空格

密钥名称不得以 GITHUB_ 前缀开头。

密钥名称不能以数字开头。

密钥名称不区分大小写。

密钥名称在所创建的级别上必须是唯一的。

⛔分支问题

本地分支和线上分支不一致导致总是提交不上。
注意观察autodeploy.yml文件中,

COPYgit push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" master:master

末尾的master:master指从本地的master分支提交到远程仓库的master分支。需要根据实际情况进行调整。本地的分支可在git bash中查看。线上的分支可在仓库查看。比如本地默认分支是master,线上默认分支是main,应该改成master:main

会遇到这类问题,一般是有同学直接全局替换mastermain导致。

建议全部走master分支,后续去网页版在线设置默认分支即可

⛔lockfileVersion@1版本问题

报错类似COPYread-shrinkwrap This version of npm is compatible with lockfileversion@1, but package-lock.json was generated forlockfileversion@2. I'll try to do my best with it!

执行action时报错,解决办法是通过node的版本与之匹配,node版本推荐 node-version: "16.x"

⛔公钥SSH权限问题

报错类似COPYPermission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists 

执行action时报错,(git)Warning: Permanently added the ECDSA host key for IP address ‘xxx.xxx.xxx’ to the list of known hosts. Permission denied (publickey)

执行git命时受到公钥SSH影响导致权限不够

⛔密钥无效问题

当添加公钥的时候出现了Key is invalid. You must supply a key in OpenSSH public key format github

    • 首先在本地生成key

  COPYbashssh-keygen -t rsa -C "邮箱"

    • 执行之后生成的文件 位置和名称 windows系统的路径一般是 C:\Users\Administrator/.ssh/id_rsa

    • 直接赋值粘贴.ssh的文件会破坏格式,需要打开 所在.put文件所在文件夹中的git bash然后

    • 输入 clip < id_rsa.pub 文件名字打一半tab键可以自动补全

    • 回车之后成功执行,内容就复制在剪切板

⛔提交信息为空,终止提交

报错类似COPYError: The deploy step encountered an error: The process ‘/usr/bin/git’ failed with exit code

从输出结果上看,-m后面确实有提交,但是空字符被识别,导致换行之后的信息不合法。
写上字或者删掉便正常运行。


Hexo b

    • 此命令可以使用Github Desktop安装登录后快速上传源码代替。

介绍

    • 使用hexo b命令一键备份插件到库,然后让Github Action自动化部署,懒人专用。

安装

COPYnpm install hexo-git-backup --save

配置

_config.ymlCOPY#一键备份 hexo b
#npm install hexo-git-backup --save
backup:
    type: git
    repository:
       github: git@github.com:xxx/xxx.git,branchName

使用

COPYhexo b

或者全拼hexo backup,⚠️注意:如果是安装并在Github Desktop上拉取的仓库,在与 hexo b 命令搭配的情况下是只能提交、不能 push,只需要把文件夹内的.git文件删除就行了。

可能遇到的bug

⛔Github报错

The file will have its original line endings in your working directory

问题描述:

git add:添加至暂存区,但并未提交至服务器。

git add .是表示把当前目录下的所有更新添加至暂存区。

有时在终端操作这个会提示:

COPYwarning: LF will be replaced by CRLF in ball_pool/assets/Main.js.
The file will have its original line endings in your working directory

原因:
这是因为文件中换行符的差别导致的。

这个提示的意思是说:
会把windows格式(CRLF(也就是回车换行))转换成Unix格式(LF),这些是转换文件格式的警告,不影响使用。

git默认支持LFwindows commit代码时git会把CRLFLFupdate代码时LFCRLF

解决方法:

注: . 为文件路径名COPYgit rm -r --cached .
git config core.autocrlf false
git add .
git commit -m ''
git push


Gulp 压缩资源,优化加载速度

Gulp

安装

[Blogroot]COPYnpm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件

安装各个下属插件以实现对各类静态资源的压缩

压缩HTML:

COPYnpm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev
# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法

压缩CSS:

COPYnpm install gulp-clean-css --save-dev

压缩JS:

采用gulp-terser,只会直接压缩js代码,所以不存在因为语法变动导致的错误 。事实上,当使用jsdelivrCDN服务时,只需要在css或者js的后缀前添加.min,例如example.js->example.min.js,JsDelivr就会自动使用terser压缩好代码。

COPYnpm install gulp-terser --save-dev

压缩字体包:

font-min仅支持压缩ttf格式的字体包

COPYnpm install gulp-fontmin --save-dev

创建gulpfile.js任务脚本

位置[Blogroot]\gulpfile.js

terser压缩js(不采用babel是因为bug多)

COPY//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', async() =>{
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(terser())
    .pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, //清除html注释
            collapseWhitespace: true, //压缩html
            collapseBooleanAttributes: true,
            //省略布尔属性的值,例如:<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            //删除所有空格作属性值,例如:<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            //删除<style>和<link>的 type="text/css"
            minifyJS: true, //压缩页面 JS
            minifyCSS: true, //压缩页面 CSS
            minifyURLs: true  //压缩页面URL
        }))
        .pipe(gulp.dest('./public'))
});
//压缩字体
function minifyFont(text, cb) {
  gulp
    .src('./public/fonts/*.ttf') //原字体所在目录
    .pipe(fontmin({
      text: text
    }))
    .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
    .on('end', cb);
}
gulp.task('mini-font', (cb) => {
  var buffers = [];
  gulp
    .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
    .on('data', function(file) {
      buffers.push(file.contents);
    })
    .on('end', function() {
      var text = Buffer.concat(buffers).toString('utf-8');
      minifyFont(text, cb);
    });
});
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html','mini-font'
))

使用

每次运行完hexo generate生成静态页面后,运行gulp对其进行压缩。指令流程如下

COPYhexo clean
hexo generate
gulp
hexo server 或 hexo deploy

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 共3条

请登录后发表评论