個(gè)人Blog運(yùn)行的原理

由于博主并非專(zhuān)業(yè)的CS專(zhuān)業(yè)大神，所以開(kāi)始時(shí)也是摸著教程起手。但是博主發(fā)現(xiàn)目前大多數(shù)教程主要是針對(duì)實(shí)現(xiàn)一個(gè)結(jié)果的步驟教學(xué)，或者說(shuō)“所見(jiàn)即所得”，在入手初期效率很高。一個(gè)門(mén)外漢（以博主為例）也能很快的搭建出一套可以用的環(huán)境。但是在后期，遇到問(wèn)題或者想要客制化實(shí)現(xiàn)某些theme的特定功能時(shí)很可能不知如何下手。博主本人在初期就吃了這個(gè)虧導(dǎo)致一直渾渾噩噩不知道原理。所以本篇文章博主打算首先介紹一下整個(gè)Blog實(shí)現(xiàn)運(yùn)行的原理。如果比較急著看到教程的讀者也可以直接跳至第二節(jié)。 想要先看看效果的可以瀏覽博主的個(gè)人Blog。

利用Hexo撰寫(xiě)博客，并從本地部署至Github

博主在大學(xué)苦受C艸折磨，之后對(duì)于編程打心眼兒里的怕。度娘一搜如何搭建網(wǎng)站的教程?？纯碒tml這些玩意兒感覺(jué)基本上可以收拾收拾睡了。但是后來(lái)很走運(yùn)看到了柏?zé)傻牟┛痛罱ń坛?/a>，雖然博主最終的Blog搭建和BY大神略有不同，但還是從這里獲取了很多啟發(fā)。再繼續(xù)的收集信息之后發(fā)現(xiàn)有一些神奇的東西可以讓你專(zhuān)注與文章的寫(xiě)作，而不用花費(fèi)大量時(shí)間在html的構(gòu)建上。這些東西就是博客框架，常用的博客框架有Jekyll，Hexo，Simple，Octopress，Pelican以及Lo·gecho等等。這些框架之間的優(yōu)劣對(duì)比在網(wǎng)上有很多的文章，在此博主不去贅述（主要因?yàn)椴┲髯约阂膊欢?。。。。）?至于博主最后的選擇則是Hexo。如果硬要問(wèn)原因是什么的話，博主只能說(shuō)Hexo的theme普遍比較好看（畢竟好看是第一生產(chǎn)力），同時(shí)支持Markdown語(yǔ)法。最后還有很重要的一點(diǎn)就是Hexo的文檔十分友好（是那種連博主都可以看的懂的文檔，可以說(shuō)是十分的良心了）。
擁有了Hexo之后，你會(huì)發(fā)現(xiàn)整個(gè)的寫(xiě)B(tài)log的過(guò)程變得十分輕松友好且高效，個(gè)人只需要掌握很少量的命令就可以很輕松的實(shí)現(xiàn)html文件的實(shí)現(xiàn)。而這一切都只發(fā)生在你個(gè)人的電腦上，也就是本地。意味著你寫(xiě)的一切到目前為止都只有你自己一個(gè)人能看到（那還要個(gè)?? 的html），所以下面就要介紹如何把我們的Blog推向星辰大?！渴鹬罣ithub。

利用Github進(jìn)行代碼托管

為什么是Github

免費(fèi)且高效

第一 免費(fèi)
說(shuō)到GitHub，連博主這樣的菜雞都聽(tīng)說(shuō)過(guò)其作為一款免費(fèi)開(kāi)源的軟件托管平臺(tái)的大名。使用這樣一個(gè)開(kāi)源平臺(tái)來(lái)托管個(gè)人博客這種非盈利性的網(wǎng)站的代碼對(duì)于各個(gè)博主來(lái)說(shuō)都是比較合算的。
第二 高效
Github在創(chuàng)立repo的時(shí)候就會(huì)自動(dòng)的為你創(chuàng)建一個(gè)靜態(tài)頁(yè)面。而靜態(tài)頁(yè)面雖然可能有些交互的功能難以實(shí)現(xiàn)，但是對(duì)于一個(gè)個(gè)人博客來(lái)說(shuō)，完全足夠。并且靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索，閱覽速度也十分迅速。同時(shí)作為一個(gè)出名到爆的開(kāi)源平臺(tái)，GitHub上有各路大神大牛，你幾乎可以找到所有你希望實(shí)現(xiàn)功能的庫(kù)和代碼，快速高效的達(dá)成優(yōu)化網(wǎng)站的目標(biāo)。

GitHub的作用

正如上文所說(shuō)的，GitHub對(duì)于Blog來(lái)說(shuō)，就相當(dāng)于一個(gè)繁華商業(yè)街上的展柜，這個(gè)展柜負(fù)責(zé)幫你將你想要賣(mài)的東西從深山老林里面拉出來(lái)再放在店里。畢竟如果沒(méi)有互聯(lián)網(wǎng)的話說(shuō)不清大清到底亡還是沒(méi)亡。

至此就是整個(gè)Blog運(yùn)行的原理，雖然其中還有很多細(xì)節(jié)值得進(jìn)一步討論（很多是博主自己瞎猜的，不過(guò)用來(lái)理解到目前為止沒(méi)出過(guò)什么特別不能解釋的地方），但整體的框架是搭出來(lái)了。如果還用不太明白的讀者可以再看一下下面的流程圖?？赐晡覀兙烷_(kāi)始正兒八經(jīng)的教程了。

Blog環(huán)境的初步配置

注冊(cè)Github，創(chuàng)建Repo

正如之前所說(shuō)的，我們需要一個(gè)GitHub的Repo來(lái)充當(dāng)展柜的作用，第一步如果沒(méi)有GitHub賬號(hào)的朋友需要去注冊(cè)一下，注冊(cè)完之后就可以開(kāi)始創(chuàng)建我們的Repo。

在Repository name中寫(xiě)yoursitename.github.io，例如博主的就是zhenyuwei99.github.io（有教學(xué)貼提過(guò)yoursitename需要喝用戶名相同，博主沒(méi)有嘗試使用其它的sitename，有興趣的話讀者可以嘗試一下）。這個(gè)地址最后就是你的Blog的展柜，但同樣的你也可以選擇自己購(gòu)買(mǎi)自己的域名，比如博主的madwayne.com，至于如何配置個(gè)人域名超出了本篇文章的討論范圍，博主將會(huì)在后續(xù)的文章中進(jìn)行討論。
這個(gè)時(shí)候你可以打開(kāi)Repo中的Setting，在這個(gè)位置

再找到GitHub Pages

你可以看到有這樣一句 “Your site is published at yoursitename.github.io” 這里因?yàn)椴┲髋渲昧俗约旱膫€(gè)人域名所以沒(méi)有顯示本身的網(wǎng)址。你可以點(diǎn)開(kāi)鏈接，看一下自己未來(lái)幾百篇文章將會(huì)放置的地方。當(dāng)然現(xiàn)在這個(gè)時(shí)候用的是GitHub自帶的theme，毫無(wú)美感可言，不過(guò)已經(jīng)已經(jīng)完成了這一階段的任務(wù)，后面就要靠Hexo來(lái)進(jìn)行網(wǎng)站美化以及文章撰寫(xiě)工作了。

優(yōu)雅的敲Hexo

如上文所說(shuō)的，Hexo的文檔十分友好，而且是有中文版本的（由于博主電腦自設(shè)的是English導(dǎo)致一直搜到的網(wǎng)頁(yè)都是英文版，弄完了才發(fā)現(xiàn)有中文版。。。。），讀者可以自行閱讀文檔進(jìn)行環(huán)境的配置，博主在此不再贅述。下面主要說(shuō)明如何優(yōu)雅的在本地進(jìn)行文章的寫(xiě)作。

編譯器的選擇

博主本人之前一直習(xí)慣于Latex寫(xiě)作，所以一直用的是Submile text 3進(jìn)行編譯（主要是沒(méi)有遇到現(xiàn)在用的，Atom也可以編譯Latex）?？催^(guò)Hexo文檔的讀者會(huì)發(fā)現(xiàn)Hexo需要常常用到terminal敲命令，而進(jìn)行窗口的不斷切換實(shí)在不是一件令人舒適的事情，而在看Hexo文檔中自帶的視頻的時(shí)候，我發(fā)現(xiàn)作者所用的一個(gè)編譯器可以自帶terminal，翻邊了YouTube評(píng)論才知道編譯器的名字叫Atom，官網(wǎng)在此，發(fā)現(xiàn)也是GitHub的產(chǎn)業(yè)（嗯，GitHub大法好）。

下載安裝就完事兒了。Atom相較于其他編輯器在于其豐富的可擴(kuò)展性，你可以在上面獲得各種各樣你想要的package來(lái)實(shí)現(xiàn)特定的功能，正如在首頁(yè)所說(shuō)的：“A hackable text editor for the 21st Century”。當(dāng)然還用最重要的一點(diǎn)就是顏值很高，theme也有很多選擇，下面僅介紹一下我的選擇以及package的配置。

Theme的選擇

Atom自帶四種Theme，同時(shí)也有很多別的大神設(shè)計(jì)的theme可以使用，博主在這里使用的是比較有名的 Atom Material Ui，博主寫(xiě)文章時(shí)候的工作效果如下。

Theme的初始狀態(tài)并不是現(xiàn)在這個(gè)樣子，需要在Theme的Setting里面將 Tinted Tab Bar 選項(xiàng)打開(kāi)

Package的配置

這篇文章博主只想談一下用來(lái)使用Hexo所需要的Package，其他的功能（例如博主也會(huì)用Atom來(lái)寫(xiě)Latex和C艸將來(lái)會(huì)在別的文章中詳細(xì)說(shuō)明）
1 PlatformIO IDE Terminal
這個(gè)Package是博主本人轉(zhuǎn)向Atom的主要原因，如上文所說(shuō)的，Hexo使用過(guò)程中經(jīng)常需要使用Terminal來(lái)敲命令，切換實(shí)在麻煩，這個(gè)Package的作用就是在Atom里添加一個(gè)Terminal的窗口，十分的好用。效果如下。

2 atom-beautify
這個(gè)Package的作用時(shí)對(duì)代碼進(jìn)行自動(dòng)的高亮以及排列，對(duì)于強(qiáng)迫癥患者來(lái)說(shuō)可以說(shuō)是很好用了，同時(shí)他也支持很多不同的語(yǔ)言，根據(jù)作者的介紹包括HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL等等。

Hexo使用的一些問(wèn)題

1 Hexo更換Theme
在Hexo的官網(wǎng)中可以找到很多顏值很高的Theme，博主所選擇的是比較成熟的Next。原因在于其比較成熟，同時(shí)用于用戶量很可觀，尋找解決問(wèn)題的方案也很方便。本文以此為例展示如何為自己的網(wǎng)站改變主題。
首先找到Next的文件庫(kù)，在Hexo中點(diǎn)擊文字（點(diǎn)擊圖片的話是預(yù)覽效果）找到Theme的Repo，復(fù)制鏈接

這個(gè)時(shí)候在用Atom打開(kāi)你自己存儲(chǔ)Blog文件的文件夾，打開(kāi)terminal,輸入以下命令：

$ cd themes
$ git clone "siteoftheme"

clone theme的Repo。
下面開(kāi)始配置_config.yml文件,注意這里要區(qū)別站點(diǎn)配置文件以及主題配置文件。這里首先是在Blog文件里的站點(diǎn)配置文件，用于調(diào)用網(wǎng)站配置所需要的文件。

在文件中找到theme這個(gè)選項(xiàng)，將其改為themes文件夾中clone獲得的文件夾名，注意.yml文件 :后需要一個(gè)空格，否則不識(shí)別。

2 Theme的客制化
首先找到theme的配置文件，具體路徑應(yīng)該是 \"blogfolder"\themes\"themename"，通過(guò)更改其中的內(nèi)容可以獲得相應(yīng)的效果，Next比較成熟可以很方便的添加插件實(shí)現(xiàn)很多功能，其中的注釋也很詳細(xì)。雖然是英文只要讀者耐下心讀基本可以理解使用方法，同時(shí)推薦Hexo的Next主題詳細(xì)配置這篇文章，或者也可以看Next使用文檔，基本上可以解決所用問(wèn)題。如果讀者還遇到了無(wú)法解決的問(wèn)題，歡迎email博主一起討論。

部署本地代碼

這個(gè)時(shí)候，我們已經(jīng)完成了進(jìn)入展示柜前的所用工作，我們已經(jīng)很優(yōu)雅的完成了文章的寫(xiě)作同時(shí)也生成了產(chǎn)生網(wǎng)頁(yè)所需要的html文件，下一步我們只需要將這些本地文件部署至GitHub就大功告成了。

直接網(wǎng)站上傳

打開(kāi)GitHub中的Repo，直接點(diǎn)擊Upload files上傳文件。

這種方法比較簡(jiǎn)單，但是沒(méi)有利用好Hexo。

利用Hexo上傳文件

Hexo提供了十分便捷的一件部署方案，$ hexo deploy或者$ hexo d。為了使用這個(gè)功能首先需要安裝hexo-deployer-git。
在 terminal中輸入：$ npm install hexo-deployer-git --save
安裝完成后修改站點(diǎn)配置文件：

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published
  message: [message]

需要注意縮進(jìn)的問(wèn)題，deploy后的每一行需要縮進(jìn)相同。
上述所需要更改的主要是repo和branch選項(xiàng)，repo即為放置Blog文件的庫(kù)的地址，branch一般直接master即可。至于message選項(xiàng)博主也沒(méi)弄懂有什么用，缺省影響不大。更詳細(xì)的信息讀者可以參看Hexo文檔中部署一節(jié)。

結(jié)語(yǔ)

至此我們就已經(jīng)完成了Blog的初步搭建，同時(shí)為大家大致梳理了一下個(gè)人Blog的運(yùn)行原理，希望對(duì)大家有所幫助，后面博主也會(huì)更新一些我自己摸索的更加有意思的東西。至于各位將一部分的人生花在觀看一個(gè)無(wú)聊的SB寫(xiě)的十分啰嗦的文章上，博主在這謝謝了。