IT之家學院：使用Hexo搭建獨立博客並託管到Github和Coding上

前言

這是一篇很詳細的獨立博客搭建教程，意在幫助之家dalao們能快速入門，擁有自己的獨立博客。

為什麼用Hexo搭建獨立博客？

Hexo是一個快速、簡潔且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

Github和Coding又是什麼？

Github是國外免費的Git代碼託管平台。利用Github Page服務可以免費創建一個靜態網站。

Coding則是國內Git代碼託管平台，國內首個Git代碼託管平台GitCafe已被Coding收購，也提供page服務。

為什麼用兩個代碼託管平台？

很多人都把hexo託管到Github上，因為Github大家都用的比較久了。但是，你的博客主要訪問者肯定還是國內的用戶，國內的用戶訪問Coding比Github是要快不少的。還可以利用域名解析實現國內的走Coding，海外的走Github，分流網站的訪問。

步驟

安裝Git

Git是什麼？

Git是目前世界上最先進的分布式版本控制系統（沒有之一）。

下載後按默認選項安裝即可。

安裝完成後，在開始菜單里找到「Git」->「Git Bash」，蹦出一個類似命令行窗口的東西，就說明Git安裝成功！

因為Git是分布式版本控制系統，所以，每個機器都必須自報家門：你的名字和Email地址。

注意git config命令的–global參數，用了這個參數，表示你這台機器上所有的Git倉庫都會使用這個配置，當然也可以對某個倉庫指定不同的用戶名和Email地址。

安裝Node.js

Windows安裝

直接進入Node.js官網打開Downloads選項卡，

再點擊Windows Installer下載,默認安裝就行。

Linux安裝

先去官網下載最新安裝包

wget https://nodejs.org/dist/v6.10.3/node-v6.10.3-linux-x64.tar.xz

使用解壓命令

xz -d node-v6.10.3-linux-x64.tar.xz

tar -xvf node-v6.10.3-linux-x64.tar

或者

tar -xvJf node-v6.10.3-linux-x64.tar.xz

文件就被解壓到當前文件夾下了

mv node-v6.10.3-linux-x64 node-v6.10.3

mv node-v6.10.3 /usr/local/node

配置環境變數

#編輯/etc/profile (使用vim)

vim /etc/profile#在底部添加PATH變數

export

PATH=$PATH:/usr/local/node/bin

#保存退出，先按esc鍵，再按`shift`+`:wq`

#最後保存並使其生效即可

source /etc/profile

安裝Hexo

打開Git-bash，輸入

npm install -g hexo-cli

即可完成Hexo的安裝。

安裝插件（可選）

npm install hexo-generator-index --save

npm install hexo-generator-archive --save

npm install hexo-generator-category --save

npm install hexo-generator-tag --save

npm install hexo-server --save

npm install hexo-deployer-git --save

npm install hexo-deployer-heroku --save

npm install hexo-deployer-rsync --save

npm install hexo-deployer-openshift --save

npm install hexo-renderer-marked --save

npm install hexo-renderer-stylus --save

npm install hexo-generator-feed --save

npm install hexo-generator-sitemap --save

本地部署Hexo

在電腦磁碟新建一個存放博客目錄的文件夾，例如：blog，

進入到blog文件夾,點空白處右擊滑鼠，打開Git-Bash右擊，

輸入hexo init然後npm install,該文件夾有如下目錄，就安裝成功！

├──_config.yml //網站的配置信息，你可以在此配置大部分的參數。

├──package.json

├──scaffolds //模板文件夾。當你新建文章時，Hexo會根據scaffold來建立文件。

├──source //存放用戶資源的地方

|├──_drafts

|└──_posts

└──themes //存放網站的主題。Hexo會根據主題來生成靜態頁面。

輸入hexo s啟動博客

$ hexo s

INFO Start processing

INFO Hexo is running athttp://localhost:4000/. Press Ctrl+C to stop.

打開瀏覽器輸入http://localhost:4000/即可訪問

將博客託管到Github和Coding上

託管到github

註冊github帳號

訪問官網註冊，你的username和郵箱十分重要，GitHub上很多通知都是通過郵箱的。比如你的主頁上傳並構建成功會通過郵箱通知，更重要的是，如果構建失敗的話也會在郵件中說明原因。

創建項目倉庫

註冊並登陸Github官網成功後，點擊頁面右上角的+，選擇New repository。

在Repository name中填寫Github賬號名.github.io，

點擊Create repository，完成創建。

託管到coding

註冊coding帳號

訪問官網註冊並登錄，

創建倉庫

點+創建項目，

填寫項目名稱描述創建即可。

配置SSH

配置SSH Key是讓本地Git項目與遠程的github建立聯繫，

檢查是否已經有SSH Key，打開Git Bash，輸入：

cd ~/.ssh11

如果沒有.ssh這個目錄，則生成一個新的SSH，輸入：

ssh-keygen -t rsa -C「your e-mail」

注意1：此處的郵箱地址，你可以輸入自己的郵箱地址；注意2：此處的「-C」的是大寫的「C」

接下來幾步都直接按回車鍵,然後系統會要你輸入密碼，

Enter passphrase (empty for no passphrase):

Enter same passphrase again:

這個密碼會在你提交項目時使用，如果為空的話提交項目時則不用輸入。這個設置是防止別人往你的項目里提交內容。

注意：輸入密碼的時候沒有*字樣的，你直接輸入就可以了。

最後看到這樣的界面，就成功設置ssh key了。

添加SSH Key到GitHub和Coding

打開Git Bash，然後輸入：

cd ~/.ssh11

進入到.shh文件夾中再輸入ls，查看是否有id_rsa.pub文件，

再滑鼠全選中右擊複製，

再配置到GitHub和Coding的SSH中，

進入Github官網，點擊+旁邊的頭像，再按settings進入設置，

在點擊New SSH key創建，

Title輸入郵箱，Key裡面粘貼剛才右擊複製的內容,再點Add SSH key，

同樣進入Coding,點擊賬戶，在點SSH公鑰設置即可。

測試SSH是否配置成功

打開Git Bash，然後輸入

ssh -T git@github.com11

如配置了密碼則要輸入密碼，輸完按回車

如果顯示以下內容，則說明Github中的ssh配置成功。

Hi username! You』ve successfully authenticated, but GitHub does notprovide shell access.

再輸入：

ssh -T git@git.coding.net

如果顯示以下則說明coding中的ssh配置成功：

Hello username You』ve connected to Coding.net by SSH successfully!

創建Github Pages和Coding Pages服務

GitHub Pages分兩種，一種是你的GitHub用戶名建立的username.github.io這樣的用戶&組織頁（站），另一種是依附項目的pages。想建立個人博客是用的第一種，形如cnfeat.github.io這樣的可訪問的站，每個用戶名下面只能建立一個。

官網點擊代碼再點擊Coding Pages服務開啟。分支和github分支寫一樣，填寫master，

將博客網站上傳到GitHub和Coding中

打開D:log文件夾中的_config.yml文件，找到如下位置，填寫：

# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:

type: git

repo:

github: git@github.com:yourname/yourname.github.io.git,master

coding: git@git.coding.net:yourname/yourname.git,master

註：(1)其中yourname替換成你的Github賬戶名；(2)注意在yml文件中，:後面都是要帶空格的。

再更改一下_config.yml文件，其中的url和root屬性。

url:

root: /blog

root下面應該設置成/你的項目名而不是/

然後重新部署一下。

在blog文件夾中空白處右擊打開Git Bash輸入

hexo g #生成靜態網頁npm install hexo-deployer-git–save hexo d #開始部署

此時，通過訪問http://yourname.github.io和http://yourname.coding.me可以看到默認的Hexo首頁面（與之前本地測試時一樣）。

更換Hexo主題

我使用的是Next主題。該主題簡潔易用，在移動端也表現不錯。

下載主題

在blog文件夾中空白處右擊打開Git Bash輸入：

git clone https://github.com/xirong/hexo-theme-next.gitthemes/next

或者建議使用使用國內的倉庫

git clone https://git.coding.net/tianyu211/next.gitthemes/next

修改網站的主題為Next

打開D:log下的_config.yml文件，找到theme欄位，將其修改為next：

# Extensions

## Plugins: http://hexo.io/plugins/

## Themes: http://hexo.io/themes/

theme: next

驗證主題是否可用

輸入hexo s #啟動服務，調試用，

再在瀏覽器輸入http://localhost:4000/確認網站主題是否切換為Next。

博客blog根目錄下的_config.yml配置網站信息

_config.yml配置請點參考

Hexo博客nexT主題優化

閱讀全文按鈕

編輯主題配置_config.yml：

auto_excerpt:

enable: false

length: 150（可自行設置）

把enable設置為true之後，每篇文章都會在第150個字元處截斷。

搜索界面

執行代碼：

npm install hexo-generator-search --save

然後編輯hexo的_config.yml：

search:

path: search.xml

field: post

相冊界面

執行hexo new page「photos」,然後在hexo/source文件夾下能夠找到photos文件夾，進入文件夾，編輯index.md文件，添加欄位：

type: photos

然後編輯主題配置_config.yml，在menu選項中添加photos項：

menu:

home: /

categories: /categories

about: /about

#archives: /archives

tags: /tags

#commonweal: /404.html

photos: /photos

進入hexo/themes/next/languanges文件夾，編輯zh-Hans.yml文件，在menu菜單里添加photos對應的中文名稱，修改如下：

menu:

home:首頁

archives:歸檔

categories:分類

tags:標籤

about:關於

search:搜索

commonweal:公益404

photos:相冊

然後為相冊頁在菜單下的鏈接添加圖標，在Fontawesome中找到自己喜歡的圖標，記錄名稱，在編輯主題配置config.yml,在menu_icons欄位中增加一行photos:：

menu_icons:

enable: true

#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome

home: home

about: user

categories: th

tags: tags

archives: archive

commonweal: heartbeat

photos: photo

然後在hexo/source/photos/index.md中，增加代碼：

{% raw %}

{% endraw %}

* !(URL)

* !(URL)

{% raw %}

{% endraw %}

把其中的URL換成要展示的圖片的地址，本地或者外鏈都可以。

重新編譯，生成。

文章添加閱讀次數

關於Hexo的文章閱讀量設置問題，大多數人都是使用不蒜子的代碼實現。但是這個方法僅局限於在文章頁面顯示閱讀數，首頁是不顯示的。所以我推薦使用leanCloud管理閱讀量數據。

在Hexo 5.0版本以後，已經自帶可以直接開啟文章閱讀量統計：

進入leanCloud官網註冊個賬號，可以不用手機號，只用郵箱激活，然後點擊頭像進入控制台，

創建一個應用，命名為Counter，

點擊應用右上角的齒輪，進入應用設置界面，點擊存儲創建一個Class命名為Counter，設置許可權為無限制，

創建完畢後點擊應用的設置，找到應用Key，複製下來App ID和App Key，

打開next根目錄下的_config.yml配置文件找到leancloud_visitors欄位，把你上一步的AppID和AppKey粘貼過來，看起來大概像這樣：

leancloud_visitors:

enable: true

app_id: 40LJ62BsvIsNX0gRT8Lf0cuR-gzGzoHsz

app_key: SJ7F5qRaBjcYv8yHhex3pHcv

重新編譯部署hexo clean、hexo g -d

添加Fork me on Github

去網址https://github.com/blog/273-github-ribbons挑選自己喜歡的樣式，並複製代碼，添加到themes
extlayout_layout.swig的body標籤之內即可，

記得把裡面的url換成自己的!

底部Powered by的版權修改

用Next主題搭建起來的博客，在底部會有這樣的Powered by版權聲明：

修改方法

首先，找到 hemes
extlayout\_partials下面的footer.swig文件，打開：

圖中每個框都是一個模塊，隨便你想修改還是刪除，都可以，

除了這裡，還有 hemes
extlanguages這個文件夾中，根據你的語言選擇對應文件，我是中文zh-Hans.yml，可以看到如下圖：

上文中的footer.theme等等就是調用這裡的值，要修改或者刪除，就看你心情了。

▼修改後的樣式

綁定自己的域名

域名解析

如果你選擇的是萬網註冊的域名，可以使用其自帶的域名解析服務。

也可以選擇免費的DNSPod。

打開blog文件夾下的source文件夾，新建CNAME文件,內容填寫自己的域名，

CNAME文件設置的目的是，通過訪問yourname.github.io可以跳轉到你所註冊的域名上。

Coding是直接在項目主頁設置的，Github是在裡面加CNAME文件。然後去dns服務提供商哪裡添加CNAME。

搭建完成的博客示例

博客地址：GTianYu" blog

想看到更多這類內容？去APP商店搜IT之家，天天都有小歡喜。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！