Hexo+Netlify快速搭建個人部落格

weixin_34253539發表於2018-07-25
Hexo

最近想要給自己搭建一個部落格網站，貨比三家後，決定選擇Hexo.io來建站，Netlify來進行程式碼託管和部署。

長話長說，在轉行寫前端之前，我曾做過一段時間網站內容編輯，當時主要使用的是Wordpress。作為傳統動態網站生成器的代表，Wordpress擁有超高市場佔有率，很多大型出版媒體的網站都是基於Wordpress。對於非技術人員來說，其內容撰寫及維護門檻較低。但和任何傳統動態網站生成器一樣，對於輕量級小建站平臺，Wordpress顯得過分臃腫。過時的外掛容易被黑客攻擊，形成安全漏洞。由於需要頻繁訪問資料庫，其速度難以保證。
於是乎，近年來如日中天的靜態網站生成器成了替代方案。對於靠寫程式碼吃飯的程式猿朋友們來說，在保留Git工作流程基礎上，利用Markdown來撰寫部落格內容相比之通過內容管理系統的使用者介面來建立內容要方便高效很多。

什麼是靜態網站生成器？具體優勢為何？

網友Chikara Chan在靜態網站生成器是如何工作的中總結到：
一個靜態網站生成器的工作流程通常有以下幾個步驟：
讀取原始檔（e.g. 約定 markdown 格式）
資源預處理
模板引擎渲染
生成目標檔案

和傳統動態網站生成器相比，靜態網站生成器的主要優勢體現在：

  • 響應速度：靜態部落格站點頁面都是靜態頁面，訪問時無需查詢資料庫，因此響應速度相對快很多
  • 安全性：同樣由於不需要訪問資料庫，靜態網站免疫了很多網頁攻擊，其安全性令動態網站生成器望塵莫及

最受歡迎的靜態網站生成器有Jekyll, Hugo, Gatsby，以及我們今天的主角Hexo等。詳見StaticGen瞭解最新權威排名。

什麼是Hexo?

Hexo是一款基於Node.js的靜態部落格網站生成器，由臺灣的Tommy Chen建立並維護。其卓越的速度，豐富的外掛系統（支援大部分Octopress外掛），友好的語言支援（擁有簡體中文及繁體中文版本的文件），使其備受國內使用者親賴。

安裝Hexo的準備工作
在開始安裝Hexo前，請確保你的本地環境已安裝如下應用程式：

  • Git
  • Node.js

安裝Hexo
開啟終端，輸入npm命令安裝Hexo：
$ npm install -g hexo-cli

安裝完成後，輸入以下指令建立專案資料夾路徑：
$ hexo init /PATH/TO/hexo

切換至剛剛建立的資料夾：
$ cd /PATH/TO/hexo

建站
安裝Hexo會在你所制定的資料夾裡安裝必要元件，以提供給你一個基本的網站雛形。通過npm來操作完成Hexo初始化:
$ npm install

恭喜你！網站雛形已建成！啟動hexo伺服器來預覽你的成果：
$ hexo server

你現在可以前往 http://0.0.0.0:4000/ 訪問你的最新網站了！
這麼簡單？沒錯，就是那麼簡單。
當然，別忘了給你的網站新增文章內容。
新建部落格文章，只需執行以下指令:
$ hexo new "我的最新日誌"

你會發現在你的資料夾_posts下已生成了一個新的md文件，其中已包含了文章的標題和建立日期

---
title: 我的最新日誌
date: 2018-07-03 11:54:41
tags:
---

下一步，生成靜態檔案:
$ hexo generate

如果你的hexo伺服器還在執行中的話，重新整理網頁，便可看到你新建立的部落格文章！

網站釋出前準備工作

新增完網站內容後，我們接下來來看如何釋出網站。
有一個細節值得一提，在預設情況下，Hexo將生成的網站內容儲存至public資料夾。鑑於我們不需要對該資料夾的內容進行版本控制，我們可將該資料夾新增至.gitignore文件中:
$ echo "/public" >> .gitignore

接下來便可將你的內容推送至你習慣使用的程式碼託管服務，以GitHub和GitLab為代表。我們會以GitHub為例來進行步驟講解。

新建倉庫
首先，在GitHub上新建倉庫。為了避免出錯，在新建倉庫時，請不要在建立Initialize this repository with a README前打勾，Add .gitignore和Add a license處請選擇None。
鑑於我們的demo基於Hexo和Netlify，在Repository name處填寫hexo_netlify來命名倉庫。

開啟你的電腦終端，切換至你的專案所在的本地資料夾路徑：
$ cd ~/PATH/TO/hexo_netlify/

初始化倉庫
$ git init

該命令將建立一個名為.git的子目錄，其中包含了你初始化的Git倉庫中所需的檔案，這些檔案是Git倉庫的核心。此時，我們僅作了一個初始化的操作，你的專案檔案還未被跟蹤。
通過git add 來實現對指定檔案的跟蹤，然後執行git commit提交:
$ git add .
$ git commit -m "initial commit"

回到之前我們建立GitHub倉庫完成的頁面，複製遠端倉庫連結，在終端輸入:
$ git remote add origin <遠端倉庫連結>

你可以通過git remote -v來驗證你的連結是否正確。
驗證完畢，確認準確無誤後，用以下指令推送本地倉庫內容至GitHub
$ git push origin master

現在，你的原始碼已被成功上傳至GitHub，接下來我們可以通過Netlify來釋出網站。

為什麼選擇Netlify來釋出網站？Netlfily和GitHub Pages有什麼區別？

大約一年前，在網上閒逛時發現這篇文章GitHub Pages is Dead, Long Live Netlify!)。
轉身嘗試了下Netlify，感覺如獲至寶。如文章所言, Netlify的Continuous Deployment持續部署功能使其鶴立雞群（後面具體講述部署過程的時候會有更詳細解釋）。且Netlify支援大部分靜態網站生成器（Github Pages僅支援Jekyll）。此外，GitHub Pages對redirects，重定向（也稱URL轉發）支援並不友好，如果你哪天改變主義，不再需要GitHub Pages所提供的*.github.io子域名，那你可有得麻煩了。相形之下，你可以輕鬆簡單得從*.netlify.com重定向至你的新地址(Netlify 的重定向編碼是301或302)，這樣一來，搜尋引擎可以清楚識別你的頁面已被轉移，從而對你的新頁面進行重新排名。所以即使哪天Netlify車毀人亡，只要設定好了重定向，你的網站便不會受到任何影響。

釋出網站

新增網站內容
首先，你需要註冊一個Netlify賬號，Netlify提供郵箱註冊和包括GitHub在內的第三方驗證登陸。註冊過程和一般網站註冊過程大同小異，你會收到一封來自Netlify的郵件，確認你的註冊資訊，點選郵件中的連結登陸你的賬戶。

關聯GitHub賬戶
登陸後，在 https://app.netlify.com/account/sites 頁面下，點選New site from Git進入下一步。

點選GitHub關聯Netlify和你的倉庫

授權驗證
首次關聯時，你會看到以下視窗，點選Authorize netlify同意授權後，Netlify可以有權訪問你在GitHub上的倉庫內容了

選擇倉庫
授權完畢後，頁面會跳轉回Netlify。通過搜尋欄來快速找到你所建立的hexo_netlify倉庫，選中該倉庫。

配置釋出設定
Netlify允許你自定義你的部署設定，我們的demo只需使用預設設定即可。

構建併釋出網站

此時此刻，萬事具備，只欠東風。
點選完Deploy site之後，Netlify會構建併發布你的網站內容。你可以放心得伸個懶腰，泡杯咖啡，剩下的就交給Netlify處理。你可以通過Deploy log實時觀察部署過程。

進行到這一步，Netlify的主要特色終於得以付出水面。我們知道，任何超過一個人的專案都需要經歷以下過程：某a分支的內容需要通過pull request進行稽核，稽核完後合併到主分支。Netlify支援分支部署（ branch deployment )和部署預覽( deploy preview )，也就是說，你可以在不觸及production code的情況下，預覽你的成果。大大提高了團隊合作效率，降低了風險。個人認為屬於殺手鐗型別武器。

釋出成功 ?
不到一杯茶的時間，網站上線。Netlify會在網站釋出成功的同時提供給你一個*.netlify.com為字尾以及隨機生成的英文名為字首的子域名。
假如你不喜歡Netlify給你的字首，並且還未來得及購買域名，可以通過Domain settings > Edit site name來快速美化你的網址：

上線！撒花！?

在建站過程中，你可能最常需要用到以下指令：

hexo n #新增新內容
hexo g #生成靜態檔案
hexo d #部署 #可與hexo g合併為 hexo d -g
hexo s == hexo server #啟動服務預覽

更多指令請參考Hexo文件。

和GitHub一樣，Netlify沒有中文版！不過好整個建站過程總體很順暢，沒有遇到任何障礙。

希望這篇文章能對有興趣的童鞋有所幫助，有任何問題，建議，想法，質疑，歡迎留言或郵件交流。

(該文章之前有在CSDN上po過，感覺segmentfault更適合討論這類小眾話題）

相關文章