關(guān)于作者：程序猿石頭(ID: tangleithu)，現(xiàn)任阿里巴巴技術(shù)專家，清華學(xué)渣，前大疆后端 Leader。公眾號后臺回復(fù)關(guān)鍵字 “1024” 獲取程序員大廠面試指南。

圖：Drone promotions from SkyPixel

背景

石頭大約在 2010 年左右有了自己的第一個域名，也是從那個時候開始寫博客的。至今確實有 10 年時間了。

最初玩 blog，其實更多的還是抱著學(xué)習(xí)的態(tài)度。比如剛學(xué)習(xí)完了 DNS 解析，HTML 語法，不 “實戰(zhàn)”一把么？然后后續(xù)又陸陸續(xù)續(xù)把讀書筆記、課程總結(jié)都往博客上放。

為什么要寫 blog，石頭覺得有如下幾個好處：

• 可以把它作為整理學(xué)習(xí)筆記的地方，方便沉淀學(xué)習(xí)，就跟當(dāng)初我開始玩一樣。更多的是寫給自己看，玩玩“建站”流程（獨立博客），也算一個小技能。（要不要寫博客看個人興趣，但學(xué)會總結(jié)沉淀是必須的）
• “成就自己、幫助他人”。在日常工作中，你肯定也有通過別人的博客解決了你的某個問題，這個時候“反哺”一下開放的互聯(lián)網(wǎng)也何嘗不是一件快事。當(dāng)有人通過搜索引擎檢索到你的內(nèi)容并留言說感謝幫助他解決一個類似問題的時候，還是有一絲絲成就感的。
• 鍛煉寫作能力。一個問題自己懂和把它講給別人懂，是兩個完全不一樣的概念。
• 打造個人 IP。例如著名的 coolshell，ruanyifeng 等，大部分人應(yīng)該都知道吧？
• 賺錢。這個就不用多說了。說出來，你可能不信，就連我 10 年前沒啥內(nèi)容的 blog，當(dāng)初也有是有“外快”賺的：記得當(dāng)初是給“友鏈”的方式導(dǎo)流，1 個月 5~10 塊，剛好能覆蓋域名、虛擬主機的費用，不過后來各種博客搬家，也懶得折騰了。
• ...

通過這 10 年的摸索，石頭也嘗試過多種寫 blog 的方法。不過說來慚愧，貌似也沒什么說得出的成績。

目前也積累了有 400+篇文章，不過感覺真正有質(zhì)量的文章也就幾十來篇。折騰過很多 blog 程序，陸陸續(xù)續(xù)遷移了好幾個版本，歷史文章也”舍不得”丟棄，也一直保留。其實好多文章在我現(xiàn)在看來好像價值不大，但仍然舍不得拋棄，畢竟當(dāng)初辛辛苦苦 po 出來的。感興趣的同學(xué)可以通過 “www.tanglei.name” 這個網(wǎng)址進行訪問。

博客演進之路

純 wordpress

wordpress 不做多介紹，是一套用 php 開發(fā)的 CMS，很多人的博客都用這個。

下圖是我博客最初級的版本，在相當(dāng)長一段時間內(nèi)也一直用這個主題。

Wordpress 博客

“時光荏苒、歲月如梭”，上面的截圖也很有意思——

• 右上角的動態(tài)“騰訊微博”，不知道你有沒有用過？

• 左上角的 Rss 訂閱，現(xiàn)在不知道是否還有人用，用的人多嗎？反正我好久沒打開我的訂閱文章了。

用 Wordpress 寫博客，有一個缺點就是，每次寫需要登錄后臺，排版、配圖等比較麻煩。并且還得掏錢買虛擬主機、自己運營維護wordpress 程序、MySQL 等。

再后來接觸到?markdown?這門標(biāo)記語言，才發(fā)現(xiàn)這玩意太好用了，就一發(fā)不可收拾。一直用 markdown 寫作沿用至今。

wordpress + markdown 插件

博客主題想保留就一直還是用 wordpress，但有希望寫作用 markdown。

由于沒有找到合適的 wordpress 的 markdown 插件，于是就自己寫了一個 markdown2wordpress（https://github.com/tl3shi/markdown2wordpress）。后端框架等仍然用 wordpress，繁瑣的排版等問題就直接交給 markdown，也不用登陸 wordpress 后臺進行調(diào)整等操作。

這個工具依賴于 python-wordpress-xmlrpc，一個 python 實現(xiàn)的 wordpress 的客戶端，可以方便調(diào)用 wordpress 提供的接口，markdown 的渲染依賴于 pandoc，代碼高亮用的是?highlight.js?圖片用圖床的形式，或者直接以 github 外鏈的形式。

用這個工具又堅持了一段時間。

但石頭當(dāng)初買的虛擬主機（共享型）還是多個人公用的形式，性能較差，網(wǎng)站就經(jīng)常掛，一會虛擬機掛了，一會MySQL又掛了，然后還中過木馬。實在是忍受不了了。

github page 服務(wù)

github page 服務(wù) https://pages.github.com/，按照官網(wǎng)說的那樣，直接將源文件托管在 Github 上，僅僅需要編輯、push即可，然后變化馬上就能體現(xiàn)了。?

這樣不但省去了虛擬主機、MySQL 等費用，同時 github page 還支持自定義域名、git 版本管理，markdown 自動渲染簡直就是專門給程序員量身定做的（好像確實也是的）。

程序猿只用專注于寫 markdown 文件即可，渲染 html 等都交給 gitub。

下圖是我搭建好后的一個截圖。

詳細過程可以參考下我的這幾篇 Blog：

• GitHub搭建博客教程：https://www.tanglei.name/blog/use-github-to-make-hello-world.html

• 也試試github+octopress：https://www.tanglei.name/blog/github-with-octopress.html

在搭建過程中，還會涉及到歷史文章的遷移等，感興趣的可以參考最終還是放棄了 Wordpress（https://www.tanglei.name/blog/give-up-wordpress-to-jekyll.html）。

github pages 服務(wù)的好處在于，博主們真正關(guān)注的只需要寫 markdown 就可以了(類似寫論文用 latex 一樣)，根本不用去關(guān)注比如在 wordpress 后臺排版，傳圖片等等操作。

github pages + travis-ci

github pages 服務(wù)本身支持的博客引擎比較少，比如希望一些定制化的插件等，github pages 默認服務(wù)就不夠了。

但本質(zhì)上講，github pages 服務(wù)就是提供了一個自定義域名解析到靜態(tài) html 的 repo。markdown 轉(zhuǎn) html 的這個過程， github 支持得不夠，可以通過其他的方式。

比如本地寫 markdown，然后本地安裝 hexo 等博客引擎，渲染成 html 后直接 push 到 github page 的遠程倉庫即可。

我曾經(jīng)也使用過多個博客引擎，如下圖：

▲?jekyll博客主題

▼hexo主題

1. 本地寫 blog，md 格式的。工具可以直接用之前推薦的?程序員利器?中的 markdown 寫作工具 Macdown 或者Typora。
2. git commit && git push 即可。
3. travis 開始工作，安裝 blog 程序，然后 build 靜態(tài) html，最后 push 到指定的 github pages 倉庫。

貼一下我的 travis 配置，大家就知道是怎么玩的了。

branches:
??only:
??-?master
language:?node_js

#?v14/stable(2020-05)?produces?empty?html?https://github.com/hexojs/hexo/issues/4257
node_js:
????-?'v13.8.0'

cache:?npm

before_install:
-?git?config?--global?user.name?"tangleithu"
[email protected]

install:
-?npm?install?hexo-cli?-g
-?npm?install

script:
-?hexo?clean
-?hexo?g
-?git?log?|?head?-n?6
-?export?COMMIT=`git?log?|?head?-n?1`
-?mv?public?.deploy?&&?cd?.deploy?&&?du?-sh
-?git?init?&&?git?add?-A?.?&&?git?commit?-m?"commit?from?travis,?origin?$COMMIT"?
-?git?push?--force?"https://tl3shi:[email protected]/tl3shi/hexo.tanglei.name.git"?master:gh-pages?

通過上面的配置可以看出，其實做的事情就是安裝博客程序 hexo，然后生成靜態(tài) html，最后將本地生成的靜態(tài) html 整體打包作為一個倉庫 push 到github pages 對應(yīng)的倉庫。

下圖是 travis-ci 的配置頁面，可以配置比如只要有新的 commit push 即可觸發(fā) CI 流程，進而更新博客內(nèi)容。

Travis 配置

別看整個過程看起來比較復(fù)雜，其實安裝等過程是可以 cache 的，一般而言，走完整個流程所耗費的時間也就 1-2 分鐘（如后圖所示），因為我的博客內(nèi)容“歷史包袱重”，可能耗費時間會更久，這時間大部分取決于博客程序的處理流程以及最后 git 上傳過程。

下圖是構(gòu)建歷史，構(gòu)建成功與否會郵件方式通知到你，很方便。

Travis 構(gòu)建歷史

借助 travis 可玩的東西就多了，上面的 scripts 有足夠的靈活性，可以自己隨意定制。

比如，是不是可以同一文章多個平臺發(fā)。舉例，現(xiàn)在大家普遍玩法是各大博客平臺同步發(fā)表。是否可以直接在 CI 流程里面加 juejin、博客園等 post 流程呢？

感興趣的朋友試試？（石頭好久都有這個想法了，但卻一直沒有付出行動）

解決 github 慢的問題

用 github 確實很方便，各種免費的服務(wù)白piao，但缺點也比較明顯，就是國內(nèi)訪問比好慢。gitee 也提供類似的服務(wù)，但前面看了一眼，自定義域名好像要收費？

一個比較簡單的方法是用 CDN 來解決這個問題。blog 本身全是靜態(tài)資源，html、圖片等，很適合用 CDN 來加速。

在這篇 云服務(wù)器，域名備案及 CDN 服務(wù)體驗（https://www.tanglei.name/blog/try-qcloud-vm-cdn.html）?文章中，我記錄了之前具體的流程。

CDN 的工作流程就是你添加一個域名的 CNAME，指向 CDN 廠商的域名，所以用戶發(fā)起請求的時候?qū)嶋H是解析到云廠商的 CDN 服務(wù)器的，CDN 后臺配置一個源站點，例如?www.tanglei.name，用戶請求到 CDN 服務(wù)器時，如果沒有命中，則就去源站點請求并將內(nèi)容緩存至 CDN 服務(wù)器。

以下是我之前測試 CDN 的一個效果截圖。

下圖是訪問一個?含有一些圖片的頁面的測試結(jié)果，其中：

• 請求?www.tanglei.name?會直接路由到 github pages 的文件；
• 通過?www.tanglei.me?會走云廠商的 CDN；
  
  

訪問一個大小為 10KB 的頁面，基本在半秒就加載完畢了，對于個人博客來講，已經(jīng)很夠用了。上圖的結(jié)果中還有一些如 USA 的節(jié)點拉低了平均值，國外的一些節(jié)點還是走 github 更快。如果有需求做全球加速的話，還可以用比如敝司的全球加速服務(wù)哦（CDN包括海外眾多節(jié)點）。

最后

本文只是石頭在探索過程發(fā)現(xiàn)覺得合適自己的方法，每個人喜歡的姿勢可能不一樣，本文內(nèi)容僅供參考，希望你能找到適合你的姿勢。