本文講解我在搭建Hexo博客的完整過程荚藻，主要內容包括GitHub與SSH场梆、FAQ等。

另外還需要注意的是：

1. Hexo博客框架和nexT主題的搭建過程本文會直接引用官方教程仇冯，一筆略過苛茂；
2. 由于我是在Mac上搭建Hexo博客的狸棍，所有一些命令在Windows的終端中可能找不到，請自行下載安裝味悄。

下面進入正文：

一開始的時候我沒有注冊域名草戈，靜態(tài)生成的文章都是放在GitHub上的，這里先以這種情況來說明：

GitHub創(chuàng)建與配置

創(chuàng)建GitHub賬號

Step1 Set up a personal account

首先在瀏覽器中輸入網址：https://github.com/join?source=header-home侍瑟，然后填寫用戶名唐片、郵箱、密碼涨颜，注意：該郵箱地址在之后的SSH配置中有重要作用费韭，最后點擊Create an account按鈕，界面如下圖所示：

注冊github步驟1.png

Step2 Choose your plan

默認選擇即可庭瑰，直接點擊Continue按鈕星持，進入下一步進行郵箱驗證，界面如下圖所示：

注冊github步驟2.png

Step3 Tailor your experinece

登錄自己設置的郵箱弹灭，點擊驗證郵箱之類的按鈕后會進入此處督暂，如果在其左上角有Your email was verified.這樣的文案表明郵箱驗證成功。

配置GitHub相關信息

創(chuàng)建工程

如圖所示：

配置相關信息.png

如果你從未使用過GitHub穷吮，可以點擊Read the guide按鈕學習如何創(chuàng)建工程并使用逻翁。

如果你知道如何創(chuàng)建GitHub工程的話，那就簡單了捡鱼，直接點擊Start a project按鈕就可以開始工程的創(chuàng)建八回，當然也可以從此處進入。依次填寫倉庫名、描述信息缠诅、初始化README文件溶浴，最后點擊Create repository按鈕，就成功創(chuàng)建一個工程了管引。但是因為該工程是提供給Hexo博客使用的士败，所以有以下幾個注意點：

1. 倉庫名必須為name.github.io這樣的格式，需要注意的是：除了大小寫可以不同之外汉匙，name必須和Github's Username一模一樣；還有據說后面的io也可以是com生蚁，這個我就不清楚了噩翠，有興趣的可以嘗試一下。
2. 描述信息和是否初始化README文件完全看個人興趣邦投，但是我的建議是需要的伤锚，因為這樣能直截了當的明白這個工程是干嘛用的。

例如下圖所示：

創(chuàng)建倉庫.png

偏好設置

如果你熟悉GitHub志衣，則可以進行一些偏好設置屯援，即個性化設置，如上傳頭像念脯。這些都是非常簡單的狞洋，所示就不做闡述了。接著我們開始配置SSH绿店，這個是重點吉懊。

配置SSH

1. 打開終端，輸入命令：

   $ ssh -T git@github.com
   

   如果輸出內容是Permission denied (publickey).假勿，則表明我們尚未在GitHub中正確配置SSH借嗽；反之則表明配置成功，直接跳過這一部分即可转培。

2. 繼續(xù)輸入命令：

   $ ssh-keygen -C "Your primary GitHub email address”
   

   切記必須修改命令中的郵箱地址恶导，該郵箱地址即為你注冊GitHub時所填寫的郵箱地址。輸入成功之后會依行出現(xiàn)如下圖所示提示：

   設置SSH-key.png

   分別表示為文件名浸须、密碼和確認密碼惨寿，輸入正確后會給出重要的配置信息。

3. 繼續(xù)輸入命令：

   $ cat ~/.ssh/key's filename.pub | pbcopy
   

   該命令中pub文件的文件名即為上一步中設置的文件名删窒，由于該命令中包含pbcopy關鍵字缤沦，所以該命令可以將pub文件中的內容直接復制到剪切板中，以防之后在網頁中配置SSH信息時發(fā)生不必要的錯誤易稠。

4. 打開配置SSH的網頁缸废，點擊右上角的New SSH key按鈕，如下圖所示：

   設置SSH.png

   接著將pub文件中的內容粘貼到Key表示的文本框中，然后在Title表示的文本框中隨便命名一個名字企量，最后點擊Add SSH key按鈕即可添加SSH key测萎。

5. 雖然已經成功添加了SSH key，但是這并不代表著SSH配置成功了届巩，我們繼續(xù)在終端輸入命令：

   $ ssh -T git@github.com
   

   如果輸出內容包含You've successfully authenticated, but GitHub does not provide shell access.則表明SSH配置成功硅瞧；如果出現(xiàn)錯誤信息，可以繼續(xù)輸入該命令：

   $ ssh -Tv git@github.com
   

   進行診斷與調試恕汇。

6. 最后附上配置SSH的官方教程腕唧，還是很詳細的。

安裝Git與Node.js

安裝Git

什么是Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

中文解釋：Git是一個免費且開源的分布式版本控制系統(tǒng)瘾英，它被設計出來的目的是快速且高效的管理任何一個從小到非常大的工程枣接。

Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

中文解釋：Git是易于學習并且擁有極小的空間和閃電般的速度，它遠高于那些像Subversion缺谴、CVS但惶、Perforce和ClearCase一類的SCM工具，它擁有簡單的本地分支湿蛔，方便的分??段區(qū)域和多個工作流的功能膀曾。

引用摘自Git官網

有興趣的話可以看看：廖雪峰的Git經典入門教程

安裝與校驗

安裝Git的方式有很多種，我們即可以從官網下載阳啥，也可以使用其他方式安裝添谊，這里我們使用Homebrew來進行安裝。

1. 安裝Homebrew：打開終端之后察迟，輸入下面命令即可：

   $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
   

2. 安裝Git：Homebrew安裝完成之后碉钠，繼續(xù)輸入命令就會自動下載最新的Git進行安裝：

   $ brew install git
   

3. 校檢Git是否安裝成功：繼續(xù)輸入命令：

   $ git --verison
   

   如果正確輸出版本號信息，則表明Git安裝正確卷拘，反之則表明安裝失敽胺稀；如果操作無誤的話栗弟，請嘗試其他途徑污筷，如：從官網下載。

安裝Node.js

什么是Node.js

Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

引用摘自Node.js官網

中文解釋：Node.js是一個基于Google Chrome瀏覽器的V8引擎的Javascript運行環(huán)境（支持的系統(tǒng)包括*nux乍赫、Windows）瓣蛀，使用事件驅動和非阻塞I/O模型使其更輕量且高效。

安裝與校驗

安裝Node.js的方式有很多種雷厂，這里介紹兩種：

1. 使用Homebrew安裝：

   $ brew install node
   

2. 這里我們只要進入Node.js官網惋增，然后下載需要的版本進行傻瓜式安裝操作就可以了，如官方推薦版本改鲫。

其他安裝方式可以參考此處：Hexo開始使用-概述-安裝 Node.js诈皿。

最后林束，安裝完成之后，跟安裝Git一樣稽亏，我們也需要判斷Node.js是否安裝正確壶冒，同樣十分簡單，在終端輸入命令：

$ node -v

如果正確輸出版本號信息截歉，則表明Node.js安裝正確胖腾。

Hexo搭建與配置

在搭建Hexo博客框架之前，我們還需要安裝NPM。如果你之前是通過Homebrew安裝Node.js的話，就無需擔心了，因為會附帶安裝NPM；
如果你是通過其他方式安裝的話靶病，請自行谷歌、百度。

Hexo的搭建在官網上已經講解的十分詳細了，此處提供一個傳送門毫胜，下面我主要講一些在Hexo搭建與配置的過程中需要注意的地方：

deploy

安裝方式：

npm install hexo-deployer-git --save

官方教程：Hexo基本操作-部署

注意事項：

1. 由于_config.yml文件使用YAML格式編寫书斜，所以必須注意縮進（縮進時不允許使用Tab鍵诬辈，只允許使用空格）和空格。
2. 如果Hexo的版本大于3.0荐吉，則deploy的type屬性值需填寫為git焙糟，否則需填寫為github。
3. deploy的repository屬性值為我們一開始在GitHub中創(chuàng)建的倉庫地址样屠。
4. 在執(zhí)行hexo deploy命令進行部署時穿撮，若出現(xiàn)ERROR Deployer not found: git之類的錯誤提示，應該是你的_config.yml文件填寫錯誤痪欲，請仔細排查悦穿，哪怕是一個空格。當然也有可能是因為你之前在安裝自動化部署插件時沒有添加--save選項導致业踢，當然也有可能是其他原因栗柒。

NexT主題安裝與配置

NexT可以說是在搭建Hexo博客中資料最全的主題了，官網對于NexT主題的安裝與配置已經講解的非常詳細了知举，包含：開始使用瞬沦、主題配置、第三方服務雇锡、內建標簽等內容逛钻，可以通過此傳送門一步步操作。下面列舉一些注意點：

如何設置網站背景

如果你想要給自己的網站加一個背景圖片也很簡單锰提，你只需要一下兩步就行了：

1. 首先將背景圖片存放到該目錄下：

   Blog $ cd themes/next/source/images/
   

2. 接著打開你的scheme所在的目錄曙痘，比如我的scheme是Mist芳悲，然后編輯index.styl文件，即以下兩條命令：

   Blog $ cd themes/next/source/css/_schemes/Mist(Pisces和Muse也行)/
   Blog $ vim index.styl
   

   打開index.styl文件之后屡江，在Components上面新增設置背景圖片的代碼芭概，具體內容如下所示：

   // 省略一些代碼
   @import "sidebar/sidebar-blogroll";
   
   body { background:url(/images/back.png);}
   
   // Components
   // 省略一些代碼
   

3. 最后重新部署就可以了！

VPS(CentOS)搭建Hexo博客并配置Git

上面的教程中只是把博客部署在Github中惩嘉，如果自己買了個域名罢洲，并且想要把博客搭建在自己的VPS虛擬主機中的話，還需要配置一些東西文黎。

另外說明幾點：

1. 我是使用SecureCRT連接服務器的惹苗，當然你也可以使用其他工具連接，至于怎么連接應該很簡單的耸峭，就是配置ip地址桩蓉、端口號，如果不會劳闹，請自行谷歌院究、百度。

2. 我的VPS虛擬主機安裝的是CentOS系統(tǒng)本涕，下面是等會要用到的一些命令：

su：切換用戶
mkdir：創(chuàng)建目錄
touch：創(chuàng)建文件
echo：寫入指定內容到指定文件
cat：查看文件內容业汰，用于驗證文件內容是否正確
chmod：設置文件或文件夾的權限

配置Nginx源配置文件

首先需要在/etc/yum.repos.d目錄下創(chuàng)建Nginx源配置文件nginx.repo，寫入如下代碼：

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

安裝Nginx并校驗

[root@localhost /]# yum install nginx -y

[root@localhost /]# nginx -v
nginx version: nginx/1.10.3

部署Nginx

配置站點解析配置文件

在/etc/nginx/sites-available目錄下創(chuàng)建配置文件hexo.conf菩颖，寫入如下代碼：

server {
  root /var/www/fqxyi.com/public; # 站點目錄
  index index.html index.htm; # 主頁
  server_name www.fqxyi.com fqxyi.com; # 域名
  location / {  # 當輸入的網址不存在時样漆，會嘗試重定向到404頁面
    try_files $uri $uri/ /404/;
  }
}

添加站點解析配置文件

在/etc/nginx/nginx.conf文件的http選項中添加如下代碼：

include /etc/nginx/sites-available/*.conf;
include /var/www/*.conf;

配置防火墻并校驗

[root@localhost /]# iptables -I INPUT -p tcp --dport 80 -j ACCEPT

[root@localhost /]# /etc/init.d/iptables status

如果顯示結果中包含ACCEPT tcp -- 0.0.0.0/0 0.0.0.0/0 tcp dpt:80\，則說明配置成功晦闰。

啟動Nginx服務

[root@localhost /]# service nginx reload
[root@localhost /]# /etc/init.d/nginx start

若無錯誤提示信息放祟，則表示Nginx服務啟動成功

創(chuàng)建站點管理者

另外，為了安全考慮呻右，可以在VPS上創(chuàng)建一個普通用戶(fqxyi)專門來管理網站的跪妥。

創(chuàng)建用戶組及用戶并校驗

[root@localhost /]# groupadd sitesManagers # 創(chuàng)建用戶組
[root@localhost /]# useradd fqxyi -m -g sitesManagers # 創(chuàng)建用戶
[root@localhost /]# finger fqxyi # 校驗用戶
Login: fqxyi                            Name:
Directory: /home/fqxyi                  Shell: /bin/bash
Last login Sun Feb 19 04:00 (EST) on pts/0 from 114.114.114.114
No mail.
No Plan.
[root@localhost /]# groups fqxyi # 校驗用戶組
fqxyi : sitesManagers

注意：114.114.114.114是當前網絡的ip地址，這個值是我隨便寫的声滥，請忽略眉撵。

設置用戶密碼

[root@localhost /]# passwd fqxyi

設置fqxyi目錄權限

[root@localhost /]# chmod 755 /home/fqxyi

給fqxyi用戶添加sudo權限

修改/etc/sudoers文件，找到如下指令添加一條

... // 省略一些代碼
## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL
fqxyi   ALL=(ALL)     ALL # 新增這條指令
... // 省略一些代碼

建站測試

創(chuàng)建測試頁面

進入/var/www/fqxyi.com/public目錄醒串，執(zhí)行下列操作即可：

[root@localhost /]# cd /var
[root@localhost var]# mkdir www
[root@localhost var]# chmod 777 www
[root@localhost var]# su fqxyi
[fqxyi@localhost var]# mkdir -p /var/www/fqxyi.com/public
[fqxyi@localhost var]# cd /var/www/fqxyi.com/public
[fqxyi@localhost public]# echo "This is test HTML" > index.html

預覽測試頁面

打開瀏覽器执桌，輸入域名：fqxyi.com，查看是否顯示：This is test HTML芜赌。

刪除測試文件

[fqxyi@localhost public]# rm index.html

安裝配置Git

安裝并驗證Git

[root@localhost /]# yum install git
[root@localhost /]# git --version
git version 1.7.1

修改VPS上ssh的端口號

將/etc/ssh/sshd_config文件中的Port值修改為22仰挣，文件較長，應該在最后：

... // 省略一些代碼
#   ForceCommand cvs server

PermitRootLogin yes
Port 22

之所以修改為22缠沈，是因為使用ssh連接服務器的默認端口是22膘壶，本來想著在站點配置文件中deploy屬性下新增port屬性错蝴，解決端口無需限制為22的情況，然而沒有成功...

ssh遠程登錄驗證

在本地終端使用ssh登錄VPS的fqxyi用戶颓芭，驗證是否能夠正常訪問服務器顷锰。

fengqingxiuyi:~ qingfeng$ ssh fqxyi@fqxyi.com
fqxyi@fqxyi.com's password:
Last login: Sun Feb 19 04:00:53 2017 from 114.114.114.114
-bash: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory
[fqxyi@localhost ~]$

注意：114.114.114.114是當前網絡的ip地址，這個值是我隨便寫的亡问，請忽略官紫。

因為我已經成功連接過了，所以顯示的結果是這樣的州藕。如果你從未這樣操作過束世，可以查看配置SSH章節(jié)，然后請將你自己設置的.pub文件中的內容床玻，從AAA開頭復制到最后毁涉，等到下一章節(jié)使用。

使用普通用戶(fqxyi)配置Git

在網站管理者的家目錄配置.ssh公鑰锈死，用于靜態(tài)文件本地與VPS同步贫堰。將上一步復制的本地公鑰，粘貼到VPS的authorized_keys文件中

[root@localhost /]# su fqxyi
[fqxyi@localhost /]# cd /home/fqxyi
[fqxyi@localhost ~]# mkdir .ssh
[fqxyi@localhost .ssh]# cd .ssh
[fqxyi@localhost .ssh]# echo "本地的公鑰(AAA開頭)" > authorized_keys
[fqxyi@localhost .ssh]# cat authorized_keys # 務必查看是否添加成功

配置Git倉庫

在VPS上初始化Git倉庫待牵，配置hooks目錄下的post-receive文件其屏，實現(xiàn)本地靜態(tài)文件發(fā)布時自動同步到站點目錄。

初始化Git倉庫

[root@localhost /]# su fqxyi
[fqxyi@localhost /]# cd /home/fqxyi
[fqxyi@localhost ~]# mkdir fqxyiBlog.git
[fqxyi@localhost ~]# cd fqxyiBlog.git
[fqxyi@localhost fqxyiBlog.git]# git init -—bare # 兩個 - 符號

配置Git倉庫

在/home/fqxyi/fqxyiBlog.git/hooks目錄創(chuàng)建post-receive

[fqxyi@localhost fqxyiBlog.git]# cd hooks
[fqxyi@localhost hooks]# touch post-receive
[fqxyi@localhost hooks]# chmod 755 post-receive

然后在post-receive文件寫入以下內容：

#!/bin/bash -l
GIT_REPO=/home/fqxyi/fqxyiBlog.git # Git倉庫
TMP_GIT_CLONE=/tmp/fqxyiBlog
PUBLIC_WWW=/var/www/fqxyi.com/public # 站點目錄
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

博客初始化與編譯發(fā)布

修改站點配置文件_config.yml

在_config.yml文件末寫入如下內容

deploy:
    type: git
    repo: fqxyi@fqxyi.com:fqxyiBlog.git
    branch: master

發(fā)布到VPS服務器

使用MarkDwon編寫文章洲敢，并保存到suource/_posts文件夾下漫玄，然后使用下面的命令實現(xiàn)靜態(tài)生成和VPS部署茄蚯。

fengqingxiuyi:hexo qingfeng$ hexo clean && hexo g && hexo d

MarkDown

Hexo博客是基于Markdown來進行編寫的压彭，由于相關的編輯器也有很多，所以這里就不做太多闡述了渗常，大家有興趣可以去這里看看壮不。

比如使用Mou編輯器進行編寫，界面效果如下所示：

Mou.png

不過我推薦的是馬克飛象和MWeb皱碘，兩者不僅能達到很好的實時預覽效果询一，還能夠同步文章到印象筆記。

兩者都可以體驗一段時間癌椿，如果覺得好的話健蕊，而且愿意花75RMB/年，建議使用前者踢俄。不過我選擇了后者缩功，雖然后者同步文章到印象筆記沒有前者那么智能，但是有破解版都办。

下面是兩者的界面效果：

maxiang.png

mweb.png

最后附上教程地址：Markdown簡單的世界

FAQ

favicon不顯示

當我們在搭建Hexo博客的時候嫡锌，必然會自定義favicon.ico虑稼，顯示在網頁選項卡的左上角，如圖所示：

favicon不顯示.png

設置favicon也很簡單势木，只需要在主題配置文件_config.yml中蛛倦，進行如下操作即可：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/Blog/favicon.ico

如果favicon的路徑設置正確，而且清除了緩存啦桌，刷新了頁面好幾次溯壶，但favicon仍然不顯示的話，可以等待一段時間甫男，再去刷新茸塞，可能就會顯示了！

404問題

現(xiàn)象：從首頁點擊某篇文章跳轉到了404頁面查剖！

分析：既然出現(xiàn)了404頁面钾虐，那么必定是路徑問題；仔細檢查路徑發(fā)現(xiàn)笋庄，原來是以前名為mou.md的文件效扫，現(xiàn)在變成了Mou.md`。所以在github上路徑中文件夾的名字仍然是mou直砂，而不是Mou菌仁。

解決：本來以為只需要執(zhí)行以下命令就可以了：

Blog$ hexo clean && hexo g && hexo d

后來發(fā)現(xiàn)自己還是太年輕了，因為hexo clean的只是本地的文件静暂，和github完全沒有關系济丘，之后想了半天也毫無頭緒，于是另辟蹊徑：將Mou.md文件再重命名一下洽蛀，如Mou2.md摹迷，執(zhí)行上述命令之后，再重命名回Mou.md郊供，再執(zhí)行上述命令就可以了峡碉。??

總結：當我在重命名md文件時，切忌不可只是進行了大小寫轉換驮审，因為像這樣把文章部署到github上之后鲫寄，文件名對應的文件夾是不會發(fā)生變化的！７枰地来！

干貨

最后附上一些干貨，方便大家查找使用熙掺，包含谷歌百度收錄問題未斑、版權信息追加等

Wiki形式

禁止md文件生成html文件

只需要把.md文件的后綴名改為.mdown即可！

百度主動推送

curl推送示例

curl -H 'Content-Type:text/plain' --data-binary @urlPath "http://data.zz.baidu.com/urls?site=fqxyi.com&token=yourToken"

yourToken可以從百度站長平臺主頁-網頁抓取-鏈接提交-自動提交-主動推送(實時)處得知适掰，此外你還可以發(fā)現(xiàn)其他的推送方式颂碧，如：post荠列、php、ruby等载城。

urlPath指包含每篇文章URL的文本文件肌似，內容形式如下：

http://fqxyi.com/Hexo博客搭建.html
http://fqxyi.com/基本工具/Charles抓包.html
http://fqxyi.com/基本工具/圖片壓縮工具.html
...
// 此處省略其他自動生成的文章鏈接

那么如何自動生成這個文本文件呢？我們可以在站點配置文件中這樣配置：

baidu_url_submit:
  count: 100 # 比如3诉瓦，代表提交最新的三個鏈接
  host: fqxyi.com # 在百度站長平臺中注冊的域名
  token: yourToken # 請注意這是您的秘鑰川队， 請不要發(fā)布在公眾倉庫里!
  path: baidu_urls.txt # 文本文檔的地址， 新鏈接會保存在此文本文檔里

因為自動生成的baidu_urls.txt文件是存放在public文件夾下面的睬澡，所以urlPath的值為public/baidu_urls.txt固额。

鏈接形式

1. hexo干貨系列：（六）hexo提交搜索引擎（百度+谷歌）
2. 在 Hexo 中創(chuàng)建匹配主題的404頁面
3. 為Hexo博客的每一篇文章自動追加版權信息
4. Hexo折騰記——性能優(yōu)化篇
5. Nginx配置404錯誤頁面轉向