本系列文章說明
<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í)起來帜讲。
