超詳細Hexo+Github Page搭建技術部落格教程【持續更新】

pteternity發表於2019-01-22
HexoGithub

前言

部落格有第三方平臺，也可以自建，比較早的有部落格園、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
複製程式碼

image

安裝 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 主題的，預設不是這個主題。

image

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

註冊 Github

首先如果你還沒有 Github 賬號的先註冊一個，具體過程如下

image

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

image

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

image

然後開啟倉庫建立一個 index.html 檔案，並隨意先寫點內容，比如 Hello World.

image
image

這個時候開啟 http://你的使用者名稱.github.io 就可以看到你的站點啦，是不是很簡單！index.html 內容只是暫時的預覽效果，後面把 Hexo 的檔案部署上去就可以在 http://你的使用者名稱.github.io 看到你自己的部落格啦！ 比如我的就是 webw3c.github.io 了。

image

配置 SSH key

要使用 git 工具首先要配置一下SSH key，為部署本地部落格到 Github 做準備。

開啟命令列輸入 cd ~/.ssh 如果沒報錯或者提示什麼的說明就是以前生成過的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以檢視本機上的 SSH key 了。

cat ~/.ssh/id_rsa.pub
複製程式碼

image

如果之前沒有建立，則執行以下命令全域性配置一下本地賬戶：

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

image

（此圖引用自碼雲）

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

ssh -T git@github.com 
複製程式碼

image

到這還沒完，還要登入 Github 上新增剛剛生成的SSH key，按以下步驟新增：

image

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

image

部署到 Github

此時，本地和Github的工作做得差不了，是時候把它們兩個連線起來了。你也可以檢視官網的部署教程。 先不著急，部署之前還需要修改配置和安裝部署外掛。 第一：開啟專案根目錄下的 _config.yml 配置檔案配置引數。拉到檔案末尾，填上如下配置（也可同時部署到多個倉庫，後面再說）：

image

第二：要安裝一個部署外掛 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 文章裡面輸入你的文章內容

image

再執行一下以下命令

hexo g
複製程式碼
hexo s
複製程式碼

就可以看到你的文章在部落格顯示了，以下就是剛剛

image

最後，只要部署到你的 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外掛，下圖是外掛的介面，操作簡單方便，具體使用看說明就可以啦，比較簡單，這樣圖床的問題就解決了。

image

主題配置

你可以到官網主題頁或者網上找你喜歡的，很多都不錯，我使用的是 next 主題。你可以根據主題官網使用文件說明修改相應的配置，達到自己想要的效果。例如設定字型、開啟打賞功能、新增評論系統、設定騰訊公益404頁面、資料統計、內容分享等等功能。這裡我說一下簡單說一下我個人用到的一些配置。

** 一、新增評論系統 **

*** 注意我現在已經改用 gitalk 啦，而下面是之前寫的 valine 的教程，後面有空會更新或者增加這部分相應的內容，當然，如果你想使用的是 valine 可以繼續參考下面的方法配置 ***

新增 valine 評論系統，開啟 /themes/next/_config.yml 檔案，搜尋 valine，開啟 valine，設定 enable 為 true。

image

然後到 leanCloud 登入或者註冊 一個賬號，註冊後登入建立一個應用，然後進入應該到設定裡面找到 AppId 和 AppKey 複製貼上到主題配置檔案裡面對應的地方，就是上圖中的 appid 和 appkey 這兩個地方。

image

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

  1. 在部落格根目錄 /source 資料夾下建立404.html（具體內容見下圖及程式碼）；
  2. 在 html 上方加入上面3行程式碼；

騰訊公益用到的js其實有有三個，search_children.js、data.js以及page.js，如果你的站點協議是 http 的話直接按照 next 檔案的方法新增就可以了，但如果是 https 話直接新增是會報錯的，因為騰訊公益404頁面暫時還不支援 https，所以我直接把 page.js 的內容直接加入到頁面是可以成功的，請看下圖

image

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

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頁面程式碼，以下是我部落格的預覽效果。

image

另外如果需要自定義個性化404頁面的只要刪除相應騰訊的JS，直接修改上面的 404.html 檔案就可以了。

** 三、新增字數統計和閱讀時長 **

首先安裝一個外掛

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

接著部落格根目錄下的配置檔案裡新增以下配置

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

最後到 next 主題的配置檔案下開啟 symbols_count_time 欄位

image

重啟一下 hexo 就可以看到效果啦

image

** 四、開啟fancybox **

開啟主題配置檔案搜尋 fancybox 設定為 true，另外，vendors 填上對應 CDN 地址即可開啟

image

** 五、文章分享 **

百度分享有個 https 的坑，按網上的方法把檔案放到自己的伺服器是我以前在其他的網站上測試過是能使用的，但在 hexo 中卻報錯了，具體不清楚是什麼原因，感覺可能是 hexo 版本的問題，因為有的人可以，有的人報和我一樣的錯誤，忘記截圖了。因為這個功能也沒有十分需要，就不繼續爬了。換了 share.js 實現了同樣的功能，具體可以看本文文末的效果。

繫結域名

如果你感覺直接使用 github.io 的域名作為你的部落格連結不夠專業，不夠程式設計師的話那麼就購買一個域名解析繫結到你的部落格，我也比較建議這樣做。 我的是在阿里萬網註冊的，註冊流程比較常規這裡就不多詳述了，

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

image
image

點右邊的“新增記錄”新增兩條 CNAME 型別的記錄，如上圖，後面的記錄值就填寫你們自己的 Github 地址哈

記錄新增完後就要到 Github 設定繫結你購買的域名了，進入你的部落格倉庫點 Setting，然後拉到 GitHub Pages 那裡填上你的申請購買的域名儲存就可以了

image
image

這裡說下，當你點選儲存的時候 Github Pages 會自動幫你生成一個 CNAME 的檔案在根目錄，裡面的內容就是你繫結的域名地址

image

注意，如果是按上面的方法操作還會有一點小問題，就是當你執行 hexo d 部署你本地的文章到 Github 時，你本地的檔案會全部覆蓋掉你現有倉庫上的所有內容，包括 Github Pages 幫你建立的那個 CNAME 檔案，這樣的話當你訪問域名的時候又會訪問不到了。所以呢，你需要自己手動在本地根目錄 /source 目錄下手動建立一個 CNAME 檔案，內容就是你的域名地址，因為 source 目錄下的檔案部署的時候是不會被刪除的，所以部署的時候也會一起被部署上去，最後還需要重新到你倉庫 Setting，拉到 GitHub Pages 那裡再一次繫結你的域名，這樣以後就沒問題了。

稍等一會就可以用你申請的域名就訪問你的部落格了！

SEO優化

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

一、程式碼同時部署到 coding

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

註冊、登入 coding 後建立一個新的倉庫，注意點就是新建專案的時候命名規則和 Github 上的一樣，就是 使用者名稱.coding.me 可以看下圖，還有記得別忘了新增 SSH key

image

倉庫建好後進入倉庫，選左側的 Page 服務，在設定中繫結新的域名，輸入後點選繫結就可以了

image

接著到你的域名解析控制檯修改新增兩條 CNAME 記錄指向你的 Page 地址，看下圖，注意看記錄值哦，換成你自己的。

image

最後呢修改根目錄下的 _config.yml 配置檔案中的部署配置，把 coding 的 git 地址新增進去就行了

image

最後執行部署命令

hexo clean
hexo g -d
複製程式碼

這時就可以在 coding 倉庫中看到你提交部署的程式碼了，同時 你的使用者名稱.coding.me 也可以訪問你的部落格站點了，這裡 Github 和 coding 的程式碼是同時更新的，互不影響。而繫結的域名解析可能需要稍等一會才會生效。

二、百度提交連結

部署到 coding 後也不是百度就可以收錄的，我們還需要繼續優化。如果在百度搜尋輸入 site:你的域名 如果出現以下的效果證明就是網站還沒被百度收錄的，我們現在點下面的提交網址，進入百度站長工具提交。

image

三、百度站長平臺新增網站管理

註冊百度站長工具，並新增網站

image

新增網站的過程有三步，主要操作集中在最後一步的網站驗證方式裡，我選擇的是 HTML標籤驗證，按下面使用方法新增程式碼到你的網站即可

image

而使用 next 主題的同學可以直接在主題的配置檔案下搜尋 baidu_site_verification 後面填上第三步中 meta 標籤中 content 的值就可以

image

最後點完成驗證就可以通過了。

四、新增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 才是你站點的地址，看下圖

image

五、新增蜘蛛協議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 檔案是否生效

image

六、自動推送

百度有自動推送、主動推送、sitemap、手動提交幾種方式。 自動推送是輕量級連結提交元件，將自動推送的JS程式碼放置在站點每一個頁面原始碼中，當頁面被訪問時，頁面連結會自動推送給百度，有利於新頁面更快被百度發現。怎麼安裝呢？ 如果你的是 next 主題，只要開啟主題配置檔案搜尋找到 baidu_push 設定為 true 即可

image

如果你使用的不是 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>
複製程式碼

七、主動推送

這裡利用一個第三方外掛 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 會從上述檔案中讀取連結，提交至百度搜尋引擎

八、手動推送

就是直接直接把你需要提交的連結直接使用手動的方式填寫提交就可以。

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

image

如果抓取成功了就證明已經被收錄了，好像一般不會這麼快，我的等了兩天左右才抓取得到。

九、新增百度統計

新增百度統計就可以檢視你網站相關的一些資料，便於你自己的站點

image

image

多端同步寫作

內容準備中...

手機編寫

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

結語

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

相關文章