hexo原理淺析

• 寫在前面

昨天早上找前輩給阿里投的簡歷，沒有想到晚上居然就收到了電話面試。。。從早上到晚上。。。才十個小時。。。給阿里的效率跪了。。。我真是一點準備都沒有，全程懵逼，感受本身表現很是差。。。
今天回過頭來仔細想了想昨天的問題，以爲其實問的確實很基礎。大部分都是本身曾經作東西時遇到過的問題。沒有流暢答出一方面是由於緊張，一方面也是對技術還缺少深刻的理解。
昨天面試官看我有我的網站，讓我簡單說說hexo的原理和機制。我以爲hexo就是對markdown文件的從新渲染和編排。今天想一想，以爲他想問的不僅那麼多。
因而決定嘗試分析下從建立頁面到部署的整個流程。要學習的東西還有不少！

我之因此回答hexo是對markdown文件的從新渲染和編排。我想也不能算錯，這是官方上對hexo的介紹：

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

可是，卻以爲不滿意，究其緣由，個人着眼點很小，僅停留在博客內容自己，這和我最近一直在搞頁面的美觀有必定關係。可是若是放眼整個博客環境，值得研究學習的內容有不少。本文將從如下幾個方面嘗試分析。

• 內容

  • hexo的文件夾結構

  • 使用markdown編寫的博客文章

  • 使用yaml編寫的配置文件

• 表現

  • hexo的模板引擎

  • 獨立於hexo主題的個性化主頁

  • 細節之處的調整

• 發佈

  • Git版本控制系統

  • GitHub Pages

  • 部署到本身的域名

內容

內容是一個博客的靈魂。

hexo的文件夾結構

.
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── public
├── scaffolds
├── source #全部文章文件放在這裏
└── themes #主題文件夾

_config.yml  站點的配置文件。
db.json   緩存文件
node_modules   安裝的插件以及hexo所需的一些node.js模塊。
package.json  應用程序信息，配置hexo運行須要的js包。
public  最終所見網頁的全部內容
scaffolds   模板文件夾。當新建一個文章時，會默認包含對應模板的內容。
source  資源文件夾是存放用戶資源的地方。全部的源文件都會被保存在_post文件夾中。除 posts 文件夾以外，開頭命名爲 (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其餘文件會被拷貝過去。
themes  存放主題文件，hexo會根據主題來生成靜態頁面。

使用markdown編寫的博客文章

之因此選擇hexo作博客一個緣由就是它支持markdown。用markdown寫文章感受特別爽，只須要記住簡單的幾個語法，並且能夠把所有的注意力放在文字自己上，而不用去過多的關注排版。

使用yaml編寫的配置文件

yaml是專門用來寫配置文件的語言。它用首行縮進表示層級關係，便於讀寫理解。

配置文件通常用來對所需環境進行設置。hexo中涉及到兩個配置文件，一個是位於主目錄下的，另外一個是位於主題目錄下的。

一般主目錄下的配置文件用於對全站的配置，好比站點的基本信息，文章的佈局，寫做的格式，部署到github上的參數等等。

而主題目錄下的配置文件用於對該主題的配置，好比站點導航欄的設置，一些插件的設置等。

表現

表現是一個博客的個性。

hexo的模板引擎

模板引擎的做用，就是將界面與數據分離。最簡單的原理是將模板內容中指定的地方替換成數據，實現業務代碼與邏輯代碼分離。

hexo默認的是使用ejs，同類型的東西還有不少，好比jade，swig。我選用主題是用jade的。
hexo首先會解析md文件，而後根據layout判斷佈局類型，再調用其餘的文件，這樣每一塊的內容都是獨立的，提升代碼的複用性。最終會生成一個html頁面。

jade採用縮進語法格式，和python比較相似，看上去也很舒服，我比較喜歡這種風格。在hexo中使用jade須要安裝相應的模塊，不然沒法使用。

獨立於hexo主題的個性化主頁

若是對博客使用一個主題會以爲很單調，能夠本身寫一改完獨立於主題樣式的主頁。這裏，就要弄明白hexo每次部署的流程。

1. 每次執行hexo g命令時，hexo都會遍歷主題文件中的source目錄，這裏的source主要包括css，fonts，js等文件，創建索引。

2. 根據索引會把主題文件生成到public文件中，此時public文件是一個由html，js，css等內容製做的博客，也就是網頁的根目錄。

3. 經過部署，hexo d 將 public 文件夾的內容以 git 方式 push 到 github 的指定項目的指定分支，由 github 進行顯示。固然，也能夠部署到本身的域名上。

在node_modules中有一系列的文件用於對hexo中的各種頁面進行默認的渲染，若是要啓動個性化主頁，須要刪除hexo-generator-index,同時，將主題目錄下的source目錄做爲你個性化頁面的根目錄。

細節之處的調整

根據二八原則，細節之處的調整是那百分之八十，我花了很長時間來調整佈局，顏色，總體效果。有一個功能，要仍是不要，放在什麼位置，都要想很久。

導航欄我就作過三個版本的，一種是漢堡按鈕摺疊式，一種是寬度自適應屏幕固定的，但最終仍是選擇這個樣子。並且去掉了hexo有的分類和標籤雲。只留下主頁，文章，和關於三個內容。

文字的佈局也很頭疼，主頁上那句莊子的話，我至今看的很彆扭，應該把它作成豎版，效果可能會更好。

還有一件事要注意，面試的時候被問到解釋css盒模型。我以爲對盒模型用的挺熟，抽象的定義了網頁內元素的佈局及排版，支支吾吾又說了內邊距，外邊距，邊框。回頭查了定義，

CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。

這居然是定義。。。我只以爲本身學東西太浮躁，學了就想拿來用，忽略了對基本概念的準確記憶和認識。

發佈

發佈讓博客擁有生命。

Git版本控制系統

這是我第一次正視git。當面試官問我項目都部署在哪裏的時候，我脫口而出github。他再問我是如何部署的時候，我說我是用客戶端。。。他又問我你不用git嗎，我就無法接了。。。以前確實有看到過git這個版本控制系統，電腦上也裝了，但畢竟本身在作東西，放在本地也沒事，github還有客戶端這種爲我這樣懶人設計的，因此基本用不到。

可是想到在一個企業裏，不少人同時工做一個項目，其變化和意外狀況不可預料，若是沒有一個有效的版本控制工具，確定會爲企業帶來很大的損失。

之後要鍛鍊使用git部署。

GitHub Pages

這部分網上有不少傻瓜教程，我也是跟着一步一步作的，沒有遇到什麼問題。

但若是細問，究竟原理是什麼，機制是什麼。我確實不知道，和遠程部署同樣，這部份內容是我應該重點學的。

部署到本身的域名

首先購買域名，服務器，或者虛擬主機。我是在主機公園上買的虛擬主機，加上域名，一年200+，不是很貴。域名和服務器都有了，須要解析，這在網上都有教程。

以後是部署，開始試着在主機公園上直接添加了WordPress，主要是爲了分析網站的文件夾結構。搞清楚以後。 由於之前用過filezilla給遠程主機傳過文件，我認爲原理上是同樣的。

由於部署在github上展現的頁面都在public文件夾中，因此只須要把文件傳到虛擬主機的public中就能夠了。可是我發現一個問題，這樣太傻了。爲何沒有自動化部署的工具，因而想起以前看過的技術貼，忽然明白一些工具的用處。

• 總結

當我着眼僅僅着眼於怎麼樣讓頁面好看的時候，我根本沒有關心過更大層面上的問題。部署，後臺數據優化這些都是應該深挖的東西，我卻草草略過。還有一個問題，逐幀渲染頁面有沒有什麼更好的，當下更流行的方法，我也沒有關注過。仍是須要多看社區博客，把問題多看一眼，理解透一點，實踐的同時也不能忽略基礎概念的記憶與準確表述。

關於面試吧，要調整好心態。我記得孔子說過：「不患無位，患因此立。」機會老是有的，看本身能不能把握的住了。

個人我的網站：http://www.changshunwang.com