本文章为原创内容,只发布于本博客和 我的私人博客,转载请注明,谢谢
使用 Hexo 静态博客网站发表文章,需要
既然要本地借助 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,自行选择。
Travis CI
?非开源的私有项目想在 Travis CI
上构建价格还是非常感人的!web hook
severless
是云函数,当前 腾讯云函数 和 阿里云函数都可以免费提供,对于博客,免费额度足够了,可以对比一下费用自行选择Hexo 是一款基于 Node.js 的静态博客框架,其快速、简洁且高效。没有数据库和后台的概念。
Node.js
所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。Hexo
支持 GitHub
Flavored
Markdown
的所有功能,甚至可以整合 Octopress
的大多数插件。不妨先去了解一下
About GitHub Actions
GitHub Actions 入门教程
[译] GitHub Actions 介绍,了解一下?
我的博客 持续集成和交付 专栏 有实例可以去参考一下,后续还会继续更新。
或者 我的 CSDN 博客
之所以有了这篇文章是因为我看到了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云函数
下面以Github Actions将Hexo生成的静态页面推送到Github Pages举例
username.github.io
,必须为公开库可参考:
配置完成,本地预览达到自己满意,编写文章发布一切搞定后就能继续了。
在github上创建存放 Hexo源码 的仓库,此仓库和 Pages 不是一个仓库,并将源码push到此仓库
私有库和公开库都可以,放在 Pages 仓库其他分支也行,本教程是基于单独的 Hexo 源码仓库
两种方法配置,内容一样
Actions-->Set up a workflow yourself
,进行网页编写.github/workflows
文件夹,里面放写好的 yaml 脚本脚本我以一种举例,其他方法同样可以实现,请查看我的博客
如
# workflow name
name: Deploy To Github Pages
# 当有 push 到仓库和外部触发的时候就运行
on: [push, repository_dispatch]
# YUQUE_TOKEN
# Github_SSH_PRIVATE_KEY
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"
# from https://github.com/x-cold/yuque-hexo
- 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
# from https://github.com/peaceiris/actions-gh-pages
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.Github_SSH_PRIVATE_KEY }}
external_repository: 用户名/仓库
publish_branch: master
publish_dir: ./public
commit_message: ${{ github.event.head_commit.message }}
这个脚本实现了发布 Hexo 的 Public 到 Pages,这只是一种方法,你也可以使用 hexo d 、API、github-pages-deploy-action等形式进行发布。
参数 | 说明 |
---|---|
YUQUE_TOKEN | 从语雀获取的TOKEN,语雀上点击个人头像 --> 设置 --> Token 即可获取,要在Hexo源仓库的Settings–>Secrets中进行添加,对重要信息进行保密 |
Github_API_Token | 是SSH-Key 密钥中的私钥,需要在Secrets 中进行添加,公钥(.pub)已经存储在 Github 中 |
python
,2.7和3.6都行,空白函数SCF_QcsRole
即可这里我使用的是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正常触发,大功告成
权限建议选择
可本地更新后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
}
}
无论是发布新文章还是更新删除等等操作,只要选择“文档有较大更新,推送给关注知识库的人”即可自动触发
下面推荐了一下我的博客主题,算是广告吧~!!
本人目前使用的主题是 hexo-theme-halo ,这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。 是博主基于 hexo-theme-matery 主题修改而来。
主题演示
Banner
图片,首页轮播图设置为70%页面高度subtitle
替换打字效果,添加动态诗词自动切换,24
张漂亮的图片代替)增加简约风归档页面
标签云
同一页面显示,集中展示SLUG
用法的urlnameMathJax
TOC
目录Gitalk
)Google Analytics
)和文章字数统计等功能emoji
表情,用markdown emoji
语法书写直接生成对应的能跳跃的表情。当你看到这里的时候,应该已经有一个自己的 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