轉自我的blog：https://rayleeafar.github.io/2019/01/17/yuque/%E8%AF%A6%E7%BB%86Hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%EF%BC%9A%E4%BA%91%E7%AB%AF%E5%86%99%E4%BD%9C+%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA+%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/
YuQue雲端寫作+Travis-ci自動構建+github-pages發佈
序言：在網上看見Nero大神的一篇文章https://segmentfault.com/a/1190000017797561，簡單講述瞭如何構建一個雲端寫作自動部署到github pages的hexo 靜態博客網站，之前我已經在github pages上搭建了一個博客，無奈覺得每次寫作非常不方便，用代碼編輯器vs code寫md文檔然後手動生成靜態再部署，寫作環境實在太差，之後便放棄直接在CSDN上寫了。看到上面那篇文章，頓覺激動，在語雀這樣方便的平臺上編寫文檔，自動部署，簡直爽翻，遂動手開幹，花了半天的時間搞定。由於大神寫的過於簡略，途中遇到不少坑，遂填坑出一個完整的搭建流程
結果：
- 我已搭建好的博客： https://rayleeafar.github.io/
- 發佈博客靜態頁面的倉庫： https://github.com/rayleeafar/rayleeafar.github.io
- 博客源碼的倉庫： https://github.com/rayleeafar/rayleeafar-blog
有問題可以參考源碼裏面的配置
搭建步驟：
一、GitHub pages + Hexo 搭建初級個人博客
參考文章：
- 初始化GitHub pages: https://pages.github.com/
- 安裝hexo及相關依賴: https://hexo.io/zh-cn/docs/
- 在第一步的GH-pages倉庫目錄中初始化hexo: https://hexo.io/zh-cn/docs/setup
- 開始寫作: https://hexo.io/zh-cn/docs/writing
- 部署到github pages: https://hexo.io/zh-cn/docs/deployment
二、GitHub pages + Hexo + travis-ci 搭建中級 CI自動部署博客
主要步驟參考: https://segmentfault.com/a/1190000004667156#articleHeader1
其中需要注意的幾點是:
- 文章需要安裝Ruby，才能使用gem 安裝travis工具
sudo apt install ruby gem install travis
cd path/to/your/repo/.travis ssh-keygen -t rsa -C "[email protected]" travis login --pro #用github賬號登錄 travis encrypt-file id_rsa --pro #得到 openssl aes-256-cbc -K $encrypted_xxxxxxxxxxx_key -iv $encrypted_xxxxxxxxxxx_iv #其中 id_rsa.enc的位置需要注意設置對
- 生成ssh-key的過程有點問題，按照文章ci部署的時候會報錯 vi undefine，正確步驟是用以下命令登錄
注意以上兩個點，按照文章步驟申請travis賬號開通repo權限就能完成部署了
三、GitHub pages + Hexo + travis-ci + YuQue + Serverless搭建高級 雲端寫作->自動部署博客
步驟參考文章:
按照大神的文章走，主要注意以下幾點，找到並設置對各個參數
- YuQue-hexo庫的使用 https://github.com/x-cold/yuque-hexo
- 修改package.json，增加配置:
"yuqueConfig": {
"baseUrl": "https://www.yuque.com/api/v2",
"login": "rayleeafar",#填寫你的語雀賬號名稱
"repo": "gg272k",#填寫在語雀上創建的文章倉庫的編號一般是幾個字母數字，你也可以自己改，下圖中路徑最後的那個值
"mdNameFormat": "title",
"postPath": "source/_posts/yuque"
},
"scripts": {
"sync": "yuque-hexo sync",
"clean:yuque": "yuque-hexo clean",
"deploy": "npm run sync && hexo clean && hexo g -d",
}
* serverless 函數中參數的設置:
文章中說用postman發個請求，也可以用curl:
再返回的數據中找到repo的id，我的是：7596310
>> curl -H "Travis-API-Version: 3" -H "User-Agent: API Explorer" \ -H "Authorization: token <your_token>" \ https://api.travis-ci.org/owner/<your_name>/repos
#curl的返回信息
......
"repositories": [
{
"@type": "repository",
"@href": "/repo/7596310",
"@representation": "standard",
"@permissions": {
"read": true,
"migrate": true,
"star": true,
"unstar": true,
"create_cron": true,
"create_env_var": true,
"create_key_pair": true,
"delete_key_pair": true,
"create_request": true,
"admin": true,
"activate": true,
"deactivate": true
},
"id": 7596310,
"name": "rayleeafar-blog",
"slug": "rayleeafar/rayleeafar-blog",
"description": null,
"github_id": 166050465,
"github_language": null,
"active": true,
"private": false,
"owner": {
"@type": "user",
"id": 1254643,
"login": "rayleeafar",
"@href": "/user/1254643"
},
......
- 我申請的是騰訊的serverless服務，在騰訊雲上註冊登錄，創建函數服務:
用下面這個函數，作者的那個裏面 有個接口地址有點不同，我抓travis看到接口URL是另一個：
curl_setopt($curl, CURLOPT_URL, 'https://api.travis-ci.com/repo/'.$repos.'/requests');
<?php
function main_handler($event, $context) {
// 解析語雀post的數據
$update_title = '';
if($event->body){
$yuque_data= json_decode($event->body);
$update_title .= $yuque_data->data->title;
}
// default params
$repos = '7596310'; // 你的倉庫id 或 slug
$token = 'yJsKEMoSNUmQSv9kLFsbvg'; // 你的登錄token
$message = date("Y/m/d").':yuque update:'.$update_title;
$branch = 'master';
// post params
$queryString = $event->queryString;
$q_token = $queryString->token ? $queryString->token : $token;
$q_repos = $queryString->repos ? $queryString->repos : $repos;
$q_message = $queryString->message ? $queryString->message : $message;
$q_branch = $queryString->branch ? $queryString->branch : 'master';
echo($q_token);
echo('===');
echo ($q_repos);
echo ('===');
echo ($q_message);
echo ('===');
echo ($q_branch);
echo ('===');
//request travis ci
$res_info = triggerTravisCI($q_repos, $q_token, $q_message, $q_branch);
$res_code = 0;
$res_message = '未知';
if($res_info['http_code']){
$res_code = $res_info['http_code'];
switch($res_info['http_code']){
case 200:
case 202:
$res_message = 'success';
break;
default:
$res_message = 'faild';
break;
}
}
$res = array(
'status'=>$res_code,
'message'=>$res_message
);
return $res;
}
/*
* @description travis api , trigger a build
* @param $repos string 倉庫ID、slug
* @param $token string 登錄驗證token
* @param $message string 觸發信息
* @param $branch string 分支
* @return $info array 回包信息
*/
function triggerTravisCI ($repos, $token, $message='yuque update', $branch='master') {
//初始化
$curl = curl_init();
//設置抓取的url https://api.travis-ci.com/repo/7596310/requests
curl_setopt($curl, CURLOPT_URL, 'https://api.travis-ci.com/repo/'.$repos.'/requests');
//設置獲取的信息以文件流的形式返回，而不是直接輸出。
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
//設置post方式提交
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
//設置post數據
$post_data = json_encode(array(
"request"=> array(
"message"=>$message,
"branch"=>$branch
)
));
$header = array(
'Content-Type: application/json',
'Travis-API-Version: 3',
'Authorization:token '.$token,
'Content-Length:' . strlen($post_data)
);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
//執行命令
$data = curl_exec($curl);
$info = curl_getinfo($curl);
//關閉URL請求
curl_close($curl);
return $info;
}
?>
- 按照文章的步驟創建並填對參數應該就事成一大半了
後記
按照上述文章及注意的點走完，試試在語雀上寫個文章併發布，登錄serverless看看hook有沒有觸發，登錄travis-ci看看構建是否成功，有問題留言聯繫呀～～
祝各位寫作愉快～～～～～