超詳細Hexo+Github Page搭建技術博客教程【持續更新】

前言

博客有第三方平臺，也能夠自建，比較早的有博客園、CSDN，近幾年新興的也比較多諸如：WordPress、segmentFault、簡書、掘金、知乎專欄、Github Page 等等。

此次我要說的就是 Github Page + Hexo 搭建我的博客的方式！Github Page 是 Github 提供的一種免費的靜態網頁託管服務（因此想一想免費的空間不用也挺浪費的哈哈哈），能夠用來託管博客、項目官網等靜態網頁。支持 Jekyll、Hugo、Hexo 編譯靜態資源，此次咱們的主角就是 Hexo 了，具體的內容下面在文章內介紹。

下面就開始吧~

準備環境

準備 node 和 git 環境， 首先，安裝 NodeJS，由於 Hexo 是基於 Node.js 驅動的一款博客框架，相比起前面提到過的 Jekyll 框架更快更簡潔，由於天*朝網絡被牆的緣由嘗試過安裝 Jekyll 失敗而放棄了。 而後，安裝 git，一個分佈式版本控制系統，用於項目的版本控制管理，做者是 Linux 之父。若是 Git 還不熟悉能夠參考廖雪峯大神的 Git 教程。

兩個工具不一樣的平臺安裝方法有所不同，可自行了解按步驟安裝，這裏不詳述了。安裝成功後打開git bash（Windowns）或者終端（Mac），下方中將統一稱爲命令行。 在命令行中輸入相應命令驗證是否成功，若是成功會有相應的版本號。

git version
node -v
npm -v
複製代碼

安裝 Hexo

若是以上環境準備好了就可使用 npm 開始安裝 Hexo 了。也可查看 Hexo 的詳細文檔。 在命令行輸入執行如下命令：

npm install -g hexo-cli
複製代碼

安裝 Hexo 完成後，再執行下列命令，Hexo 將會在指定文件夾中新建所須要的文件。

hexo init myBlog
cd myBlog
npm install
複製代碼

新建完成後，指定文件夾的目錄以下：

.
├── _config.yml # 網站的配置信息，您能夠在此配置大部分的參數。 
├── package.json
├── scaffolds # 模版文件夾
├── source  # 資源文件夾，除 _posts 文件，其餘如下劃線_開頭的文件或者文件夾不會被編譯打包到public文件夾
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主題文件夾
複製代碼

好了，若是上面的命令都沒報錯的話，就恭喜了，運行 hexo s 命令，其中 s 是 server 的縮寫，在瀏覽器中輸入 http://localhost:4000 回車就能夠預覽效果了。

hexo s
複製代碼

如下是我本地的預覽效果，更換了 next 主題的，默認不是這個主題。

至此，你本地的博客就已經搭建成功，接下來就是部署到 Github Page 了。

註冊 Github

首先若是你尚未 Github 帳號的先註冊一個，具體過程以下

點擊 Start project 或者下面的 new repository 建立一個新的倉庫

注意點來了，Github 僅能使用一個同名倉庫的代碼託管一個靜態站點，這個網上不少教程沒說到的。

而後打開倉庫建立一個 index.html 文件，並隨意先寫點內容，好比 Hello World.

這個時候打開 http://你的用戶名.github.io 就能夠看到你的站點啦，是否是很簡單！index.html 內容只是暫時的預覽效果，後面把 Hexo 的文件部署上去就能夠在 http://你的用戶名.github.io 看到你本身的博客啦！ 好比個人就是 webw3c.github.io 了。

配置 SSH key

要使用 git 工具首先要配置一下SSH key，爲部署本地博客到 Github 作準備。

打開命令行輸入 cd ~/.ssh 若是沒報錯或者提示什麼的說明就是之前生成過的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是能夠查看本機上的 SSH key 了。

cat ~/.ssh/id_rsa.pub
複製代碼

若是以前沒有建立，則執行如下命令全局配置一下本地帳戶：

git config --global user.name "用戶名"
git config --global user.email "郵箱地址"
複製代碼

而後開始生成密鑰 SSH key

ssh-keygen -t rsa -C '上面的郵箱'
複製代碼

按照提示完成三次回車，便可生成 ssh key。經過查看 ~/.ssh/id_rsa.pub 文件內容，獲取到你的 SSH key

（此圖引用自碼雲）

首次使用還須要確認並添加主機到本機SSH可信列表。若返回 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. 內容，則證實添加成功。

ssh -T git@github.com 
複製代碼

到這還沒完，還要登陸 Github 上添加剛剛生成的SSH key，按如下步驟添加：

建立一個新的 SSH key, 標題隨便，key 就填剛纔生成那個，確認建立，搞定！！這樣在你的 SSH keys 列表裏就會看到你剛剛添加的密鑰。

部署到 Github

此時，本地和Github的工做作得差不了，是時候把它們兩個鏈接起來了。你也能夠查看官網的部署教程。 先不着急，部署以前還須要修改配置和安裝部署插件。 第一：打開項目根目錄下的 _config.yml 配置文件配置參數。拉到文件末尾，填上以下配置（也可同時部署到多個倉庫，後面再說）：

第二：要安裝一個部署插件 hexo-deployer-git。

npm install hexo-deployer-git --save
複製代碼

最後執行如下命令就能夠部署上傳啦，如下 g 是 generate 縮寫，d 是 deploy 縮寫：

hexo g -d
複製代碼

稍等一會，在瀏覽器訪問網址： https://你的用戶名.github.io 就會看到你的博客啦！！

開始寫做

博客搭好了，就開始寫文章了，這裏簡單介紹一下，詳細的文檔能夠看 hexo 官網。 新建文章，輸入如下命令便可

hexo new '文章標題'
複製代碼

執行完成後能夠在 /source/_posts 下看到一個「文章標題.md」的文章文件啦。.md 就是 Markdown 格式的文件，具體用法能夠在網上找一下，語法仍是比較簡單的。

在 Markdown 文章裏面輸入你的文章內容

再執行一下如下命令

hexo g
複製代碼

hexo s
複製代碼

就能夠看到你的文章在博客顯示了，如下就是剛剛

最後，只要部署到你的 Github 上就能夠了！

hexo clean
複製代碼

hexo g -d
複製代碼

部署前最好能先執行一下 hexo clean 命令，清除緩存文件 (db.json) 和已生成的靜態文件 (public)。在某些狀況（尤爲是更換主題後），若是發現您對站點的更改不管如何也不生效，您可能須要運行該命令。

另外，若是你的文章暫時不發佈能夠先保存在草稿裏面。生成草稿的方法和文章差很少 hexo new draft "文章標題"，生成後會在 /source/_drafts 裏看到你的草稿文章。當你想發佈時只要執行 publish 命令便可發佈到博客。

hexo publish [layout] <filename>
複製代碼

靜態圖牀

文章裏用的一些圖片放哪裏比較好呢？比對了幾個免費的圖牀七牛、sm.ms和微博圖牀，最後我決定選用微博的，七牛的好像最近是測試域名不能用了，雖然有解決方案，但怕之後還會有其餘問題，因此放棄啦，畢竟免費的東西纔是最貴的，特別像雲儲存這種東西，感受都是錢錢錢，哈哈哈，萬一有一天不讓用就比較麻煩了，另外sm.ms這個口碑也不錯，好像是我的開發的，免費好幾年了，有一樣的擔憂就放棄了，最好抱了新浪的大腿，感受新浪應該會靠譜一點吧，惟一的問題就是若是有一天新浪禁止外鏈的話就不行了，再看吧。

能夠去chrome網上應用商店下載一個叫微博圖牀的chrome插件，下圖是插件的界面，操做簡單方便，具體使用看說明就能夠啦，比較簡單，這樣圖牀的問題就解決了。

主題配置

你能夠到官網主題頁或者網上找你喜歡的，不少都不錯，我使用的是 next 主題。你能夠根據主題官網使用文檔說明修改相應的配置，達到本身想要的效果。例如設置字體、開啓打賞功能、添加評論系統、設置騰訊公益404頁面、數據統計、內容分享等等功能。這裏我說一下簡單說一下我我的用到的一些配置。

** 1、添加評論系統 **

*** 注意我如今已經改用 gitalk 啦，而下面是以前寫的 valine 的教程，後面有空會更新或者增長這部分相應的內容，固然，若是你想使用的是 valine 能夠繼續參考下面的方法配置 ***

添加 valine 評論系統，打開 /themes/next/_config.yml 文件，搜索 valine，開啓 valine，設置 enable 爲 true。

而後到 leanCloud 登陸或者註冊 一個帳號，註冊後登陸建立一個應用，而後進入應該到設置裏面找到 AppId 和 AppKey 複製粘貼到主題配置文件裏面對應的地方，就是上圖中的 appid 和 appkey 這兩個地方。

** 2、配置騰訊公益404頁面 **

1. 在博客根目錄 /source 文件夾下建立404.html（具體內容見下圖及代碼）；
2. 在 html 上方加入上面3行代碼；

騰訊公益用到的js其實有有三個，search_children.js、data.js以及page.js，若是你的站點協議是 http 的話直接按照 next 文件的方法添加就能夠了，但若是是 https 話直接添加是會報錯的，由於騰訊公益404頁面暫時還不支持 https，因此我直接把 page.js 的內容直接加入到頁面是能夠成功的，請看下圖

上圖最前面的那幾行也要加進去哦。

layout: false
title: "404"
---
複製代碼

這裏放一下上面用到的幾個js連接，來自騰訊公益404官方接入文檔

<script type="text/plain" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="https://pojian.xyz" homePageName="回到個人博客主頁"></script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
複製代碼

你也能夠直接複製我 Github 上的404頁面代碼，如下是我博客的預覽效果。

另外若是須要自定義個性化404頁面的只要刪除相應騰訊的JS，直接修改上面的 404.html 文件就能夠了。

** 3、添加字數統計和閱讀時長 **

首先安裝一個插件

$ npm install hexo-symbols-count-time --save
複製代碼

接着博客根目錄下的配置文件裏添加如下配置

# 文章字數統計
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
複製代碼

最後到 next 主題的配置文件下開啓 symbols_count_time 字段

重啓一下 hexo 就能夠看到效果啦

** 4、開啓fancybox **

打開主題配置文件搜索 fancybox 設置爲 true，另外，vendors 填上對應 CDN 地址便可開啓

** 5、文章分享 **

百度分享有個 https 的坑，按網上的方法把文件放到本身的服務器是我之前在其餘的網站上測試過是能使用的，但在 hexo 中卻報錯了，具體不清楚是什麼緣由，感受多是 hexo 版本的問題，由於有的人能夠，有的人報和我同樣的錯誤，忘記截圖了。由於這個功能也沒有十分須要，就不繼續爬了。換了 share.js 實現了一樣的功能，具體能夠看本文文末的效果。

綁定域名

若是你感受直接使用 github.io 的域名做爲你的博客連接不夠專業，不夠程序員的話那麼就購買一個域名解析綁定到你的博客，我也比較建議這樣作。 個人是在阿里萬網註冊的，註冊流程比較常規這裏就很少詳述了，

註冊登陸控制檯後找到你的域名，點右側的解析按鈕進去解析列表

點右邊的「添加記錄」添加兩條 CNAME 類型的記錄，如上圖，後面的記錄值就填寫大家本身的 Github 地址哈

記錄添加完後就要到 Github 設置綁定你購買的域名了，進入你的博客倉庫點 Setting，而後拉到 GitHub Pages 那裏填上你的申請購買的域名保存就能夠了

這裏說下，當你點擊保存的時候 Github Pages 會自動幫你生成一個 CNAME 的文件在根目錄，裏面的內容就是你綁定的域名地址

注意，若是是按上面的方法操做還會有一點小問題，就是當你執行 hexo d 部署你本地的文章到 Github 時，你本地的文件會所有覆蓋掉你現有倉庫上的全部內容，包括 Github Pages 幫你建立的那個 CNAME 文件，這樣的話當你訪問域名的時候又會訪問不到了。因此呢，你須要本身手動在本地根目錄 /source 目錄下手動建立一個 CNAME 文件，內容就是你的域名地址，由於 source 目錄下的文件部署的時候是不會被刪除的，因此部署的時候也會一塊兒被部署上去，最後還須要從新到你倉庫 Setting，拉到 GitHub Pages 那裏再一次綁定你的域名，這樣之後就沒問題了。

稍等一會就能夠用你申請的域名就訪問你的博客了！

SEO優化

接下來講下百度收錄，聽說 Github 屏蔽了百度的蜘蛛，也有的人說沒，具體不是很清楚，Github 在2015的時候遭受了史上最大規模的DDoS攻擊，有國外媒體指百度乾的，具體不得而知啦，但感受百度收錄 Github 確認是比較難，時間也比較長，因此仍是優化一下吧。

1、代碼同時部署到 coding

那有什麼方法呢？就是把博客站點同時託管在國內的 coding 平臺上，這樣收錄就會容易不少，同時又不影響 Github 上的代碼，coding 是國內的一個提供代碼託管服務的平臺，跟 Github 差很少。使用方法也和 Github 差很少，下面我就具體說一下怎麼把代碼同時部署到 coding 和 Github 上面，讓百度更容易收錄。

註冊、登陸 coding 後建立一個新的倉庫，注意點就是新建項目的時候命名規則和 Github 上的同樣，就是 用戶名.coding.me 能夠看下圖，還有記得別忘了添加 SSH key

倉庫建好後進入倉庫，選左側的 Page 服務，在設置中綁定新的域名，輸入後點擊綁定就能夠了

接着到你的域名解析控制檯修改添加兩條 CNAME 記錄指向你的 Page 地址，看下圖，注意看記錄值哦，換成你本身的。

最後呢修改根目錄下的 _config.yml 配置文件中的部署配置，把 coding 的 git 地址添加進去就好了

最後執行部署命令

hexo clean
hexo g -d
複製代碼

這時就能夠在 coding 倉庫中看到你提交部署的代碼了，同時 你的用戶名.coding.me 也能夠訪問你的博客站點了，這裏 Github 和 coding 的代碼是同時更新的，互不影響。而綁定的域名解析可能須要稍等一會纔會生效。

2、百度提交連接

部署到 coding 後也不是百度就能夠收錄的，咱們還須要繼續優化。若是在百度搜索輸入 site:你的域名 若是出現如下的效果證實就是網站還沒被百度收錄的，咱們如今點下面的提交網址，進入百度站長工具提交。

3、百度站長平臺添加網站管理

註冊百度站長工具，並添加網站

添加網站的過程有三步，主要操做集中在最後一步的網站驗證方式裏，我選擇的是 HTML標籤驗證，按下面使用方法添加代碼到你的網站便可

而使用 next 主題的同窗能夠直接在主題的配置文件下搜索 baidu_site_verification 後面填上第三步中 meta 標籤中 content 的值就能夠

最後點完成驗證就能夠經過了。

4、添加sitemap站點地圖

站點地圖包含了你網站上的站點連接，方便搜索引擎蜘蛛的抓取工做，搜索蜘蛛會經過網站地圖中連接的深層次爬行，抓取新的內容。因此咱們要生成 sitemap 文件助於網站優化，安裝生成插件

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
複製代碼

接着在博客根目錄下的配置文件裏添加對應配置項

# sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
複製代碼

注意縮進，要不會編譯報錯

還要修改一個根目錄配置文件下的URL，url 一項的值改爲你在百度站長平臺裏面添加的本身站點的地址，這樣生成的 sitemap.xml 文件裏的 url 纔是你站點的地址，看下圖

5、添加蜘蛛協議robots.txt

增長 robots.txt 文件，就是蜘蛛協議，新建 robots.txt 文件添加如下內容，把 robots.txt 放在 /source 文件下，咱們前面說過 /source 目錄下的文件是會被打包上傳的。

# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/

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

Sitemap: https://pojian.xyz/sitemap.xml
Sitemap: https://pojian.xyz/baidusitemap.xml
複製代碼

Allow後面的就是你的menu，還有最下面的 Sitemap 地址請自行改爲大家本身的地址

完成後，重啓hexo，執行 hexo g -d 從新生成文件並提交後，在public目錄下會生成對應的xml文件。能夠經過 xxx.com/sitemap.xml 和 xxx.com/baidusitema… 訪問到 sitemap 文件，經過 xxx.com/robots.txt 訪問到 robots.txt 文件。

能夠到百度站長檢測一下 robots.txt 文件是否生效

6、自動推送

百度有自動推送、主動推送、sitemap、手動提交幾種方式。 自動推送是輕量級連接提交組件，將自動推送的JS代碼放置在站點每個頁面源代碼中，當頁面被訪問時，頁面連接會自動推送給百度，有利於新頁面更快被百度發現。怎麼安裝呢？ 若是你的是 next 主題，只要打開主題配置文件搜索找到 baidu_push 設置爲 true 便可

若是你使用的不是 next 主題，也能夠手動把如下代碼粘貼到你的站點，通常放在 head 頭部公共文件裏面

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
複製代碼

7、主動推送

這裏利用一個第三方插件 hexo-baidu-url-submit 進行主動推送 安裝

npm install hexo-baidu-url-submit --save
複製代碼

添加想關配置到根目錄下的配置文件裏

# 百度連接提交-主動推送配置
baidu_url_submit:
  count: 3 ## 提交最新的一個連接
  host: pojian.xyz ## 在百度站長平臺中註冊的域名
  token: 3GIEYsuq5ZTkvDBm ## 請注意這是您的祕鑰，因此請不要把博客源代碼發佈在公衆倉庫裏!
  path: baidu_urls.txt ## 文本文檔的地址， 新連接會保存在此文本文檔裏
複製代碼

添加新的部署配置，注意這裏跟以前有點不同，要在 type 前添加一個破折號 -

deploy:
  - type: git
    repo:
      github: https://github.com/webw3c/webw3c.github.io.git
      coding: https://git.dev.tencent.com/yusting/yusting.coding.me.git
  - type: baidu_url_submitter
複製代碼

最後，執行 hexo deploy 的時候，新的鏈接就會被推送了。 ** 實現原理 ** 新連接的產生， hexo generate 會產生一個文本文件，裏面包含最新的連接 新連接的提交， hexo deploy 會從上述文件中讀取連接，提交至百度搜索引擎

8、手動推送

就是直接直接把你須要提交的連接直接使用手動的方式填寫提交就能夠。

最後你能夠看到是否已經被百度成功收錄了

若是抓取成功了就證實已經被收錄了，好像通常不會這麼快，個人等了兩天左右才抓取獲得。

9、添加百度統計

添加百度統計就能夠查看你網站相關的一些數據，便於你本身的站點

多端同步寫做

內容準備中...

手機編寫

網上好像找不到什麼資料，不過經過在手機端安裝 SSH 客戶端遠程操做服務器端，安裝配置 node / git / hexo 環境編寫應該能夠的，原理同多臺電腦編寫差很少，不過這樣作不太省心，不折騰了哈。

結語

文章到這差很少啦！後續有些小點深刻學習後仍是會保持更新的，但願文章對曾經像我同樣的小白有那麼一點幫助，技術有限，不免有紕漏，歡迎指正批評和討論，感謝閱讀！:-)