Github Action / Gulp / Hexo b

Github Action / Gulp / Hexo b

3115014

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 参考官方为命令行创建个人访问令牌

关于Gitee和Coding的步骤与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.yml的deploy配置项是否按照上文配置 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。

会遇到这类问题，一般是有同学直接全局替换master为main导致。

建议全部走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默认支持LF。windows commit代码时git会把CRLF转LF，update代码时LF换CRLF。

解决方法：

注： . 为文件路径名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代码，所以不存在因为语法变动导致的错误 。事实上，当使用jsdelivr的CDN服务时，只需要在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

© 版权声明
相关声明 1 微信公众号：猪猪安全
2 本站永久网址：https://www.iculture.cc
3 本文内容仅为技术科普，请勿用于非法用途
4 本文内容未隐讳任何个人、群体、公司。非文学作品，请勿用于阅读理解的练习
5 根据《计算机软件保护条例》第十七条，本站所有软件请仅用于学习研究用途
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责
THE END
干货分享
# hexo# hexo博客# hexo主题# hexo博客部署到服务器# hexo博客怎么写文章# hexo博客图片不显示# 搭建hexo# 搭建hexo博客# 搭建hexo博客难吗# 搭建hexo手机# 部署hexo# 安装hexo失败# 安装hexo什么标志算是成功# 安装hexo一直不成功# hexo博客官网# hexo博客美化# 安装hexo# g报错# 命令行无法被找到
喜欢就支持一下吧
点赞14 分享
用户的头像-FancyPig's blog汉堡会员
Hexo 入门到入土👨‍💻-FancyPig's blog
Hexo 入门到入土👨‍💻
Hexo 入门到入土👨‍💻
1个月前 1900
Markdown 相关-FancyPig's blog
Markdown 相关
Markdown 相关
5天前 1556
压缩 | 图片 GIF 视频-FancyPig's blog
压缩 | 图片 GIF 视频
压缩 | 图片 GIF 视频
5天前 1549
Oh My Posh 个性化终端-FancyPig's blog
Oh My Posh 个性化终端
Oh My Posh 个性化终端
5天前 1499
博客架构框架🤖-FancyPig's blog
博客架构框架🤖
博客架构框架🤖
3个月前 1199
高效搜索🔍-FancyPig's blog
高效搜索🔍
高效搜索🔍
1个月前 966
相关推荐
评论 共3条

请登录后发表评论

    只看作者
    • Modular的头像-FancyPig's blog披萨会员Modular徽章-初出茅庐-FancyPig's blog等级-LV1-FancyPig's blog0
      滴！猪头粉丝卡！打卡时间：15:40:59，请上车的乘客系好安全带~
      2个月前
    • 风之凯的头像-FancyPig's blog汉堡会员风之凯徽章-原创达人-FancyPig's blog等级-LV10-FancyPig's blog0
      滴！猪头粉丝卡！打卡时间：10:07:38，请上车的乘客系好安全带~
      2个月前
    • 小羽本是鱼的头像-FancyPig's blog汉堡会员小羽本是鱼徽章-原创达人-FancyPig's blog等级-LV10-FancyPig's blog0
      滴！猪头粉丝卡！打卡时间：09:43:40，请上车的乘客系好安全带~
      2个月前
本文作者
用户封面
用户的头像-FancyPig's blog汉堡会员
Oh My Posh 个性化终端
压缩 | 图片 GIF 视频
Markdown 相关
Hexo Demo
域名解析⏳
Hexo 入门到入土👨‍💻
标签云
burpsuite渗透测试网络安全软件渗透python黑客burpsuite下载安装burpsuite下载burpsuite安装详细教程APP素材burpsuite爆破密码kaliburpsuite是什么工具漏洞渗透教程burpsuite专业版破解产品运营burpsuite破解版安装教程小云课堂qqsql注入linux社工burpsuite专业版nessus源码远控post远程控制钓鱼burpsuite下载最新破解版burpsuite破解版下载burpsuite使用教程信息安全域名burpsuite最新版burpsuite破解版小云教程dvwaxss王者荣耀awvsburpsuite破解教程burpsuite专业版和社区版什么区别burpsuite专业版激活码burpsuite专业版价格burpsuite安装后怎么打开https社工库暴力破解burpburpsuite破解keyburpsuite安装教程run不弹框UI图标DNSwiresharknessus插件下载burpsuite安装证书burpsuite下载教程nessus插件更新mysql在线社工库nessus工具的作用nessus插件下载失败产品测评产品分析内容运营discuz插件dvwa实验web安全ctfgoogle定位虚拟机metasploitburpsuite最新版破解awvs是什么工具nessus扫描教程零基础