编辑
2020-07-25
study
00
请注意,本文编写于 1404 天前,最后修改于 512 天前,其中某些信息可能已经过时。

目录

前言
配置GithubAction
生成key
配置仓库
配置workflow
测试
配置gulp
安装gulp

差点翻车

前言

GithubAction作为Github提供的免费的CI/CD服务,让开发者感受到了自动化的爽,相比起Travis CI来说,GitHubAction集成方便,非常适合快速部署的操作,本教程便是一篇如何利用GithubAction对于GithubPage+Hexo博客进行自动化部署,并利用gulp进行压缩。

配置GithubAction

生成key

首先依旧是申请key,

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

image-20200724215856700

此时会生成**.pub的公钥与没有后缀的私钥**:

成功生成密钥

配置仓库

首先新建一个空仓库,用于存放你的博客根目录,新建完成后将博客根目录所有文件都上传到这个仓库中,传完项目结构大体如下:

image-20200724220337436

然后开始配置仓库,首先

image-20200724220449987

image-20200724220517055

配置成你的公钥,然后在上传博客的仓库中,上传你的私钥:

image-20200724220651398

注意这里的私钥名字一定要跟后面Action里面设置的一样!(不知道就跟我一样)

配置workflow

在博客根目录新建.github文件夹,再在.github文件夹里新建workflows文件夹,新建完在workflows文件夹里新建deploy.yml文件,然后按照如下编写:

yaml
# workflow name name: Deploy To Github Pages # 当有 push 到仓库就运行 on: [push] jobs: deploy: name: Deploy Hexo Public To Pages runs-on: ubuntu-latest env: TZ: Asia/Shanghai steps: # 切换到master # from: https://github.com/actions/checkout - name: Checkout Repository master branch uses: actions/checkout@master # 安装node # from: https://github.com/actions/setup-node - name: Setup Node.js 11.x uses: actions/setup-node@master with: node-version: "11.x" # 缓存 node_modules - name: Cache node modules uses: actions/cache@v2 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.OS }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build- ${{ runner.OS }}- # 安装hexo并生成 - name: Setup Hexo Dependencies run: | npm install hexo-cli -g npm install hexo generate # 部署到GitHubPage # from https://github.com/peaceiris/actions-gh-pages - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 这里写你自己的仓库名 external_repository: xmmmmmovo/xmmmmmovo.github.io publish_branch: master publish_dir: ./public commit_message: ${{ github.event.head_commit.message }}

好了,这样就已经配置完成了,你每次提交到此仓库,便会自动帮你运行部署到GithubPage上去。

测试

image-20200724221510619

image-20200724221450653

可以看到,已经成功运行了。

配置gulp

我们随便点开一个文件:

image-20200724221832348

可以看到,里面充斥着大量的空格,积少成多,这会占用非常多的时间,让你的博客感觉加载起来很慢,所以既然我们都是全自动化部署了,我们不如直接在进行一遍压缩操作,这样使你博客加载的更加迅速,体验更加良好。

安装gulp

首先进到博客根目录,然后打开命令行,输入(这里其实你直接在package.json里面写也行(因为node_modules已经没用了),但是我比较懒):

shell
npm install gulp@3.9.1 gulp-minify-css gulp-htmlmin gulp-htmlclean --save-dev

待完成后,改写deploy.yml

yaml
# workflow name name: Deploy To Github Pages # 当有 push 到仓库就运行 on: [push] jobs: deploy: name: Deploy Hexo Public To Pages runs-on: ubuntu-latest env: TZ: Asia/Shanghai steps: # 切换到master # from: https://github.com/actions/checkout - name: Checkout Repository master branch uses: actions/checkout@master # 安装node # from: https://github.com/actions/setup-node - name: Setup Node.js 11.x uses: actions/setup-node@master with: node-version: "11.x" # 缓存 node_modules - name: Cache node modules uses: actions/cache@v2 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.OS }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build- ${{ runner.OS }}- # 安装hexo并生成 - name: Setup Hexo Dependencies run: | npm install hexo-cli -g npm install hexo generate gulp # 部署到GitHubPage # from https://github.com/peaceiris/actions-gh-pages - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 这里写你自己的仓库名 external_repository: xmmmmmovo/xmmmmmovo.github.io publish_branch: master publish_dir: ./public # 这里我改成了与原格式相似格式的commit message commit_message: 'Site updated: ${{ github.event.head_commit.timestamp }}'

然后编写gulpfile.js文件用来加载gulp

javascript
var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var htmlmin = require('gulp-htmlmin'); var htmlclean = require('gulp-htmlclean'); gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public')) }); gulp.task('minify-html', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true })) .pipe(gulp.dest('./public')) }); gulp.task('default', ['minify-html', 'minify-css']);

此时再次提交,等待GithubAction完成之后,便可以查看效果了~

image-20200724222548668

可以看到800多行瞬间变为了16行,是不是很爽~

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:xmmmmmovo

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 许可协议。转载请注明出处!