本系列文章說明
<blockquote>
《我的Hexo博客站的創(chuàng)建歷程》系列文章共有三篇
第一篇：Github&Coding雙管齊下部署Hexo
第二篇：博客站必備第三方插件安裝+裝飾文章和版面
第三篇：心路歷程總結(jié)
最終效果參見: 一葉染秋的博客
轉(zhuǎn)載本文請(qǐng)注明文章鏈接和署名<br />
本文中出現(xiàn)勘誤紕漏及相關(guān)問題，歡迎朋友們?cè)谖恼孪路搅粞?，?dāng)日我均會(huì)回復(fù)。
</blockquote>
本篇文章你將看到
- 安裝Node.js, Git, Hexo博客框架
- 在本地創(chuàng)建一個(gè)基礎(chǔ)的Hexo原始博客站
- 配置Github和Coding的遠(yuǎn)程項(xiàng)目，各自配齊ssh連接(同一個(gè)ssh私鑰)
- 多個(gè)ssh私鑰的配置經(jīng)驗(yàn)
- 將本地Hexo博客生成內(nèi)容協(xié)同部署到Github和Coding的遠(yuǎn)程倉庫上
- 域名購買及其配置DNS解析到我們Github與Coding上的博客站倉庫
What is Hexo？&Why？
什么是Hexo
Hexo是一款基于當(dāng)下熱門的Node.js開發(fā)出來的靜態(tài)博客框架。用其配合Markdown語法編輯文章發(fā)布是非常快捷方便的。
為什么選擇Hexo
因?yàn)镠exo靜態(tài)博客框架已經(jīng)把我們個(gè)人博客常用的功能都已經(jīng)設(shè)計(jì)好了，不需要我們把過多經(jīng)歷花費(fèi)在博客布局設(shè)計(jì)上。并且它是靜態(tài)的，所以數(shù)據(jù)庫設(shè)計(jì)，交互設(shè)計(jì)這些都不用了，加大了我們部署個(gè)人博客上線的效率和日常使用的便捷性。
Hexo的延展配件豐富，第三方插件兼容好，基于Hexo的博客樣式主題同樣豐富，使用用戶多，版本更新迭代健康，還有一個(gè)重要點(diǎn)是官方配套文檔寫的很友善。
前文提示
我的電腦操作系統(tǒng)是Ubantu 14.04版本，所以本篇文章中的所有指令都是基于Ubantu 14.04系統(tǒng)。對(duì)于linux其他發(fā)行版本的用戶可參考性很大，對(duì)于Win和OS系統(tǒng)用戶在具體Hexo框架搭建部分指導(dǎo)作用不大。本文中的Github&Coding同時(shí)部署和域名配置是完以參考的，這兩處不局限與系統(tǒng)環(huán)境。
Git安裝
我利用ubantu系統(tǒng)的apt-get方式安裝。在終端中輸入$ sudo apt-get install git
系統(tǒng)安裝完畢后，在終端輸入$ git --version,顯示出git版本號(hào)，則說明安裝成功。
其他安裝git方式可參考：中文安裝教程
Node.js安裝
我ubantu系統(tǒng)下使用的是源碼安裝方法：
Step1
在Nodejs官網(wǎng)中下載源代碼：下載鏈接
如上圖所示，選擇Linux類的源碼，點(diǎn)擊下載到本地
Step2
$ tar -zcvf 壓縮文件名.tar.gz命令來把我的壓縮包解壓
$ sudo mkdir /usrl/local/nodejs命令來建立系統(tǒng)中node.js文件夾
$ sudo mv 解壓后的文件夾名/* /usr/local/nodejs命令把node.js源碼放在到剛才建立的文件夾中
Step3
$ sudo vim /etc/enviroment打開系統(tǒng)環(huán)境變量文件
把:/usr/local/nodejs/bin加入到本文件的PATH = ""的末尾，注意 : 是英文
按Esc，按shift和冒號(hào)按鍵后，鍵入wq！進(jìn)行文本寫入保存
Step4
我們重啟電腦后，終端中鍵入$ node -v,顯示出Node.js版本編號(hào)，即算安裝成功。
優(yōu)化Node.js的npm安裝
目的：后續(xù)我們?cè)谑褂肏exo框架的時(shí)候，要進(jìn)行相關(guān)插件安裝，但是原始npm源安裝網(wǎng)絡(luò)很慢，所以更換成國(guó)內(nèi)的鏡像并用cnpm替換之。國(guó)內(nèi)鏡像地址
方法:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
自動(dòng)配置完畢后，終端輸入$ cnpm -v，顯示出版本信息即為安裝成功。
Hexo靜態(tài)博客框架安裝
安裝Hexo
$ cnpm install hexo-cli -g
安裝完畢后，終端輸入
$ hexo -v 顯示出版本信息，則hexo安裝成功
在指定文件夾中搭建Hexo
$ mkdir 博客站存儲(chǔ)信息文件夾名稱 根據(jù)自己設(shè)計(jì)建立存儲(chǔ)自己博客站信息的文件夾
進(jìn)入上步創(chuàng)建的文件夾，輸入$ cnpm install hexo --save 把Hexo安裝到我們的空博客站文件中
再在此目錄下分步輸入以下面命令：
$ hexo init Hexo框架初始化
$ cnpm install 安裝依賴包
安裝Hexo必備插件
依然是博客站目錄下
$ cnpm install hexo-server --save搭建本地服務(wù)器所需插件
$ cnpm install hexo-deployer-git --save使用git方式進(jìn)行部署博客所需插件
本地預(yù)覽Hexo博客站
Step0
首先$ git init 先把之前安裝的git，在本地博客目錄下初始化
Step1
$ hexo g 生成存放靜態(tài)博客站信息的文件夾public
Step2
$ hexo s 啟動(dòng)本地博客站服務(wù)
用瀏覽器打開網(wǎng)址http://localhost:4000 即可看到本地Hexo博客站的主頁面
當(dāng)大家在自己的瀏覽器上看到相同的網(wǎng)頁時(shí)，恭喜，你的Hexo靜態(tài)博客已經(jīng)在本地成功運(yùn)行起來了，只需繼續(xù)完成后面的github與coding配置，就能讓我們的個(gè)人博客上線啦??！
Github與Coding的用前說明
兩者均用的策略
通過DNS域名解析設(shè)置，使Github 作為外網(wǎng)的訪問倉庫，Coding作為國(guó)內(nèi)的訪問倉庫。這樣好處是保內(nèi)外訪問的穩(wěn)定性，同時(shí)能讓內(nèi)外搜索引擎都能抓取到博客站，不會(huì)受到限制。這就是我們本文主題Github&Coding雙管齊下的核心
必看提示
下面配置的順序先是配置Github，再是Coding。
如果你還沒有Coding帳號(hào)或者為了博客站同步部署新建一Coding個(gè)帳號(hào)，請(qǐng)用你的Github注冊(cè)登陸的郵箱注冊(cè)Coding帳號(hào)，這將方便很多
進(jìn)行Github配置
- 如果你已經(jīng)有了github和配置了ssh或者h(yuǎn)ttps，可直接跳到Coding的配置部分即可
- 如果你沒有g(shù)ithub，很好，按照下方步驟依次執(zhí)行即可
Setp1 創(chuàng)建Github Pages 遠(yuǎn)程倉庫
如果沒有注冊(cè)github帳號(hào)，先注冊(cè)一個(gè)(注冊(cè)網(wǎng)址)，登陸后回到github主頁，點(diǎn)擊start a project
緊接著會(huì)出現(xiàn)上圖情況，在Respository name下位置填寫：“自己設(shè)計(jì)的博客名稱”+github.io組成。ps:這就是我們Github上個(gè)人博客的二級(jí)域名，需要把它記錄下來，后面需要用。
點(diǎn)擊下方的 Create respository，會(huì)出現(xiàn)下圖的情況，點(diǎn)擊ssh，后面的地址是我們要通過ssh來把本地和遠(yuǎn)程github倉庫相連接的地址
這個(gè)地址就是Github遠(yuǎn)程倉庫的連接地址，現(xiàn)在我們把這個(gè)地址復(fù)制保存下來，在后面Hexo上線部署時(shí)要用。
![Uploading githubsettings_128839.png . . .]
Step2 配置本地和Github的ssh傳輸連接
打開終端輸入$ ssh-keygen -t rsa -b 4096 -C "你注冊(cè)Github時(shí)的郵箱"回車
之后系統(tǒng)顯示Enter file in which to save the key(/xxx/.ssh/id_rsa): 我們記?。ǎ┲械牡刂肥潜４嫠借€保存地址及文件，之后繼續(xù)一路回車回車。結(jié)束上面的操作后，我們打開在上一步生成的ssh私鑰$ sudo cat /Users/your_user_directory/id_rsa.pub ，把終端上顯示的一大段結(jié)果復(fù)制下來
我們回到github頁面點(diǎn)擊我們github的登陸用戶，在下拉菜單中點(diǎn)擊Settings,如下圖
現(xiàn)在已經(jīng)跳轉(zhuǎn)到了Settings頁面，我們?cè)谧髠?cè)欄中點(diǎn)擊SSH and GPG keys,再點(diǎn)擊右側(cè)的New SSH key按鍵
此時(shí)我們可以看到下圖情況，Title給這個(gè)key起個(gè)別名，在Key中，粘貼進(jìn)去我們之前一步從終端保存下來的那一大段密鑰。之后點(diǎn)擊下方Add SSH key
現(xiàn)在我們測(cè)試一下本地和github的ssh配置是否正確，打開終端輸入$ ssh -T git@github.com
如果你看到了一句提示信息:
Hi (你的注冊(cè)用戶名)! You've successfully authenticated, but GitHub does not provide shell access.
那么說明已經(jīng)配置好了github遠(yuǎn)程倉庫與本地。
Coding配置
Setp1 創(chuàng)建Coding Pages 遠(yuǎn)程倉庫
先到Coding官網(wǎng)注冊(cè)一個(gè)帳號(hào)Coding官網(wǎng)，登陸后點(diǎn)擊側(cè)邊欄的項(xiàng)目，再點(diǎn)擊添加項(xiàng)目
項(xiàng)目名稱填寫：自己設(shè)計(jì)的名稱+coding.me。color="#FF0000">(ps:這就是我們Github上個(gè)人博客的二級(jí)域名，需要把它記錄下來，后面需要用。)
這里的選項(xiàng)可以選擇私有或者公開，就看你想不想讓別人看了。之后，我們點(diǎn)擊底部的創(chuàng)建項(xiàng)目*
創(chuàng)建完項(xiàng)目之后點(diǎn)擊左側(cè)的代碼一欄，就會(huì)出現(xiàn)下方狀體
點(diǎn)擊頁面中的SSH，此處顯示的內(nèi)容就是我們Coding遠(yuǎn)程倉庫的鏈接地址，復(fù)制保存下來，在后面Hexo上線部署時(shí)要用。
Step2 配置本地和Coding的ssh傳輸連接
回到瀏覽器，在Coding登陸后，點(diǎn)擊右上角用戶頭像,
點(diǎn)擊左邊欄的賬戶-->SSH 公鑰
我們打開之前在配置Github時(shí)候的ssh私鑰$ cat /Users/your_user_directory/id_rsa.pub，把終端上顯示的一大段結(jié)果復(fù)制下來,粘貼到公鑰內(nèi)容欄中，公鑰名稱可自己定義。
點(diǎn)擊永久有效，再點(diǎn)擊添加完成提交。
現(xiàn)在我們測(cè)試一下本地和Coding的ssh配置是否正確.。
打開終端輸入$ ssh -T git@git.coding.net
如果你看到了一句提示信息:
Coding.net Tips : [Hello! You've connected to Coding.net via SSH. This is a deploy key.]
那么說明已經(jīng)配置好了Coding遠(yuǎn)程倉庫與本地。
多個(gè)SSH私鑰配置經(jīng)驗(yàn)
設(shè)置多個(gè)私鑰
如果你的Coding 和 Github的注冊(cè)郵箱不能滿足一樣，或者說他們有各自的ssh私鑰。我們通過配置ssh連接時(shí)候，更換不同私鑰文件名稱來分別存儲(chǔ)。
Step1
（ps:如果你Github已經(jīng)本地生成了私鑰，這塊可以不做，但是coding部分的私鑰文件名要區(qū)分你之前的私鑰文件名）
終端輸入$ ssh-keygen -t rsa -b 4096 -C "你注冊(cè)Github時(shí)的郵箱"
終端顯示Enter file in which to save the key(/xxx/.ssh/id_rsa):id_rsa_github
這里代表著，你的github遠(yuǎn)程倉庫綁定的是這個(gè)郵箱，私鑰名稱為id_rsa_github
之后繼續(xù)連續(xù)回車到結(jié)束
建立Coding的ssh私鑰
終端輸入$ ssh-keygen -t rsa -b 4096 -C "你注冊(cè)Coding時(shí)的郵箱"
終端顯示Enter file in which to save the key(/xxx/.ssh/id_rsa):id_rsa_coding
這里代表著，你的coding遠(yuǎn)程倉庫綁定的是這個(gè)郵箱，私鑰名稱為id_rsa_coding
之后繼續(xù)連續(xù)回車到結(jié)束
Step2
在本地保存ssh私鑰文件所在的目錄新建一個(gè)config配置文檔，以我的為例
終端輸入$ vim ~/.ssh/config，里面填寫如下內(nèi)容，其中IdentityFile是你自己存放ssh私鑰的文件名和文件路徑，切記。
Host github.com
HostName github.com
User git
IdentityFile /home/redredleaf/.ssh/id_rsa_github
Host coding.net
HostName coding.net
User git
IdentityFile /home/redredleaf/.ssh/id_rsa_coding
上面兩步操作完后，我們的私鑰文件所在目錄的結(jié)構(gòu)是：
注意權(quán)限
如果你在$ ssh-keygen -t rsa -b 4096 -C "你注冊(cè)Github時(shí)的郵箱"這步的時(shí)候用了sudo，或者在root用戶下執(zhí)行的，那么你后續(xù)的ssh連接和hexo本地提交到遠(yuǎn)程倉庫的命令都必須都是在root權(quán)限下執(zhí)行，否則會(huì)出現(xiàn)Permission denied (publickey)的情況
Hexo的上線部署
我們?cè)贑oding和Github配置ssh的時(shí)候，就已經(jīng)保存了各自的遠(yuǎn)程倉庫ssh連接地址，現(xiàn)在把他們準(zhǔn)備好。如果沒有保存，那么可以在：
- 登陸coding后，點(diǎn)擊左側(cè)欄的項(xiàng)目-->點(diǎn)擊建立的項(xiàng)目-->點(diǎn)擊左側(cè)欄的代碼 ，之后頁面中就能找到ssh的連接了
- 登陸github后，點(diǎn)擊右上角自己的頭像-->點(diǎn)擊Your profile-->點(diǎn)擊你的博客遠(yuǎn)程倉庫，頁面中就能找到ssh的連接了
Step1
通過終端 cd進(jìn)入我們最開始建立本地博客站的文件夾下，執(zhí)行$ vim _config.yml
在文件中找到下方圖片中的位置，按照下方內(nèi)容修改,并把自己的Github和Coding的ssh遠(yuǎn)程連接替換上。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
coding: 你的coding遠(yuǎn)程倉庫ssh連接地址
github: 你的github遠(yuǎn)程倉庫ssh連接地址
branch: master
coding 和 github后的內(nèi)容就是我們保存下來各自的遠(yuǎn)程倉庫連接。保存退出
Step2
終端輸入 $ hexo clean 之前本地已經(jīng)生成了一遍靜態(tài)文件，現(xiàn)在清理一遍
終端輸入 $ hexo g -d 等到命令執(zhí)行完畢，我們的配置就算基本完成了
現(xiàn)在你可以在瀏覽器打開兩個(gè)頁面分別輸入：你的博客項(xiàng)目名稱.git，你的博客項(xiàng)目名稱.github.io,當(dāng)成功看到Hexo的hello world的頁面，這代表你的Github與Coding配置Hexo站點(diǎn)成功啦啦。
域名配置
二級(jí)域名不好記，歸屬感也不強(qiáng)。那咱們就花一頓魚香肉絲蓋飯的錢，給自己買一個(gè)頂級(jí)域名，豈不美哉？
Step1 注冊(cè)購買
我們先到阿里云官網(wǎng)注冊(cè)一個(gè)帳號(hào)(官網(wǎng)地址)
之后打開域名購買地址,我這里推薦大家選擇是.me的頂級(jí)域名，原因有三：
- 便宜，一般就是15塊左右
- 不用備案，CNAME可以指定到我們的coding和github的項(xiàng)目二級(jí)域名
- 個(gè)人blog配me，有個(gè)性很搭，體現(xiàn)了一種我就是我，不一樣的躥天猴的feel
自己的域名具體叫什么，就看自己的創(chuàng)意了。（我一般用自己的英文網(wǎng)名）
Step2 DNS域名解析
ps:回我們的阿里云到首頁，如果大家還沒有做實(shí)名認(rèn)證可以先把實(shí)名認(rèn)證做了，因?yàn)閲?guó)內(nèi)的網(wǎng)絡(luò)管理越來越嚴(yán)格，在很多網(wǎng)絡(luò)服務(wù)中這已經(jīng)是必須做的了。
再登陸回我們的阿里云到首頁，點(diǎn)擊右上角的控制臺(tái)，繼續(xù)點(diǎn)擊左側(cè)欄域名與網(wǎng)站(萬網(wǎng))-->域名 此時(shí)主頁中就會(huì)出現(xiàn)下圖情況
這里我們看到剛剛購買的域名了，點(diǎn)擊域名那行尾部的解析，之后我們就跳轉(zhuǎn)配置解析頁面。我們繼續(xù)點(diǎn)擊紅色添加解析按鍵，若有認(rèn)證信息請(qǐng)自己通過
按照上圖的欄目填寫選擇，記錄類型和主機(jī)記錄其中Github和Coding設(shè)置不同之處是：
github的解析線路處選擇：海外，記錄值填寫自己之前保存的github二級(jí)域名地址（修改后，保存）
coding的解析線路處選擇：默認(rèn)，記錄值填寫自己之前保存的coding二級(jí)域名地址（修改后，保存）
最終效果，以我的解析為例
Step3 Github與Coding項(xiàng)目的別名記錄
在我們建立的本地博客目錄下，進(jìn)入source文件目錄下，創(chuàng)建CNAME文件
$ vim CNAME
內(nèi)容填寫你購買的域名，比如我的redredleaf.me
redredleaf.me
回到Coding的我們建立的博客項(xiàng)目中，點(diǎn)擊代碼-->Pages服務(wù)，現(xiàn)在部署來源選項(xiàng)中，選擇master 分支點(diǎn)擊保存
再在自定義域名欄中，把我們的購買的域名填寫進(jìn)去，點(diǎn)擊綁定如下圖
最后我們?cè)诓┛驼颈镜啬夸浵陆K端輸入$ hexo g -d進(jìn)行最后的提交。
當(dāng)我們?cè)俅斡脼g覽器打開我們自己域名網(wǎng)站的時(shí)候，成功看到Hexo基礎(chǔ)頁面，說明部署已經(jīng)全部成功啦啦啦~
下期預(yù)告
我們的博客站需要自己的一些個(gè)性需求，需要換個(gè)主題呀，添加個(gè)文章評(píng)論轉(zhuǎn)發(fā)什么的，安裝配置各種有意思的裝飾性配件。
我們的博客站還有一些必不可少的第三方統(tǒng)計(jì)插件來豐富我們的站點(diǎn)。
Markdown寫文章中，我們還可以做些什么。
以上這些在下篇文章中均會(huì)涉獵。現(xiàn)在我們已經(jīng)把Hexo站點(diǎn)建立部署好了，大家可以先去Hexo官網(wǎng)上看文檔(官文地址)，自己學(xué)習(xí)如何發(fā)布自己的文章及寫作，讓自己的站點(diǎn)先變得充實(shí)起來。
