Hexo博客搭建

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

另外還須要注意的是：

1. Hexo博客框架和nexT主題的搭建過程本文會直接引用官方教程，一筆略過；
2. 因爲我是在Mac上搭建Hexo博客的，全部一些命令在Windows的終端中可能找不到，請自行下載安裝。

下面進入正文：

一開始的時候我沒有註冊域名，靜態生成的文章都是放在GitHub上的，這裏先以這種狀況來講明：

GitHub建立與配置

建立GitHub帳號

Step1 Set up a personal account

首先在瀏覽器中輸入網址：https://github.com/join?source=header-home，而後填寫用戶名、郵箱、密碼，注意：該郵箱地址在以後的SSH配置中有重要做用，最後點擊Create an account按鈕，界面以下圖所示：

Step2 Choose your plan

默認選擇便可，直接點擊Continue按鈕，進入下一步進行郵箱驗證，界面以下圖所示：

Step3 Tailor your experinece

登陸本身設置的郵箱，點擊驗證郵箱之類的按鈕後會進入此處，若是在其左上角有Your email was verified.這樣的文案代表郵箱驗證成功。

配置GitHub相關信息

建立工程

如圖所示：

若是你從未使用過GitHub，能夠點擊Read the guide按鈕學習如何建立工程並使用。

若是你知道如何建立GitHub工程的話，那就簡單了，直接點擊Start a project按鈕就能夠開始工程的建立，固然也能夠從此處進入。依次填寫倉庫名、描述信息、初始化README文件，最後點擊Create repository按鈕，就成功建立一個工程了。可是由於該工程是提供給Hexo博客使用的，因此有如下幾個注意點：

1. 倉庫名必須爲name.github.io這樣的格式，須要注意的是：除了大小寫能夠不一樣以外，name必須和Github's Username如出一轍；還有聽說後面的io也能夠是com，這個我就不清楚了，有興趣的能夠嘗試一下。
2. 描述信息和是否初始化README文件徹底看我的興趣，可是個人建議是須要的，由於這樣能直截了當的明白這個工程是幹嗎用的。

例以下圖所示：

偏好設置

若是你熟悉GitHub，則能夠進行一些偏好設置，即個性化設置，如上傳頭像。這些都是很是簡單的，所示就不作闡述了。接着咱們開始配置SSH，這個是重點。

配置SSH

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

   $ ssh -T git@github.com

   若是輸出內容是Permission denied (publickey).，則代表咱們還沒有在GitHub中正確配置SSH；反之則代表配置成功，直接跳過這一部分便可。

2. 繼續輸入命令：

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

   切記必須修改命令中的郵箱地址，該郵箱地址即爲你註冊GitHub時所填寫的郵箱地址。輸入成功以後會依行出現以下圖所示提示：

   分別表示爲文件名、密碼和確認密碼，輸入正確後會給出重要的配置信息。

3. 繼續輸入命令：

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

   該命令中pub文件的文件名即爲上一步中設置的文件名，因爲該命令中包含pbcopy關鍵字，因此該命令能夠將pub文件中的內容直接複製到剪切板中，以防以後在網頁中配置SSH信息時發生沒必要要的錯誤。

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

   接着將pub文件中的內容粘貼到Key表示的文本框中，而後在Title表示的文本框中隨便命名一個名字，最後點擊Add SSH key按鈕便可添加SSH key。

5. 雖然已經成功添加了SSH key，可是這並不表明着SSH配置成功了，咱們繼續在終端輸入命令：

   $ ssh -T git@github.com

   若是輸出內容包含You've successfully authenticated, but GitHub does not provide shell access.則代表SSH配置成功；若是出現錯誤信息，能夠繼續輸入該命令：

   $ 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是一個免費且開源的分佈式版本控制系統，它被設計出來的目的是快速且高效的管理任何一個從小到很是大的工程。

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工具，它擁有簡單的本地分支，方便的分​​段區域和多個工做流的功能。

引用摘自Git官網

有興趣的話能夠看看：廖雪峯的Git經典入門教程

安裝與校驗

安裝Git的方式有不少種，咱們便可以從官網下載，也可使用其餘方式安裝，這裏咱們使用Homebrew來進行安裝。

1. 安裝Homebrew：打開終端以後，輸入下面命令便可：

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

2. 安裝Git：Homebrew安裝完成以後，繼續輸入命令就會自動下載最新的Git進行安裝：

   $ brew install git

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

   $ 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運行環境（支持的系統包括*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中建立的倉庫地址。
4. 在執行hexo deploy命令進行部署時，若出現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系統，下面是等會要用到的一些命令：

su：切換用戶
mkdir：建立目錄
touch：建立文件
echo：寫入指定內容到指定文件
cat：查看文件內容，用於驗證文件內容是否正確
chmod：設置文件或文件夾的權限

配置Nginx源配置文件

首先須要在/etc/yum.repos.d目錄下建立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目錄下建立配置文件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服務啓動成功

建立站點管理者

另外，爲了安全考慮，能夠在VPS上建立一個普通用戶(fqxyi)專門來管理網站的。

建立用戶組及用戶並校驗

[root@localhost /]# groupadd sitesManagers # 建立用戶組
[root@localhost /]# useradd fqxyi -m -g sitesManagers # 建立用戶
[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 # 新增這條指令
... // 省略一些代碼

建站測試

建立測試頁面

進入/var/www/fqxyi.com/public目錄，執行下列操做便可：

[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章節，而後請將你本身設置的.pub文件中的內容，從AAA開頭複製到最後，等到下一章節使用。

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

在網站管理者的家目錄配置.ssh公鑰，用於靜態文件本地與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文件，實現本地靜態文件發佈時自動同步到站點目錄。

初始化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目錄建立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}

博客初始化與編譯發佈

修改站點配置文件_config.yml

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

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

發佈到VPS服務器

使用MarkDwon編寫文章，並保存到suource/_posts文件夾下，而後使用下面的命令實現靜態生成和VPS部署。

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

MarkDown

Hexo博客是基於Markdown來進行編寫的，因爲相關的編輯器也有不少，因此這裏就不作太多闡述了，你們有興趣能夠去這裏看看。

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

不過我推薦的是馬克飛象和MWeb，二者不只能達到很好的實時預覽效果，還可以同步文章到印象筆記。

二者均可以體驗一段時間，若是以爲好的話，並且願意花75RMB/年，建議使用前者。不過我選擇了後者，雖而後者同步文章到印象筆記沒有前者那麼智能，可是有破解版。

下面是二者的界面效果：

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

FAQ

favicon不顯示

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

設置favicon也很簡單，只須要在主題配置文件_config.yml中，進行以下操做便可：

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

若是favicon的路徑設置正確，並且清除了緩存，刷新了頁面好幾回，但favicon仍然不顯示的話，能夠等待一段時間，再去刷新，可能就會顯示了！

404問題

現象：從首頁點擊某篇文章跳轉到了404頁面！

分析：既然出現了404頁面，那麼一定是路徑問題；仔細檢查路徑發現，原來是之前名爲mou.md的文件，如今變成了Mou.md。因此在github上路徑中文件夾的名字仍然是mou，而不是Mou。

解決：原本覺得只須要執行如下命令就能夠了：

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

後來發現本身仍是太年輕了，由於hexo clean的只是本地的文件，和github徹底沒有關係，以後想了半天也毫無頭緒，因而另闢蹊徑：將Mou.md文件再重命名一下，如Mou2.md，執行上述命令以後，再重命名回Mou.md，再執行上述命令就能夠了。😄

總結：當我在重命名md文件時，切忌不可只是進行了大小寫轉換，由於像這樣把文章部署到github上以後，文件名對應的文件夾是不會發生變化的！！！

乾貨

最後附上一些乾貨，方便你們查找使用，包含谷歌百度收錄問題、版權信息追加等

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能夠從百度站長平臺主頁-網頁抓取-連接提交-自動提交-主動推送(實時)處得知，此外你還能夠發現其餘的推送方式，如：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 # 請注意這是您的祕鑰， 請不要發佈在公衆倉庫裏!
  path: baidu_urls.txt # 文本文檔的地址， 新連接會保存在此文本文檔裏

由於自動生成的baidu_urls.txt文件是存放在public文件夾下面的，因此urlPath的值爲public/baidu_urls.txt。

連接形式

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