hexo+git搭建個人博客

前言

喜歡寫 Blog 的人，會經歷三個階段。

第一階段，剛接觸 Blog，覺得很新鮮，試着選擇一個免費空間來寫。
第二階段，發現免費空間限制太多，就自己購買域名和空間，搭建獨立博客。
第三階段，覺得獨立博客的管理太麻煩，最好在保留控制權的前提下，讓別人來管，自己只負責寫文章。

這是阮一峯在博客中寫到的關於 Blog 的想法，而這裏的第三階段的實現就是利用 GitHub Pages 搭建博客。

使用 GitHub Pages 功能搭建博客的好處有：

• 免費，GitHub 提供無限流量。
• 都是靜態文件，世界各地都有理想的訪問速度。(訪問速度可以進一步優化)
• 擁有絕對的管理權，又享受 Git 的版本管理功能，不用擔心文章遺失。

Hexo 是基於 Node.js 的一款靜態博客框架，如果想要搭建博客，不想自己寫頁面的話可以考慮用 Hexo，其中有很多的簡潔主題可供選擇，同時 Hexo 支持 Markdown 語法，編輯文章更加方便，快捷。

注：此篇分享還以 Mac 爲例哈

環境配置

Hexo 文檔有對 Hexo 安裝及使用的詳細介紹，推薦閱讀。這裏我主要寫自己安裝的步驟、踩過的坑以及一些優化的方法。

在正式安裝 Hexo 之前，我們需要確認電腦中是否已安裝下列應用程序:

• Node.js
• Git

當然，我們還需要 GitHub 賬號，如果沒有請註冊。
註冊之後記得一定要前往郵箱確認註冊，否則無法使用 GitHub Pages。

安裝 Hexo

所有必備的應用程序安裝完成後，即可使用 npm 安裝 Hexo。終端輸入如下命令:

sudo npm install -g hexo-cli

輸入管理員密碼( Mac 登錄密碼)即開始安裝。

這裏有個小坑：Hexo 官網上的安裝命令是npm install -g hexo-cli，安裝時不要忘記前面加上sudo，否則會因爲權限問題報錯。

初始化

使用終端cd到一個您指定的目錄，執行以下命令(命令中的blog是您將要建立的文件夾的名稱)：

hexo init blog

使用終端cd到blog文件夾下，執行以下命令，安裝npm：

npm install

好了，現在可以試試看是否已經初始化成功，執行如下命令，開啓本地 Hexo 服務器：

hexo s

此時，瀏覽器中打開網址(默認是4000端口) http://localhost:4000 ，能看到如下頁面：

這裏我踩了個不算坑的坑，終端輸入hexo s後沒有成功，我也在網上搜到了很多解決辦法，但是都沒有奏效，後來我嘗試改了下端口就成功了，也就是說默認的4000端口無法連接。如果您的情況跟我一樣，嘗試了網上的很多解決辦法之後依然無效，那您也許可以嘗試輸入命令hexo s -p 5000改一下端口試試看。

關聯 GitHub

創建倉庫

1. 登錄您的 GitHub 賬號，新建名稱爲您的用戶名.github.io的倉庫。假設我的 GitHub 賬號的用戶名是 luxun，那麼我就應該新建名稱爲luxun.github.io的倉庫。
2. Description可寫可不寫，隨意。
3. 勾上Initialize this repository with a README。
4. 點擊Create Repository完成創建。

開啓 GitHub Pages

點擊Settings，你將會打開這個庫的 Settings 頁面，向下拖動，直到看見 GitHub Pages，如圖：

修改全局配置文件

Hexo 官方文檔中有對全局配置的詳細說明，推薦閱讀。

小坑提醒，修改本地所有的配置文件時，注意所有的冒號:後邊都要加一個空格，否則執行 Hexo 命令時會報錯，一定注意。

找到本地blog文件夾下_config.yml，打開後滑到最後，修改成下邊的樣子：

deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: master

您需要將repository後的所有xxx換成你自己的用戶名，或者也可以在下圖位置獲取：

然後，您需要爲自己配置身份信息，終端輸入yourname和youremail換成您自己的 GitHub 用戶名和郵箱)：

git config --global user.name "yourname"
git config --global user.email "youremail"

終端cd到blog文件夾下執行生成靜態頁面命令：

hexo g

此時若出現如下報錯：

ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

嘗試執行命令：

npm install hexo --save

若無報錯，自行忽略此步驟。

然後在當前目錄下，終端輸入：

hexo d

這裏踩了個坑，如果您執行命令hexo d仍然報錯：無法連接 git 或找不到 git，則執行如下命令來安裝hexo-deployer-git：

npm install hexo-deployer-git --save

完成安裝之後，再次執行hexo g和hexo d命令。

隨後按照提示，分別輸入自己的 GitHub 用戶名和密碼，開始上傳。

完成上傳之後，通過http://xxx.github.io/ (xxx換成您自己的倉庫名，也就是用戶名)來訪問自己剛剛上傳的網站。

• 爲避免每次輸入 GitHub 用戶名和密碼的麻煩，可參照後文 優化(個性化設置) 添加ssh key 到 GitHub進行優化

常用指令和發佈文章

• 常用指令

hexo new "postName"        //新建文章
hexo new page "pageName"        //新建頁面
hexo g          //生成靜態頁面至public目錄
hexo server         //開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy         //將.deploy目錄部署到GitHub

• 常用組合

hexo clean
hexo g
hexo d
hexo d -g #生成部署
hexo s -g #生成預覽

• 發佈文章

終端cd到blog文件夾下，執行如下命令新建文章：

hexo new "xxx"

名爲xxx.md的文件會建在目錄.../blog/source/_posts下。

所有的文章都會以md形式保存在_post文件夾中，只要在_post文件夾中新建md類型的文檔，就能在執行hexo g的時候被渲染。新建的文章頭需要添加一些信息，如下所示：

---
title: xxx    //在此處添加你的標題。
date: 2016-10-07 13:38:49   //在此處輸入編輯這篇文章的時間。
tags: xxx    //在此處輸入這篇文章的標籤。
categories: xxx    //在此處輸入這篇文章的分類。
---

文章編輯完成後，終端cd到blog文件夾下，依次執行如下命令來發布：

hexo g
hexo d

至此，Mac 上搭建基於 GitHub Pages + Hexo 的博客就完成了。

下面的內容是介紹安裝 Themes 、個性化設置以及優化。

設置 Themes

如果您喜歡 Hexo 默認的主題的話，可以跳過這部分。如果您想換一個主題的話，可以到Hexo 主題挑選自己中意的主題。

這裏以nexT 主題爲例。

終端cd到blog目錄下執行如下命令(這是目前的穩定版本，不是最新版。最新版有一些新特性，但是可能會不穩定，所以這裏推薦選擇安裝穩定版)：

git clone --branch v5.1.2 https://github.com/iissnan/hexo-theme-next themes/next

如果想嘗試最新版，請執行如下命令：

git clone https://github.com/iissnan/hexo-theme-next themes/next

打開blog目錄下的_config.yml，找到theme: landscape修改爲theme: next。

終端cd到blog目錄下，依次執行如下命令(每次部署文章的步驟)：

hexo clean

hexo g

hexo d

至於更改博客的名稱、描述、頭像等，只需要修改blog/_config.yml文件和blog/themes/next/_config.yml文件中對應的屬性名稱即可(不要忘記冒號:後加空格)。

• 更多設置NexT 使用文檔裏有極詳細的介紹，推薦閱讀。

個性化設置

• 首先參照NexT 官方文檔進行個性化設置，之後再看下文。

爲博客加上 GitHub 絲帶

這裏以 Next 主題爲例(其他主題也差不多)，添加 GitHub 絲帶：在blog\themes\next\layout\_layout.swig中加入相關代碼，記得修改自己的鏈接。

添加 README.md

每個項目倉庫下一般都有一個 README.md 文件，但是使用 hexo 部署到倉庫後，項目倉庫中是沒有 README.md 文件的。

在 blog 目錄下的 source 目錄下添加一個 README.md 文件，修改站點配置文件 _config.yml，將 skip_render 參數的值設置爲 README.md。

skip_render: README.md

保存退出即可。

爲博客添加 LICENSE

在主題配置文件中添加下面這段代碼(添加之前先看看您的主題配置文件是否已經包含這段代碼，已經包含就不用添加了，因爲重複會報錯)，LICENSE 會顯示在側邊欄。

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:

修改文章底部的帶 # 號的標籤

如果您覺得#不好看，想改成圖標，那麼請按照下面修改。
打開/themes/next/layout/_macro/post.swig，搜索(組合鍵command+f)rel="tag">#，將#換成<i class="fa fa-tag"></i>。

將閱讀量改爲熱度

很多人將文章標題下的 閱讀次數 改爲了 熱度，如果您喜歡的話可以這樣修改。

打開blog/themes/next/languages/zh-Hans文件，查找閱讀次數這幾個字，可以看到，在post中的visitors被定義爲閱讀次數，把這裏的閱讀次數改爲熱度：

visitors: 熱度

那麼怎麼在頁面中顯示呢？打開Next主題文件夾中blog/themes/next/layout/_macro/post.swig，在這個文件里加上攝氏度的標誌，在<span class="leancloud-visitors-count"></span>下面增加一行<span>℃</span>即可：

<span class="leancloud-visitors-count"></span>
<span>℃</span>

博文置頂

• 修改 hexo-generator-index 插件

替換文件blog/node_modules/hexo-generator-index/lib/generator.js 內的代碼爲：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 兩篇文章top都有定義
            if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
            else return b.top - a.top; // 否則按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是隻有一篇文章top有定義，那麼將有top的排在前面（這裏用異或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

• 設置文章置頂

在文章 Front-matter 中添加 top 值，數值越大文章越靠前，如：

---
title: xxx
date: 2015-04-02 14:36:04
categories: xxx
tags: xxx
top: 10
---

NexT 首頁文章 加載更多 設置

這裏只說一個方法：編輯文章時，在您希望顯示 加載更多 按鈕的地方，加上<!--more-->：

首頁分割線

在 \themes\next\source\css\_custom\custom.styl 文件中添加以下代碼，可以修改博客首頁中每篇文章的分割線樣式，width是長度，height是寬度。

//index頁面中每篇文章相隔的那條線
.posts-expand {
  .post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 100%;
    height: 3px;
    background: $grey-light;
    text-align: center;
  }
}

小圖標設置

博客中一切小圖標都可以在fontawesome 圖標庫自行搜索(qq、微博、微信等圖標是有的，但知乎、豆瓣等圖標目前還沒有)。

• 修改網頁底部的桃心圖標
  打開blog/themes/next/layout/_partials/footer.swig，找到這段代碼進行修改(還是在fontawesome 圖標庫找自己喜歡的圖標)：

<span class="with-love">
  <i class="fa fa-share-alt"></i>
</span>

設置網站的圖標Favicon

準備一張 icon 圖標文件，放在 source 目錄下就可以了，在主題配置文件中找到 favicon 的設置：

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

主頁文章添加陰影效果

具體實現方法

打開blog\themes\next\source\css\_custom\custom.styl文件，添加以下代碼：

//主頁文章添加陰影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

隱藏網頁底部 powered By Hexo / 強力驅動

打開blog/themes/next/layout/_partials/footer.swig，使用<!-- -->隱藏符號之間的代碼即可，或者直接將這段代碼刪除。位置如圖：

添加 SSH key 到 GitHub

• 檢查 SSH keys 是否已經存在

終端執行如下命令，檢查SSH keys是否存在。

ls ~/.ssh

如果顯示如下信息(下面是我個人的顯示，也許您跟我顯示的不一樣，但重點是隻要有id_rsa和id_rsa.pub)，就說明 SSH keys 已經存在了：

id_rsa	   id_rsa.pub	  known_hosts

如果存在，則直接跳過下一個步驟進入將 SSH key 添加到 GitHub 中，否則請繼續下一步驟 生成新的 SSH key。

• 生成新的 SSH key

終端執行如下命令生成新的 SSH key，注意將[email protected]換成你自己註冊 GitHub 的郵箱地址。

ssh-keygen -t rsa -C "[email protected]"

默認會在相應路徑~/.ssh下生成id_rsa和id_rsa.pub兩個文件。

1.3.將 SSH key 添加到 GitHub 中

終端依次輸入：

cd ~/.ssh
cat id_rsa.pub

複製所有顯示的內容

進入GitHub –> Settings –> SSH and GPG keys –> NEW SSH key，如下圖所示：

Title 裏任意添一個標題，將複製的內容粘貼到 Key 裏，點擊下方 Add SSH key 綠色按鈕即可，如下圖所示：

綁定獨立域名

• 首先，需要註冊一個域名。可以選擇GoDaddy或萬網中的任意一家。
• 然後，我們需要配置一下域名解析。推薦使用DNSPod的服務，免費穩定，解析速度也比較快。在域名註冊商處(Godaddy 或萬網)修改 NS 服務器地址爲：

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

域名解析詳細的步驟這裏我就不寫了，給個圖：

圖中設置國內國外的原因是想讓博客加載速度更快，方法請閱讀後文 將個人博客同時部署到 GitHub 和 Coding。

• 如果將域名指向另一個域名，實現與被指向域名相同的訪問效果，需要增加 CNAME 記錄。

進入 blog/source 目錄下，添加並打開 CNAME 文件，輸入您的域名，重新上傳您的博客。

在 GitHub 中打開您自己的博客倉庫，進入庫的 Settings 界面，如果看到了如下提示，說明配置成功了。

在這一系列的操作中，修改 NS 服務器、設置解析等等，都需要一定的時間。短則10分鐘，長則24小時，最長不會超過72小時。如果超過72小時，請檢查自己的配置過程，或者修改自己本地的 DNS 服務器。

優化

將個人博客同時部署到 GitHub 和 Coding

Coding 可以理解爲國內的 GitHub。通過將博客同時部署到 GitHub 和 Coding，可以提升博客的加載速度。

這裏有個提醒，Coding 會強制用戶在網站上掛推廣圖標，通過 Coding 加載博客還會有5s廣告，如果覺得這樣不好，可以選擇放棄部署在 Coding 上。還有一個選擇，就是花錢成爲 Coding 的會員，這樣上述的問題就都沒有了。

• 首先到Coding註冊。創建倉庫跟 GitHub 上創建倉庫的要求一樣。
• 打開本地 blog 目錄下的 _config.yml 文件，滑到最下面，修改如下(xxx換成自己的用戶名)：

deploy:
  type: git
  repository:
    github: https://github.com/xxx/xxx.github.io.git
    coding: https://git.coding.net/xxx/xxx.git
  branch: master

• 然後執行命令hexo clean hexo g hexo d
• 個人域名添加兩條 CNAME 解析。將 GitHub 的地址 解析爲 國外 ，將 Coding 的地址 解析爲 國內 ：

• 如果您有個人域名的話，到 Coding 博客倉庫的 Pages 服務 界面，添加域名綁定，輸入個人域名就 OK 了，可能需要耐心等待幾分鐘。

這樣就可以實現從國內訪問就通過 Coding 加載博客項目，從國外訪問就通過 GitHub 加載博客項目，從而提升加載博客的速度。

壓縮代碼

壓縮代碼也是一個優化加載速度的方法。

目前知道的有兩個插件可以壓縮博文，hexo-all-minifier 插件和 gulp 插件。hexo-all-minifier 使用比較簡單，也可以壓縮圖片，不過對文章縮進不支持。如果您對文章縮進有要求，可以暫時使用 gulp 壓縮手段。

• hexo-all-minifier 使用方法

安裝 hexo-all-minifier，在站點的根目錄下執行以下命令：

npm install hexo-all-minifier --save

hexo g編譯的時候就會自動壓縮 HTML、JS、圖片。詳情參考插件介紹 hexo-all-minifier。

• glup 使用方法

Hexo 依賴 gulp 插件安裝，在站點的根目錄下執行以下命令：

npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

在blog目錄下，新建 gulpfile.js 並填入以下內容：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 壓縮 public 目錄 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 壓縮 public 目錄 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 壓縮 public/js 目錄 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 執行 gulp 命令時執行的任務
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

生成博文時執行 hexo g && gulp 就會根據 gulpfile.js 中的配置，對 public 目錄中的靜態資源文件進行壓縮。

SEO(搜索引擎優化)

網站驗證

• Google 提交入口
• 百度提交入口

驗證方式有幾種，推薦最簡單的兩種：文件驗證和 CNAME 驗證。

• 文件驗證

1. 登錄百度站長選擇添加網站，使用方式爲文件驗證
2. 將下載的文件放到source文件下
3. 由於 hexo 自動會對 html 文件進行渲染，所以在站點配置文件中找到skip_render:
4. 在後面添加文件名字，若有多個用這樣的形式[xxx.html, xxx.html]，比如： skip_render: [googleff0226f76d5f451b.html, baidu_verify_vHC5EAW09E.html]
5. 重新渲染文件： hexo clean hexo d -g
6. 點擊站長的驗證按鈕，完成驗證。

• CNAME 驗證

1. 去站長添加網站選擇 CNAME 驗證
2. 把地址解析到zz.baidu.com
3. 完成驗證

添加並提交sitemap

安裝 Hexo 的 sitemap 網站地圖生成插件，終端cd到blog：

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在站點配置文件中任意位置添加如下代碼，但要看清您的 Hexo 版本。

如果您的 Hexo 版本是 2.x.x

sitemap:
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

如果您的 Hexo 版本是 3.x.x

sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

配置成功後，會生成sitemap.xml和baidusitemap.xml，前者適合提交給谷歌搜素引擎，後者適合提交百度搜索引擎。

百度 sitemap 提交如圖，Google 也是一樣的：

驗證成功之後就可以開始推送了。Google 的收錄比較快，通常第二天就能搜得到，百度就比較慢了。

主動推送

安裝主動推送插件，終端cd到blog：

npm install hexo-baidu-url-submit --save

在根目錄下，把以下內容配置到站點配置文件中:

baidu_url_submit:
  count: 3     ## 比如3，代表提交最新的三個鏈接
  host: xxx     ## 在百度站長平臺中註冊的域名
  token: xxx       ## 請注意這是您的祕鑰，請不要發佈在公衆倉庫裏!
  path: baidu_urls.txt       ## 文本文檔的地址，新鏈接會保存在此文本文檔裏

至於上面提到的token可在百度站長如下位置找到：

其次，記得查看站點配置文件中的url，必須包含站長平臺註冊的域名，比如:

url: http://harleywang93.com
root: /
permalink: :year/:month/:day/:title/

接下來添加一個新的 deploy 類型：

deploy:
- type: baidu_url_submitter
- type: git
  repository:
    github: https://github.com/xxx/xxx.github.io.git
    coding: https://git.coding.net/xxx/xxx.git
  branch: master

執行hexo d的時候，新的鏈接就會被推送了。原理：

• 新鏈接的產生，hexo g會產生一個文本文件，裏面包含最新的鏈接。
• 新鏈接的提交，hexo d會從上述文件中讀取鏈接，提交至百度搜索引擎。

自動推送

把 NexT 主題配置文件中的baidu_push:設置爲true，就可以了。

添加蜘蛛協議

在blog/source/目錄下新建一個robots.txt文件，添加下面的一段代碼(可根據自己的需要修改)：

#hexo robots.txt
User-agent: *

Allow: /
Allow: /archives/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://xxx/sitemap.xml
Sitemap: http://xxx/baidusitemap.xml

然後到站長(這裏以百度爲例，Google 一樣)更新一下，就像這樣：

感謝

自己搭建博客時，很是折騰了一番，也學習到了很多知識，閱讀了很多相關的博文，在此向相關博文的作者表示感謝，謝謝你們的文章讓我進步。同時，我看到有很多人想擁有自己的博客或者優化自己的博客，期間可能會遇到很多問題，我也是這麼一個坑一個坑踩過來的，所以我就寫了這麼一篇自己折騰博客的分享，希望可以在幫助自己的同時幫助到別人。(如果踩了新坑的話，一定會更新的。)

• 目前已經棄掉了此方法寫博客，因爲想回到迴歸初心，寫博客最初的目的 - 總結梳理知識以及分享一些感受，不在乎形式。( 其實是因爲懶得折騰了，Hexo 有一些不穩定性，所以目前棄掉了，喜歡折騰的可以繼續嘗試 lol )

希望大家也能有此感受。