一個博客的誕生

以前的博客都是記錄在簡書，偶爾有些零散的文章會往掘金和CSDN發一發，雖然這些平臺寫做體驗仍是挺不錯的，不用考慮推廣也有一些流量，可是前段時間簡書整頓了一波，有幾篇文章無辜被鎖，以爲很惱火。
再想一想這些寫做平臺頁面千篇一概不夠個性化，還不如本身搭個我的博客，一來不用擔憂審查什麼的帶來的附帶傷害，也折騰一下沒搞過的東西，給人生增長點樂趣。

我的需求

仔細考慮了下我的的需求，其實比較簡單，就是要逼格必定要高。
因此主題得找本身喜歡的~
因此我的域名必定是要的~
因此必定不能寫完了還要敲幾行命令別人才能看到~
因此評論啊，人數統計啊，字數統計啊，該有的絕對不能少~
固然還得夠快。

如今的各類公衆號 vlog等自媒體形態潮的飛起，相比之下博客顯得有點Old School。不過這帶來的好處就是技術方案基本都比較成熟了，在網上隨便找找，果真成熟的技術就是好，直接有方案能夠知足大部分本身的需求
Hexo 博客終極玩法：雲端寫做，自動部署
總結起來就是

• 阿里的語雀平臺進行寫做
• webhook觸發travis-ci 自動構建
• 下載語雀的文章生成md文件
• hexo 生成博客
• github-pages做爲頁面託管

搭建工做

以前沒搞過前端的工做，整個環境的搭建仍是費了些功夫，不過關於整個搭建工做，按照網上文章step by step的作也就差很少了，這裏只記錄下本身的粗枝大葉的地方，浪費了很多時間

首先是hexo theme的命名

這是一個比較低級的錯誤，不過確實卡了我有半個小時，在下載主題的時候我直接下載的zip解壓，文件夾名字是帶分支的，和_config.yml中的theme名字不對應，致使生成不了正常的頁面

再就是Travis-CI ssh的問題

• 注意.travis/ssh_config中的配置,rsa文件的路徑要正確，由於我配置了多個git倉庫，因此一個也不能漏

Host github.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa_ci
    IdentitiesOnly yes
Host gitee.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa_ci
    IdentitiesOnly yes
Host git.dev.tencent.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa_ci
    IdentitiesOnly yes
複製代碼

yuque-hexo 中語雀token

文檔中說是公開庫能夠不用token，可是本身嘗試公開庫依然須要token，且token應在travis-ci中定義環境變量，更安全一些，不過依賴travis-ci進行每次調試很費時間，能夠在 package.json的yuqueConfig中定義token，見#30

持續優化

博客撘完，導入幾個模板測試一下，一切順利，然而一個愛折騰的程序員怎麼能就此知足呢
這個博客還有幾個問題

• 沒有一個本身的域名，掛在github.io下面逼格不夠
• github在國內訪問不太穩定
• 語雀的文章只是生成了靜態頁面push到github上，並且每次都是強制推送沒有歷史記錄，原始的md文件也沒有進行備份

域名申請

由於貧窮，在freenom 上申請了一個免費的域名sunhapper.tk，綁定到github也很簡單

• 在 freenom 的dns管理中設置一個子域名的CNAME指向sunhapper.github.io，我設置的是BLOG
• 在github託管博客的頁面綁定以前註冊的子域名blog.sunhapper.tk

如今使用訪問blog.sunhapper.tk就能夠定向到sunhapper.github.io了

網上很多文章說要設置A記錄指向github的ip地址，實際沒有必要，A記錄的設置是在擁有本身的公共IP時將域名和ip進行綁定的，github的ip實際並非你本身維護的，這樣綁定沒有意義

訪問穩定性提高

dns

綁定完域名，試驗下，我的感受還行，不過讓其餘朋友試試發現仍是有些問題

因此訪問性優化第一步就是換dns服務器，申請了dnspod做爲dns服務器，由於以前公司的dns用的就是dnspod，並且對這種我的博客也是免費的，切換過程比較順暢，在dnspod設置完將freenom的dns服務器改爲自定義的就完了

cdn

由於github在國內的訪問也是不太穩定的，因此考慮使用cdn進行加速，可是最終沒有使用，主要由於

• 國內的cdn所有須要進行域名備案，只是一個我的博客不是很想折騰這個
• 嘗試了cloudflare，雖然不用備案，可是它的免費方案節點應該都是在國外的，加速效果很是通常

基於以上緣由，沒有使用cdn，而是使用了國內的git倉庫進行頁面託管

國內git託管

國內的提供pages功能的git倉庫有coding、gitee，以前用gitee比較多，可是gitee要收費版本纔有自動發佈和自定義域名功能，貧窮讓我使用了coding
往coding推送靜態頁面和github並無什麼不一樣
在dnspod上設置下指向coding的CNAME並設置爲默認，github.io設置爲國外訪問
由於coding的ssl證書站點在國外，因此若是設置爲github.io做爲國外路線的CNAME則會對開啓https有影響，因此爲了https只好忍痛放棄多線路的支持，改爲全部訪問都定向到coding

備份

由於同步語雀文章，生成靜態頁面，向託管倉庫部署頁面都是在travis上進行的，這致使博客源碼倉庫不會發生任何變化，而靜態頁面的託管倉庫的推送都是強制的，因此也沒有歷史記錄，這樣讓版本回滾很是困難，並且徹底依賴語雀平臺，語雀萬一掛了，博客文章的修改及更新就變得比較困難

因此在travis-ci中執行同步文章操做後會添加一個提交，並推送到github，安全起見，在gitee弄了鏡像倉庫，也備份一下，畢竟前段時間MYZ github也是有一些動做的

這個備份操做仍是比較順暢的，畢竟幾個倉庫都配了ssh key，擁有徹底的讀寫權限，就是在生成新的commit_message時耽誤了比較久
來看下到底被什麼給block了

serverless函數

回過頭看看Hexo 博客終極玩法 中serverless函數這一段，這個函數的功能是將語雀的webhook調用轉換成travis-ci api的形式，其中帶上了被修改的文件名做爲message放在body的request字段裏

$post_data = json_encode(array(
        "request"=> array(
            "message"=>$message,
            "branch"=>$branch
        )
    ));
複製代碼

按照travis-ci的文檔，這個message應該覆蓋 TRAVIS_COMMIT_MESSAGE 環境變量，可是實際並無見github.com/travis-ci/t… ，每次 TRAVIS_COMMIT_MESSAGE 都是最新的提交的message，這樣我想建立一個新的commit它的message是什麼就沒有依據了

查了下文檔，Triggering builds with API V3 發現config的env字段能夠添加環境變量，因此本身加個環境變量做爲commit-message好了

$post_data = json_encode(array(
        "request"=> array(
            "message"=>$message,
            "branch"=>$branch,
            "config"=>array(
                "env"=>array(
                    "DESC"=>preg_replace("/\t/","",$message)
                )
            )
        )
    ));
複製代碼

.travis.yml

.travis.yml 中修改

- NEW_MESSAGE=${DESC:-$TRAVIS_COMMIT_MESSAGE} //有DESC環境變量就用DESC，沒有就用TRAVIS_COMMIT_MESSAGE
- echo ${NEW_MESSAGE}
複製代碼

這裏有個問題，travis-ci在取環境變量的字符串時，若是中間有空格，會只取空格前的字符串，這個還沒想到方式解決，只好生成DESC時不加空格了

坑已踩完，每次語雀更新文章都會在git上生成一個包含修改文件的commit了

todo

幹了兩天，終於得到了一個自定義域名，國內外分線路訪問，自動部署的我的博客了，固然有些事情還沒作完，標記下備忘

圖牀問題

如今暫時使用的是直接複製到語雀編輯頁面自動生成md圖片地址，可是這個地址只有在生成md時纔看的到，在其餘地方使用比較麻煩，好比封面等，因此須要考慮其餘圖牀

圖片備份

看到網上各類博客上裂開的圖片，天生對圖牀有種不安全感，因此圖片展現能夠用圖牀，可是在git倉庫應該也須要一個備份，以便圖牀掛了能夠及時遷移
一行代碼提取markdown文件中圖片

語雀生成的md文件格式化

語雀生成的md文件中多了不少html標籤，例如段落的換行都是使用<br>，這在不一樣md解析器中效果不一樣，因此須要格式化成較爲標準的格式，方便其餘地方發佈
使用下面命令進行文本替換

sed -E -i "s/<br \/>/ \n/g"  $1 ## 刪除<br \/
sed -E -i "s/<a\sname=\"\w*\"><\/a>//g" $1 ## 刪除標籤
sed -E -i "s/\xc2\xa0/ /g" $1 ## 刪除html空格特殊字符
複製代碼

html特殊字符這個東西仍是挺坑的，以前 front-matter 有問題也是由於這個，具體解決方案見
How to deal with NBSPs in a terminal

多平臺發佈

每篇文章都是本身的心血，固然想讓更多的人看到，並且使用了travis自動部署，那麼除了git託管，其餘平臺若是能夠自動發佈的話支持一下，是否是就能夠走上人生巔峯了呢，想一想還有些小激動呢~

最後

本博客第一篇文章終於完成了，後續會把其餘平臺的文章逐漸遷移過來，也會不斷進行技術博客輸出，敬請關注

一波廣告

sunhapper的博客
sunhapper的github

致謝

感謝幫助我完成博客搭建所用到的開源工具以及平臺
Hexo
yuque-hexo
hexo-theme-matery
語雀