Hexo+Netlify快速搭建我的博客

最近想要給本身搭建一個博客網站，貨比三家後，決定選擇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更適合討論這類小衆話題）