image

初出茅廬之時(shí)，看到他人的博客，總會(huì)產(chǎn)生一絲新鮮感，好奇之心讓你不知不覺跟隨著他人的腳步，在寫作平臺(tái)開始展露拳腳。

發(fā)布了兩三篇文章后，又發(fā)現(xiàn)有些人并非在寫作平臺(tái)寫作，而是在擁有自己域名的博客平臺(tái)發(fā)布。就像小時(shí)候看到鄰居小孩吃糖，不知甜不甜就想著自己也能吃一塊。然后就開始折騰了，購(gòu)買域名空間，獨(dú)立搭建博客。

從寫文章到搭建博客這思路是對(duì)的，但不乏帶有點(diǎn)跟風(fēng)之意。博客，技術(shù)圈的個(gè)人名片。特別是在招聘面試時(shí)，部分面試官會(huì)特別關(guān)注面試者是否有個(gè)人博客，一來從博客上能看出面試者的表達(dá)能力和涉獵，二來能看到個(gè)人的代碼水平和編碼習(xí)慣。

此外，博客的書寫對(duì)個(gè)人也是一種技能鍛煉。資料的整理，特別是技術(shù)問題的整理，有助于自己下一次遇到類似的問題時(shí)能否更好的回憶細(xì)節(jié)和復(fù)用相關(guān)代碼。

但如何能又快又好的搭建，這是講究方法的。

筆者在開發(fā)博客前，簡(jiǎn)單做了調(diào)研，了解到當(dāng)下最受歡迎的搭建模式就是借助GitHub Page和靜態(tài)博客框架。接下來向大家介紹整個(gè)博客的搭建流程。

Github Pages 入門

1. 首先，注冊(cè)Github帳號(hào)。
   
   注冊(cè)Github帳號(hào)
2. 然后，將代碼托管在 Github 上。
   新建一個(gè) repository。如果你希望你的站點(diǎn)能通過 <你的 GitHub 用戶名>.github.io 域名訪問，你的 repository 應(yīng)該直接命名為 <你的 GitHub 用戶名>.github.io。例如，qwebfe.github.io。
3. 最后配置 Github Pages，具體細(xì)節(jié)詳見 Getting Started with GitHub Pages。

靜態(tài)博客框架

根據(jù)筆者調(diào)研，網(wǎng)上討論最多的博客框架當(dāng)屬 Jekyll 和 Hexo。有人說，Jekyll 就是為了寫博客打造的。Github Pages 中提供的 Jekyll 主題似乎也驗(yàn)證了這點(diǎn)。早期組內(nèi)的博客也是基于 Jekyll 搭建的，其原因我想大概是 GitHub 自帶 Jekyll 引擎，無需部署靜態(tài)頁面，只放項(xiàng)目源碼即可。后因開發(fā)環(huán)境依賴問題不便維護(hù)，便棄 Jekyll 從 Hexo。據(jù)說 Hexo 的出現(xiàn)是因?yàn)?Jekyll 比較慢，大概是早期 Hexo 還不夠成熟，還不支持自動(dòng)化部署，也給使用者帶來了不便，但那個(gè)時(shí)候已經(jīng)過去了。接下來向大家具體介紹 Jekyll 和 Hexo。

Jekyll

gem install bundler jekyll

jekyll new my-awesome-site

cd my-awesome-site

bundle exec jekyll serve

# => Now browse to http://localhost:4000

通過以上幾個(gè)命令可以看出，Jekyll 是基于 Ruby 實(shí)現(xiàn)的，安裝 Jekyll 需要搭建 Ruby 環(huán)境，但在 Windows 搭建 Ruby 環(huán)境并不被推薦。若你是 Windows 用戶，那可能一開始就跌倒在安裝 Jekyll 的起跑線上。

我們組的早期博客基于 Jekyll，運(yùn)行了小一年時(shí)間，但用戶體驗(yàn)不是很好。受環(huán)境搭建影響，多數(shù)成員無法啟動(dòng)本地服務(wù)器，都是盲寫文章，推送上線后，發(fā)現(xiàn)問題再修復(fù)。有一次把文章日期提前了一天，上線后新文章一直未被構(gòu)建。無法本地預(yù)覽，一定程度上影響排查效率。后面求助了同事，也沒找到原因，但在第二天早上被告知文章構(gòu)建成功了。筆者一時(shí)蒙蔽，后查閱了各手資源，才得知以下這個(gè)答案：

Jekyll 是不會(huì)構(gòu)建未來日期的文章的！

在主題方面，有想法的你可自行選擇Jekyll主題。按照安裝提示，或基于gem，或只取遠(yuǎn)程主題，或直接直接拷貝至項(xiàng)目中，然后配置 _config.yml 文件即可。

theme: minimal-mistakes-jekyll

厭倦了 Jekyll 的那段愛恨情仇，最終投向了 Hexo 的懷抱。

Hexo

A fast, simple & powerful blog framework
快速、簡(jiǎn)潔且高效的博客框架

Hexo 是基于 NodeJs 實(shí)現(xiàn)，在 Windows 上安裝 NodeJs 開發(fā)環(huán)境可謂是相當(dāng)簡(jiǎn)單。何其美哉！樂哉！

Hexo 默認(rèn)的主題是 landscape，接觸過博客園的童鞋可能覺得該主題有它的味道。蘿卜青菜各有所愛，你可自行選擇主題。關(guān)于 Hexo 的主題，筆者想說是我喜歡的調(diào)調(diào)??，本組博客應(yīng)用的主題是NexT

建站

啥也不說了，搬磚吧。

安裝

npm install -g hexo-cli

初始化

hexo init <folder>

cd <folder>

npm install

npm server

M：咦? 這一套指令好像在哪見過??。
H：?? vue ?
M：嗷嗚...

項(xiàng)目初始化完成后，指定文件夾的目錄如下：

.
├── _config.yml # 網(wǎng)站的 配置 信息
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

• scaffolds: 模版文件夾, 當(dāng)你新建文章時(shí)，Hexo 會(huì)根據(jù) scaffold 來建立文件
• source: 資源文件夾，存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會(huì)被忽略。Markdown 和 HTML 文件會(huì)被解析并放到 public 文件夾，而其他文件會(huì)被拷貝過去。
• themes: 主題文件夾，把你想要的主題拷貝至當(dāng)前目錄即可。
• _config.yml: 網(wǎng)站的配置信息，Hexo 這個(gè)點(diǎn)很友好，它給相關(guān)配置都做了注釋和文檔說明。
  • theme: 你選用的主題，默認(rèn)為 landscape

寫作

項(xiàng)目創(chuàng)建完成后，我們就可以開始寫作了。關(guān)于寫作，Hexo cli 也提供了相關(guān)指令，可快速創(chuàng)建一篇新文章或者新的頁面。

hexo new [layout] <title>

• layout，Hexo 有三種默認(rèn)布局：post、page 和 draft?；诓煌愋蛣?chuàng)建的文件會(huì)存儲(chǔ)在各自對(duì)應(yīng)的路徑中，你可以編輯 scaffolds/* 下的模板文件，保證新頁面的規(guī)范性。
• title，Hexo 默認(rèn)以標(biāo)題做為文件名稱，但你可編輯 new_post_name 參數(shù)來改變默認(rèn)的文件名稱，舉例來說，設(shè)為 :year-:month-:day-:title.md 可讓你更方便的通過日期來管理文章。

new_post_name: :year-:month-:day-:title.md

執(zhí)行指令時(shí)只需輸入文件名，創(chuàng)建成功會(huì)自動(dòng)帶上當(dāng)天日期，文件內(nèi)容也會(huì)按照模板格式顯示。

hexo new test # ==> source/_posts/2020-12-01-test.md

若你想了解更多使用方法，可前往hexo官網(wǎng)。

部署

Hexo 官方介紹了三種部署方式。由于我們代碼托管在了 Github 上，那筆者就部署到 GitHub Pages 展開介紹。

1、將你本地的 Hexo 站點(diǎn)文件夾推送到 repository（<你的 GitHub 用戶名>.github.io） 中。默認(rèn)情況下 public 目錄將不會(huì)被推送到 repository 中，你應(yīng)該檢查 .gitignore 文件中是否包含 public 一行，如果沒有請(qǐng)加上。
2、將 Travis CI 添加到你的 GitHub 賬戶中。

選擇一個(gè)賬號(hào)

授予此應(yīng)用訪問權(quán)限

授予項(xiàng)目訪問權(quán)限

3、前往 GitHub 的 Applications settings，配置 Travis CI 權(quán)限，使其能夠訪問你的 repository。若你在第2步忘記了設(shè)置 Travis CI 的倉(cāng)庫(kù)權(quán)限，也可在此重新配置。

配置 Travis CI 權(quán)限

設(shè)置 Travis CI 的倉(cāng)庫(kù)權(quán)限

4、保存設(shè)置后你應(yīng)該會(huì)被重定向到 Travis CI 的頁面。如果沒有，請(qǐng) 手動(dòng)前往。
5、在瀏覽器新建一個(gè)標(biāo)簽頁，前往 GitHub 新建 Personal Access Token，只勾選 repo 的權(quán)限并生成一個(gè)新的 Token。Token 生成后請(qǐng)復(fù)制并保存好。

新建 Personal Access Token

image

sudo: false
language: node_js
node_js:
  - 10 # use nodejs v10 LTS
cache: npm
branches:
  only:
    - master # build master branch only
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  on:
    branch: master
  local-dir: public

8、將 .travis.yml 推送到 repository 中。Travis CI 應(yīng)該會(huì)自動(dòng)開始運(yùn)行，并將生成的文件推送到同一 repository 下的 gh-pages 分支下.
9、在 GitHub 中前往你的 repository 的設(shè)置頁面，修改 GitHub Pages 的部署分支為 gh-pages。

設(shè)置頁面gh-pages

或許你覺得這種基于 Travis CI 的部署方式配置繁瑣，但你要知道一旦配置走通，后期部署都走自動(dòng)化，對(duì)于團(tuán)隊(duì)博客而言能在一定程度上減輕心智負(fù)擔(dān)。你要是真不想配置，推薦使用官方的一鍵部署，但這種部署方式每次都要人工執(zhí)行操作。

后記

還是那句話，蘿卜青菜個(gè)有所愛。從 Jekyll 到 Hexo，這趟旅行雖說不易，但旅途中的風(fēng)景也是令人難忘。若你還有更好用的博客框架，可留言推薦給筆者和大家。