《Hexo+github搭建個人博客》
文/馮皓林
完稿：2016.4.22-2016.4.23
注意：本節教程只針對Windows用戶。本教程由無人贊助，贊助寫出。
FAQ（Frequently Asked Questions）31
思維導圖總覽：
What?
簡介：
Hexo:
Hexo 是一款基於Node.js、快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
官網 https://hexo.io/zh-cn/docs/index.html
NodeJs
Nodejs框架是基於V8的引擎，是目前速度最快的Javascript引擎。chrome瀏覽器就基於V8，同時打開20-30個網頁都很流暢。Nodejs標准的web開發框架Express，可以幫助我們迅速建立web站點，比起PHP的開發效率更高，而且學習曲線更低。非常適合小型網站，個性化網站，我們自己的Geek網站！！
JS是腳本語言，腳本語言需要一個解析器才能運行。對於寫在HTML頁面里面的JS，瀏覽器充當了解析器的角色。而對於需要獨立運行的JS，NodeJS就是一個解析器。
每種解析器就是一個運行環境，不但允許JS定義各種數據結構，進行各種計算，還允許JS使用運行環境提供的內置對象和方法做一些事情。例如運行在瀏覽器中的JS的用途是操作DOM，瀏覽器就提供了document之類的內置對象。而運行在NodeJS中的JS的用途是操作磁盤文件或者搭建HTTP服務器，NodeJS就相應提供了fs、http等內置對象。
一臉懵逼。
Penguin：講這么多，那它有啥用處咯。。
Big god:別急，且讓我給你一一道來。
NodeJS可以直接運行JS文件好像好酷的樣子。
【規律使我們開闊，但文化使我們更加深刻。】
弄清楚一樣東西存在的意義還是蠻重要的，因此，我們要上一堂歷史課咯~
話說當年NodeJS的作者啊，在創造NodeJS之初，他想實現一個高性能的Web服務器，這廝首先看重的是事件機制和異步IO模型的優越性，而不是JS。但是呢，他首要做的一件事就是要找一門語言，來實現他偉大的想法，而這門語言不能是自帶IO功能的（為毛線不能自帶啊？那個立志成為海賊王的男人嘛，發現以前同步IO太TM坑爹咯，要自己實現一個異步IO模型，並且能良好的支持事件機制( ⊙ o ⊙ )啊！）。JS沒有自帶IO功能，天生就用於處理瀏覽器的DOM事件，並且有一大群屌絲程序員，因此就成為了天然的選擇啦。
如他所願，NodeJS在服務器端活躍起來，出現了大批基於NodeJS的Web服務。而另一方面，NodeJS讓前端的開發人員（說你耶）如獲神器，終於可以在自己的有生之年，讓自己的能力范圍內跳出瀏覽器窗口。自從這春風拂面，大批的開發工具如雨后春筍般涌現，前端開發者的謎之微笑，燦若桃花（閉上眼睛，用心感受）。SO，對於前端而言，雖然不是人人都要拿NodeJS寫一個服務器程序，但其簡單程度可至使用命令交互模式調試JS代碼片段，復雜可至編寫工具提高工作效率。可謂，居家旅行必備的裝逼神器。
NodeJS生態圈正欣欣向榮，畫面太美，不忍直視。
Github
GitHub is the single largest host for Git repositories, and is the central point of collaboration for millions of developers and projects. A large percentage of all Git repositories are hosted on GitHub, and many open-source projects use it for Git hosting, issue tracking, code review, and other things. So while it’s not a direct part of the Git open source project, there’s a good chance that you’ll want or need to interact with GitHub at some point while using Git professionally.
--摘自官方文檔
(⊙o⊙)… 這堆雞腸是神馬意思？好吧，我意譯一下，水平有限，請不吝賜教。
Github是Git倉庫唯一且最大的主機，它是數以萬計的開發者和項目協作的中心點。絕大部分Git倉庫托管在GitHub上，許多的開源項目使用Github的Git倉庫托管服務，問題跟蹤，代碼復查和其他的東西。因此，雖然它不是直接參與Git的開源項目，但這是一個你會想要或者需要在某些時候專業地使用Git與github互動的好機會。
（翻譯得好爛... ... ）
Git
是一個開源的分布式版本控制系統，用以有效、高速的處理從很小到非常大的項目版本管理。
Github page:
GitHub Pages本用於介紹托管在GitHub的項目， 不過，由於他的空間免費穩定，用來做搭建一個博客再好不過了。
github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。
Markdown
Markdown 是一種輕量級標記語言，創始人為約翰·格魯伯（John Gruber）。它允許人們“使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的XHTML(或者HTML)文檔”。[1]這種語言吸收了很多在電子郵件中已有的純文本標記的特性。
優點：
1、簡單，容易上手
2、純文本實現，程序員最愛，容易擴展，方便和其他工具聯動
3、平台支持廣：以Github為首的各種平台、各種博客都支持，基本上現在面向程序員的輸入框都可以用Markdown來寫了
4、豐富的工具鏈
5、編輯器：各種支持所見即所得的編輯器
6、和各種其他格式互相轉化的工具。PDF、Mobi、Epub、HTML等等，幾乎你能想到的所有格式它都能轉換。
How?
環境配置：
Win7 64位
node-v4.4.0-x64.msi
Git-1.9.5-preview20150319.exe
markdownpad2-setup.exe（markdown離線編輯器，可選，替代方案是使用在線的馬克飛象工具編輯markdown文件）
安裝Git
就此不截圖了，一直下一步，然后自定義一個安裝路徑，安裝即可。
安裝Node.js
也是一直下一步，選擇一個自定義的安裝路徑。接着要配置環境變量：
D:\software\develop\nodejs\是我的NodeJs的安裝目錄，你配環境變量的時候要配你自己安裝的目錄。配環境變量是為了讓windows的命令行能調用到NodeJS里面的命令。
安裝hexo
第一步：打開cmd。
第二步：進入NodeJS的安裝目錄
第三步：開始安裝hexo，利用 npm 命令即可安裝。
npm install -g hexo
開始搭建博客
來杯咖啡稍作等待，即可安裝成功。接下來，執行
mkdir blog && cd blog
此處blog便是你的博客目錄，當然其他什么名字也是極好的，看心情了，此時最好將此目錄備份到雲盤或者其他地方，以防文件夾丟失后博客就沒有了。
然后執行
hexo init
安裝依賴包
npm install
至此，博客搭建成功！當然，僅僅是本地的了。此時執行
hexo g
即可生成靜態頁面，然后執行
hexo s
訪問http://localhost:4000即可看到你的博客。
安裝並生成blog的目錄應該是醬紫的：
如果想讓放到網上該怎么辦呢？那就接着往下看咯。注意：暫時別關你的cmd窗口。
部署博客到github
1、注冊賬號
The first thing you need to do is set up a free user account. Simply visithttps://github.com, choose a user name that isn’t already taken, provide an email address and a password, and click the big green “Sign up for GitHub” button.
你所要做的第一件事就是創建一個免費的用戶賬號。簡單地訪問https://github.com，選擇一個未被使用過的用戶名，提供一個郵箱地址以及密碼，並點擊寫着“sign up for GitHub”的綠色按鈕。
經過郵箱認證后，該賬號就會被激活的。
2、創建一個倉庫
注：Github Pages的Repository名字是特定的，比如我Github賬號是dantefung，那么我Github Pages Repository名字就是dantefung.github.io。
3、設置github pages
創建成功后，回到主頁面，點擊進入你剛剛創建好的倉庫
接着點擊settings，進入倉庫管理
更新你的站點
選擇主題並發布
至此，你的github pages就發布成功了。試試在瀏覽器的地址欄輸入”你github的用戶名.github.io”吧！
現在回到你的 ,
打開你安裝好的NodeJS的根目錄，然后點擊進入剛剛新建的blog文件夾：
在文件的底部，將配置改成介樣：
其中只需修改一下repository，將其內容修改為剛剛新建的項目的倉庫地址即可。
接下來，回到你的cmd窗口，只需執行兩個命令：
npm install hexo-deployer-git --save （這命令是為了解決hexo新版本的部署問題）
hexo g 回車 （這是重新生成blog）
hexo d 回車 （這是將本地blog部署到github的倉庫）
現在，試試在瀏覽器的地址欄輸入：“你的用戶名.github.io”，此時，你應該會看到這樣的界面：
你可能會吐槽這個主題怎么這么難看，好下面我就教你怎么改主題。此時，你的cmd窗口還是先別關。
主題篇
接下來，開始對博客進行一番改造。畢竟博客是自己精神上的一個家園，當然要裝飾打造一番了。
首先嘛，自然是進行主題的選擇了，主題在這里。選擇好一個主題之后，就是進行主題的安裝了。在剛剛那個網站上，點擊右邊的鏈接可以看到主題的Demo，選則一個喜歡的主題然后點擊左邊的鏈接進入github上：
第一步：克隆主題到本地themes目錄下
方式一：
然后命令行進入到你的博客目錄的themes目錄下：
點擊鼠標右鍵，打開github bash執行下面語句：
git clone git://github.com/ppoffice/hexo-theme-alex.git
（這個是剛剛那個頁面的Install下的命令 ）
方式二：
然后命令行進入到你的博客目錄目錄下：
執行如下命令：
然后你會在“你的blog目錄/themes”下看到：
其中git clone后面的鏈接為你進入的主題的鏈接地址，themes/alex為你的保存目錄，此處已alex主題為栗子，具體的以你選擇的主題為准。
第二步：配置你將要生成的博客主題為剛剛克隆的主題
然后進入到/blog/_config.yml里面，將theme改為你剛剛下載保存的主題的名字。
然后回到cmd，執行:
hexo g 回車 （這是重新生成blog）
hexo d 回車 （這是將本地blog部署到github的倉庫）
好了，試試在瀏覽器的地址欄輸入：“你的github用戶名.github.io”，你將會看到如下主題的blog頁面/：
編寫與發布博客
怎么發布到github的博客？還是老樣子啊：
接着：
如果最后一步不成功怎么辦？請參照FAQ下的《關於你博客部署失敗的解決辦法》
FAQ（Frequently Asked Questions）
關於你博客部署失敗的解決辦法：
在用Hexo搭建靜態博客的時候，deploy時出現如下錯誤：
Error: spawn ENOENT
at errnoException (child_process.js:980:11)
at Process.ChildProcess._handle.onexit (child_process.js:771:34)
解決辦法？
添加環境變量：你的安裝目錄\Git\bin;你的安裝目錄\Git\libexec\git-core，這樣就解決了問題了。
可惜，使用這個辦法引入環境變量，按道理說cmd可以引用到git的命令，但是，你的卻居然不行。辣怎么解決呢？也不是沒有辦法。
你會發現每次我們執行完 hexo g 后，public目錄會被更新一次：
而你執行完 hexo d命令后是將.deploy_git文件夾中的內容推送到github的服務器上：
(是不是一模一樣的目錄結構)
因此，我們可以在執行完hexo g后自己手動的提交：
隨便在某個目錄下：
然后，你刪掉例如我的dantefung.github.io里面的內容，然后：
接着，雙擊進入dantefung.github.io(以我的為例)：
然后點OK，等待一會兒，正常情況下都會上傳成功~
現在，試試在瀏覽器地址欄輸入：“你的github用戶名.github.io”，看看你的博客主頁吧~~
我不會Markdown怎么辦？
http://ibruce.info/2013/11/26/markdown/ Markdown簡明語法
我不會git怎么辦？
入門
方式一：圖形界面
以下是簡明教程，可快速上手：
首先從官網上下載windows客戶端：https://git-scm.com/download/
安裝完成后，隨便在某個磁盤下新建一個文件夾，名字可叫Git，然后右鍵選擇Git Bash 進行全局用戶名和郵箱的配置：
執行以下兩行命令行：
git config --global user.mail "此處填寫你在github上注冊的郵箱地址"
git config --global user.name "此處填寫你在github上注冊的用戶名"
然后，右鍵選擇Git Gui打開圖形界面：
克隆完后，就會彈出：
怎么進行版本更新？
雙擊進入dantefung.github.io（以我的為例）,右鍵選擇 Git Gui：
然后點OK，等待一會兒，正常情況下都會上傳成功~
方式二：命令模式
上面圖形界面的簡明使用方法我就介紹完畢，簡單說說命令行的方式：
當你對dantefung.github.io(以我的為例)里面的文件進行改動后，此時，你的項目版本就是當前最新版本，你想更新到github服務器的話，就繼續往下看咯，雙擊進入dantefung.github.io文件夾，右鍵選擇Git Bash：
按下回車，然后輸入用戶名和密碼即可。
更多詳情可參照官方給的文檔：
如果覺得看英文吃力的話，可以下載官方的中文文檔，或者你可以通過《廖雪峰的官方網站》進行git的學習。
進階：
《推薦！手把手教你用Git》
http://www.cnblogs.com/tugenhua0707/p/4050072.html
想對hexo有個詳盡的了解？
參見博客：http://blog.fens.me/hexo-blog-github/
關於NodeJS的單線程和異步IO：
| 引用文 摘自 IBM 劉欣 個人公眾號：碼農翻身 美麗的七俠鎮上有一條美食街，很多著名的飯店都開在這里，有老字號的Apache, PHP, 最近幾年火熱的Ruby on Rail , 還有那些重量級的餐飲集團Websphere, Weblogic 等。
這些飯店老板根據自己的實力，或多或少的雇佣了一些店小二來招待來客，這些小二干活都非常殷勤，沒有一個偷懶耍滑，把顧客招待的舒舒服服， 所以平日里飯館運轉的還不錯，相安無事。
但是隨着《武林外傳》的拍攝和播放， 七俠鎮旅游業大爆發，游客像潮水一樣蜂擁而至， 現有的店小二招待不過來了， 到了飯點，每家的門前都排起了長隊，游客們吃不上飯，個個怨聲載道。
看到這種情況，有些老板咬了咬牙，在人工費不斷上漲的情況下， 多雇了一些小二來幫忙， 無奈總是趕不上顧客增長的速度。
某一天有個美國老外來到七俠鎮上旅游， 也看到了吃不上飯的問題，他仔細分析了一番后發現了一個秘密： 原來這些店都采用了同一套叫做“全程貼心服務”的模式， 這個模式很有意思：
客人來了以后，馬上有個店小二殷勤迎上去，帶着找座位，點菜，給后廚下單 由於后廚做菜需要很長時間，店小二就在客人的旁邊等着。
后廚一搖鈴鐺，大喊一聲：上菜，店小二馬上端到客人面前， 然后站在一邊等着客人吃完
客人說：結賬，小二收錢，找錢，送客， 迎接下一位。
通常這個時候門口都排成了好幾百人了！
這個VIP服務實在是太貼心了！ 導致的結果很明顯，飯店有幾個店小二，就只能同時接待幾個顧客。 (當然，現實中是沒有飯店是這么做的，否則就等着關門吧)
老外一聲不吭的回去了。 過了幾個月， 美食一條街上出現了一個巨火無比的飯館： Node.js 雖然這個飯店中人滿為患， 可門口竟然沒有排隊的！ 更讓人吃驚的是，這個店里聲稱： 我只需要一個店小二！
Node.js這個美國老外開的飯店確實只用了一個店小二， 只不過這個小二干活的方式與眾不同，他把所有的工作分為兩類： (1) 馬上就能干完的，例如迎客，點菜，找座，下單 等等 (2) 需要等待別人干完才能干的活，例如上菜，結賬等 對(1) 這個小二馬上干活 對(2) 店小二不會等待，他只是告訴別人說，你弄完了告訴我一聲，我會接着干， 然后馬上去做第一類工作
客人來了以后，這個店小二殷勤迎上去，帶着找座位，點菜，給后廚下單 由於后廚做菜需要很長時間，店小二閃電般的離開，去干別的活了，可能是迎客，點菜，找座等，總之是那些不用等待，迅速干完的活。 后廚大喊一聲：上菜，這個小二馬上端到客人面前，然后離開，干其他活。 客人說：結賬，小二收錢，找錢，然后還是迅速閃人，干其他活。
這個唯一的店小二的能力被發揮到了極致，一刻不停，閃電般的在飯店里跑來跑去，因為老板明確的告訴他： 不要等！
Node.js飯店的基礎設施很強大，一旦那些耗時的操作完成，店小二立刻就能知道，飛奔過來馬上接着干，如果遇到新的耗時的操作，小二毫不留情的離開。 就這么簡單， Node.js飯店火了，它同時接待客人的數量大大增加，而服務質量保持基本不變。
這是我杜撰出來的一個不成熟的故事，幫助我來理解Node.js的特點：只用一個線程來處理所有請求，事件驅動編程
如果我們回過頭來再以計算機的視角看一下會更加清楚： 店小二： 線程 顧客：http請求 第一類工作(迎客，找座，下單) : 在服務器端的代碼，能夠快速執行 后廚做菜，客人吃飯： 耗時的I/O 操作 后廚大喊一聲：上菜 ： 這是一個長時間I/O 操作完成的后所發出的事件 客人說：結賬： 另外一個長時間I/O 操作完成的后所發出的事件 第二類工作(上菜，結賬) : 同樣是能快速執行的代碼，但是他們需要等待那些耗時的I/O 操作完成才能開始，確切的來說，收到了系統發出的事件以后才開始執行。在Node.js中實際上是在回調函數中來執行的
下面是Node.js服務模式的偽代碼： 1. 迎客(); 2. 3. 找座(); 4. 5. 下單(); 6. 7. 后廚處理("做菜完成事件"， function(){ 8. 9. 上菜處理()； 10. 11. 客人吃飯("吃飯完成事件"，function(){ 12. 13. 結賬處理(); 14. 15. 送客(); 16. 17. }); 18. 19. }); 20. 需要引起注意的是： 1. 后廚處理（）這個函數接受兩個參數，一個是事件名，另外一個是匿名的回調函數，事件發生，回調函數才會執行。 客人吃飯（）函數也是類似。 Node.js 使用的JavaScript作為服務器端的編程語言，這種回調的方式對於javascript程序員來說，是非常自然的事情，同時從代碼的角度來講，也顯得非常清晰。 另外Node.js使用Chrome的V8引擎來執行javascript,效率非常高
2. 我們能不能把代碼寫成這樣？ 1. 迎客(); 2. 3. 找座(); 4. 5. 下單(); 6. 7. 后廚處理("做菜完成事件"， function(){ 8. 9. 上菜處理()； 10. 11. }); 12. 13. 客人吃飯("吃飯完成事件"，function(){ 14. 15. 結賬處理(); 16. 17. }); 18. 19. 送客(); 20.
肯定不行！， 因為Node.js執行"后廚處理()"函數時，只是安插了一個匿名的回調函數在那里，並不會等待（非阻塞I/O），反而馬上 會執行“客人吃飯()"函數，所以上述的寫法會引起邏輯上的錯誤:還沒上菜就開始吃飯了！ 所以寫慣了”順序阻塞I/O“的我們需要改變一下思維方式，進入到事件驅動的世界中來。
3. 如果某個操作例如“上菜處理” 是個CPU密集型的計算任務，Node.js那個唯一的線程就會忙於執行這個計算任務而被阻塞住，就無法響應其他的請求了，帶來的后果很嚴重，整個服務器都無法響應了！ 這個時候，需要考慮把這樣的代碼進行異步處理，也變成node.js所擅長的事件驅動的方式。
|
參考：
http://www.jianshu.com/p/a2023a601ceb