Hexo & (GithubActions | Travis CI)

原文地址

基本概念

仓库: 就是项目文件存放的位置,如果只完成第一步,不需要私有仓库,因为现在私有仓库免费了,所以考虑用私有仓库作为你的博客内容文件,用来存一些你觉着可能会用到但是又不希望别人看到的文件.仓库的名字可以随便取,但有一个名字是有特殊含义的,就是 UserName.github.io, 这个往往用来作为博客域名,并且你可以为其申请免费 https

CNAME: 当你不喜欢上面那个域名,就可以通过在根目录下添加该文件来作 CNAME 转发

自动化部署: 就是你觉着每次都不用改变的重复劳动, 写成脚本即可,比如博客部署流程

博客部署流程: 本地 source 目录决定内容, _config.yml 决定网站基本配置(如名称, 部署方式, 默认配置等), 每次 hexo g 将会根据 source_config.yml generate 对应的网页文件, 然后 hexo d 将会根据 config_yml 的 deploy 选项进行 push

add, commit, push: git基本操作,不作解释

ACCESS_TOKEN: 上述流程明显需要脚本有操作你仓库的权限,这个权限就通过 token 的形式来授予.

Travis CI: 尽量使用该网站, 而不是 travis-ci.org, 后者不知道我用的时候为啥部署不了,该网站就是提供免费帮你跑部署脚本用的

环境准备

本地

首先具备一个 node 环境和 git 环境,考虑到速度建议 npm 改成 cnpm ,而 git 可以通过改 .gitconfig 来走代理。

远程

仓库及重要文件位置

远程需要

  • 一个 source 仓库用来存放你的博客内容文件,重点注意必须有 .travis.yml, _config.yml, package.json 配置文件和 source 文件夹, 如果考虑精简该仓库可以通过添加 .gitignore 的方式, 以下仅供参考
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.vscode/
  • 一个UserName.github.io 来作为你的站点文件, 以及配置一个ACCESS_TOKEN提供给 Travis CI 使用. 没啥重点文件, 内容完全交给 deploy 来决定, 不要忘了在仓库的 setting 里开启 https, 而ACCESS_TOKEN 是在全局 setting 里的

搭博客分两步,第一步是为了方便,本地初始化一次『可以考虑算是本地备个份』,第二部是搭建后云端同步和常用操作。

本地初始化

本地初始化安装hexo脚手架,意思就是说安装个工具用来初始化你的博客(比如文件夹创建,配置啥的)

cnpm install hexo-cli -g
# 利用 cli 创建hexo项目
hexo init blogName
cd blogName
# 安装 deploy 插件
cnpm install hexo-deployer-git --save

初始化之后重点说下关注点:

  • 一个文件_config.yml,这个文件关注两处存在,一份根目录下,一份在themes目录下: 明显就是一个配置博客,一个配置主题。
  • 然后source目录下有个_post目录,这个目录用来存放写的md也就是你的博客内容.
  • 最后就是public目录,因为浏览器端不能直接解析markdown,所以需要转化成 jch <js, css, html> ,这个目录就是用来存放转化后的目录。

前面根目录下的config.yml就是用来配置部署博客到哪个服务器的。打开后将deploy项进行更改就好。

deploy:
  type: git
  repo: <repository url>
  branch: [branch]

博客这样就搭建好了,以后你就可以

  1. 写一个md文件放在post目录下
  2. 然后 hexo g 生成 jchhexo d 部署(就是将生成好的网页传到服务器端提供访问)

云端同步

上面的步骤已经可以了,但是有两个贼烦的点:

  • 我每次写完博客都要 hexo g & d 一下,麻烦

  • 自己的电脑gg了就凉了,不能随时写作

所以有了第二步操作: TravisCI 自动化部署,首先去用户Setting-DeveloperSetting当中申请一个有repo权限的Token,
该Token 将作为环境变量 ACCESS_TOKEN

# 指定语言环境
language: node_js
# 指定需要sudo权限
sudo: required
# 指定node_js版本
node_js: 
  - stable
# 指定缓存模块,可选。缓存可加快编译速度。
cache:
  directories:
    - node_modules

# 指定博客源码分支,因人而异。hexo博客源码托管在独立repo则不用设置此项
branches:
  only:
    - source 

before_install:
  - npm install -g cnpm --registry=https://registry.npm.taobao.org
  - cnpm install -g hexo-cli

# Start: Build Lifecycle
install:
  - cnpm install
  - cnpm install hexo-deployer-git --save

# 执行清缓存,生成网页操作
script:
  - hexo clean
  - hexo generate

# 设置git提交名,邮箱;替换真实token到_config.yml文件,最后depoy部署
after_script:
  - git config user.name "ReZeroS"
  - git config user.email "1726542850@qq.com"
  # 替换同目录下的_config.yml文件中gh_token字符串为travis后台刚才配置的变量,注意此处sed命令用了双引号。单引号无效!
  - sed -i "s/gh_token/${ACCESS_TOKEN}/g" ./_config.yml
  - hexo deploy

# End: Build LifeCycle

上面的文件只有一个地方需要注意: sed -i "s/gh_token/${ACCESS_TOKEN}/g", 这句话的含义很明显就是正则替换,也就是为更改 _config.ymldeploy 选项做准备.

因为推出了github actions, 这里加一份github actions 的版本

on:
  - push

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout master branch
        uses: actions/checkout@master
        with:
          fetch-depth: 1

      - name: Setup nodejs
        uses: dcodeIO/setup-node-nvm@master
        with:
          node-version: node
          node-mirror: https://nodejs.org/download/v8-canary/

      - name: Dependency install
        run: |
          npm install -g cnpm --registry=https://registry.npm.taobao.org
          cnpm install -g hexo-cli
          cnpm install
          cnpm install
      
      - name: Clean And Regenerate 
        run: |
          ./node_modules/.bin/hexo clean
          ./node_modules/.bin/hexo generate
          
      - name: Deploy
        env: 
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        run: |
          git config --global user.name "ReZeroS"
          git config --global user.email "1726542850@qq.com"
          sed -i "s/gh_token/${ACCESS_TOKEN}/g" ./_config.yml
          ./node_modules/.bin/hexo deploy

结束

改完后 push 到你的私有仓库就可以了,这样每次你都可以直接 浏览器端 打开你的私有仓库,然后直接新建md文件, 然后你的 commit 记录就会被 TravisCI 监测到, 会自动触发 hook, 因而就 push 到你的博客了.

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值