1. 技术文章
  2. Hexo：语雀云端写作，Github Actions持续集成

Hexo：语雀云端写作，Github Actions持续集成

由 戏子无情 提交于 2020-03-07 07:10:58

本文章为原创内容，只发布于本博客和我的私人博客，转载请注明，谢谢

使用 Hexo 静态博客网站发表文章，需要

  1. 本地以Markdown的形式写好文章
  2. 借助 Hexo 生成静态页面
  3. 部署到云主机或者通过 git 到托管平台

既然要本地借助 Hexo 生成静态页面，那就需要设置 Node.js 环境和博客源码，虽然环境设置简单，源码从Github、coding、gitee、gitlab等地方下载方便，但是在换电脑之后，又要重复相同的事情，还是比较麻烦，前一阵我用 docker 将我的博客源码打包成镜像留存下来，也是面临同样的问题，就是换电脑后还要安装 docker 和 docker-compose，也是麻烦。

当我遇见了 Github Actions 和 yuque-hexo 后，一切都发生了变化

简单来说就是

由 Hexo + 语雀 + yuque-hexo + Github Actions + web hook + severless 打造的持续集成个人博客

至于托管平台，Github Pages or Coding Pages or VPS or Other，自行选择。

  • Github 保存博客源码，私有库已经免费，还在用Travis CI？非开源的私有项目想在 Travis CI 上构建价格还是非常感人的!
  • Github Actions 是 Github 推出的一款持续集成工具，完全免费
  • 语雀 是阿里人都在用的笔记与文档知识库，专业的云端知识库，支持web hook
  • yuque-hexo 是 Github 上开源的一款语雀知识库同步工具
  • severless 是云函数，当前 腾讯云函数 和 阿里云函数都可以免费提供，对于博客，免费额度足够了，可以对比一下费用自行选择

关于 Hexo

Hexo 是一款基于 Node.js 的静态博客框架，其快速、简洁且高效。没有数据库和后台的概念。

  • 超快速度，Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
  • Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
  • 一键部署，只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
  • 插件和可扩展性，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

关于 Github Actions

不妨先去了解一下

About GitHub Actions

GitHub Actions 入门教程

[译] GitHub Actions 介绍，了解一下？

我的博客 持续集成和交付 专栏 有实例可以去参考一下，后续还会继续更新。

或者 我的 CSDN 博客

repository_dispatch

之所以有了这篇文章是因为我看到了Github Actions中的外部事件repository_dispatch

GitHub Actions支持的外部事件repository_dispatch 必须具有以下请求头：

curl -X POST https://api.github.com/repos/:owner/:repo/dispatches \
    -H 'Accept: application/vnd.github.everest-preview+json' \
    -H "Authorization: token GITHUB_PERSONAL_ACCESS_TOKEN" \
    -d '{"event_type":"start"}'

如果返回的Response是Status: 204 No Content，那就是成功了，去Github中看一看，事件已经被触发，这个可以使用postman测试一下

注意，Accept 具有application/vnd.github.everest-preview+json自定义媒体类型值。

语雀中的Web Hook是不能添加请求头的，所有我们就需要一个中间件把他们连接起来，这个就是serverless云函数

具体流程

  1. Hexo 博客搭建好，将源码上传到Github，私有还是公有库都可以
  2. 在Github中开启Github Actions服务，配置yaml格式的deploy脚本
  3. 注册语雀，创建知识库并发布一篇文章，必须发布过文章，因为yuque-hexo会删除_posts文件夹
  4. 编写serverless函数，测试可以触发Github Actions，获取触发地址
  5. 配置语雀的webhook，使其可调用serverless函数
  6. 触发Github Actions实现Hexo的自动部署，生成静态文件并发布

下面以Github Actions将Hexo生成的静态页面推送到Github Pages举例

创建 Github Pages

  1. 登录github
  2. 创建项目，项目名字username.github.io，必须为公开库
  3. 要求项目为空，不要创建 READNME.md

创建 Hexo 博客并配置

可参考：

配置完成，本地预览达到自己满意，编写文章发布一切搞定后就能继续了。

创建 Github 源码仓库

在github上创建存放Hexo源码的仓库，并将源码push到此仓库

配置 Github Actions 脚本

两种方法配置，内容一样

  1. 在Hexo源码仓库的页面选择Actions–>Set up a workflow yourself，进行网页编写
  2. 在本地环境根目录创建.github/workflows文件夹，里面放写好的yaml脚本

脚本我以一种举例，其他方法同样可以实现，请查看我的博客

首次使用，请将脚本中的所有git checkout master替换为git checkout -b master，第二次及以后都是git checkout master,就不需要改动了

  • git checkout master 切换到主分支
  • git checkout -b 新建并切换到新建的分支上
# workflow name
name: Deploy To Github And Coding

# 当有push到仓库和外部触发的时候就运行
on: [push, repository_dispatch]

# YUQUE_TOKEN
# Github_API_Token
# Coding_API_Token
# Coding_API_Username
jobs:
  deploy: 
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest 
    env:
      TZ: Asia/Shanghai    
        
    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository master branch
      uses: actions/checkout@master 
      
    # from: https://github.com/actions/setup-node  
    - name: Setup Node.js 10.x 
      uses: actions/setup-node@master
      with:
        node-version: "10.x"
    
    - name: Setup Git Infomation
      run: | 
        git config --global user.name 'hongweifuture' 
        git config --global user.email 'hongweifuture@163.com'  
 
    - name: Get Latest Commit Message 
      run: |
        git log --pretty=format:"%s from Github Actions at `date +"%Y-%m-%d %H:%M:%S"`" --date=short -n 1  > commit-message.log
        
    - name: Setup Hexo Dependencies and Generate public files
      env:
        YUQUE_TOKEN: ${{ secrets.YUQUE_TOKEN }}
      run: |
        npm install hexo-cli -g
        npm install yuque-hexo -g
        npm install
        npm run start
        
    - name: Deploy To Github Pages 
      env:
        Github_Pages: github.com/hongweifuture/hongweifuture.github.io
        Github_Token: ${{ secrets.Github_API_Token }}
      run: |  
        git clone https://${Github_Pages} .github_pages
        cd .github_pages
        git checkout -b master
        cd ../
        mv .github_pages/.git/ ./public/
        mv ./README.md ./public/
        cd ./public/
        git add .
        git commit -F ../commit-message.log
        git push --force --quiet "https://${Github_Token}@${Github_Pages}" master:master

    - name: Deploy To Coding Pages 
      env:
        Coding_Pages: e.coding.net/hongweifuture/hongweifuture.coding.me.git
        Coding_Token: ${{ secrets.Coding_API_Token }}
        Coding_Username: ${{ secrets.Coding_API_Username }}
      run: |
        git clone https://${Coding_Username}:${Coding_Token}@${Coding_Pages} .coding_pages
        cd .coding_pages
        git checkout -b master
        cd ../
        rm -r ./public/.git/
        mv .coding_pages/.git/ ./public/
        cd ./public/
        git add .
        git commit -F ../commit-message.log
        git push --force --quiet "https://${Coding_Username}:${Coding_Token}@${Coding_Pages}" master:master

这个脚本实现了发布Hexo的Public到Pages，这只是一种方法，你也可以使用ssh进行hexo d或者Aciton的包发布

但是现在你还不能运行，因为里面的隐藏参数还没有设置

参数 说明
YUQUE_TOKEN 从语雀获取的TOKEN，语雀上点击个人头像 --> 设置 --> Token 即可获取，要在Hexo源仓库的Settings–>Secrets中进行添加，对重要信息进行保密
Github_API_Token 从Github获取的personal access token，需要Secrets中进行添加
Coding_API_Token 从Coding获取的personal access token，需要Secrets中进行添加
Coding_API_Username 从Coding获取的username，2020年新升级Coding用户名有变化，需要Secrets中进行添加

这里要注意一个coding，我这里的写法是针对2020年最新版本的coding，前一阵进行了升级，与以前的URL还有格式不同

配置腾讯云函数

  1. 登录腾讯云，搜索云函数，创建
  2. 选择python，2.7和3.6都行，空白函数
  3. 运行角色，SCF_QcsRole即可
  4. 注意执行方法，有强制要求


这里我使用的是python 2.7

# -*- coding: utf8 -*-
import requests

def main_handler(event, context):
    r = requests.post("https://api.github.com/repos/用户名/仓库名/dispatches",
    json = {"event_type": "start"},
    headers = {"User-Agent":'curl/7.52.1',
              'Content-Type': 'application/json',
              'Accept': 'application/vnd.github.everest-preview+json',
              'Authorization': 'token Github访问Token'})

    if r.status_code == 204:
        return "This's OK!" 
    else:
        return r.status_code

在函数代码中测试一下，如果Actions正常触发，大功告成
5. 配置触发方式，保存，获取到访问路径

  • 触发方式：API网关触发器
  • API服务类型：新建API服务
  • API服务：SCF_API_SERVICE
  • 请求方法：ANY
  • 发布环境：发布
  • 鉴权方法：免鉴权
  • 启动集成响应：未启用

配置语雀

语雀上

  1. 注册，登录
  2. 创建知识库–>文档知识库–>可见范围为互联网可见
  3. 工作台–>知识库–>找到新创建的知识库，管理–>设置–>路径进行自定义，后面有用
  4. 工作台–>知识库–>找到新创建的知识库，管理–>设置–>开发者–>名称任意。URL为云函数的地址，即上面获取到的访问路径

权限建议选择

  • 仅主动推送更新触发（强烈建议）
  • 发布文档
  • 更新文档
  • 删除文档

hexo源码上

可本地更新后push或者直接github网页修改

先安装yuque-hexo

npm install yuque-hexo --save

编辑package.json文件，添加以下内容

Npm Scripts “start” 和 yuqueConfig，将操作命令合并为一个脚本，只需要执行npm run start即可完成语雀的同步和Hexo的清理和静态文件生成

{

 ...
 
  "scripts": {
    "start": "yuque-hexo clean && yuque-hexo sync && hexo clean && hexo generate",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  
 ...
 
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "语雀个人路径",
    "repo": "知识库名称",
    "mdNameFormat": "title",
    "postPath": "source/_posts",
    "onlyPublished": false
  }
}

Come on 发布文章

无论是发布新文章还是更新删除等等操作，只要选择“文档有较大更新，推送给关注知识库的人”即可自动触发

下面推荐了一下我的博客主题，算是广告吧~！！

关于 halo

本人目前使用的主题是 hexo-theme-halo ，这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。 是博主基于 hexo-theme-matery 主题修改而来。

主题演示

特性

  • 简单漂亮，文章内容美观易读
  • Material Design 设计
  • 博客名字动态显示，文章信息统计统页面展示
  • 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及每天动态切换 Banner 图片，首页轮播图设置为70%页面高度
  • 首页subtitle替换打字效果，添加动态诗词自动切换，
  • 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
  • 时间轴式的归档页，增加简约风归档页面
  • 分类页、标签页和标签云同一页面显示，集中展示
  • 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等可自定义）
  • 可自定义的数据的友情链接页面
  • 支持文章置顶和文章打赏
  • 类似于Python Django中SLUG用法的urlname
  • 支持 MathJax
  • TOC 目录
  • 可设置复制文章内容时追加版权信息
  • 可设置阅读文章时做密码验证
  • Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
  • 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
  • 支持在首页的音乐播放和视频播放功能
  • 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
  • 支持 DaoVoice、Tidio 在线聊天功能。

下载

当你看到这里的时候，应该已经有一个自己的 Hexo 博客了。如果还没有的话，不妨使用 Hexo 和 Markdown 来写博客和文章。

点击 这里 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-halo 的文件夹复制到你 Hexo 的 themes 文件夹中，并修改主题配置项即可。

当然你也可以在你的 themes 文件夹下使用 git clone 命令来下载:

git clone https://github.com/hongweifuture/hexo-theme-halo.git themes/halo

配置

详情请参照 hexo-theme-halo

标签
hexo
网站源码
github博客搭建
coding
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!