超詳細(xì)Hexo+Github Page搭建技術(shù)博客教程（含SEO優(yōu)化）
作者：魚先生
https://segmentfault.com/a/1190000017986794
前言
博客有第三方平臺，也能夠自建，比較早的有博客園、CSDN，近幾年新興的也比較多諸如：WordPress、segmentFault、簡書、掘金、知乎專欄、Github Page 等等。
此次我要說的就是 Github Page + Hexo 搭建我的博客的方式！Github Page 是 Github 提供的一種免費(fèi)的靜態(tài)網(wǎng)頁托管服務(wù)（因此想一想免費(fèi)的空間不用也挺浪費(fèi)的哈哈哈），能夠用來托管博客、項(xiàng)目官網(wǎng)等靜態(tài)網(wǎng)頁。支持 Jekyll、Hugo、Hexo 編譯靜態(tài)資源，此次咱們的主角就是 Hexo 了，具體的內(nèi)容下面在文章內(nèi)介紹。html
下面就開始吧~node
準(zhǔn)備環(huán)境
準(zhǔn)備 node 和 git 環(huán)境， 首先，安裝 NodeJS，由于 Hexo 是基于 Node.js 驅(qū)動的一款博客框架，相比起前面提到過的 Jekyll 框架更快更簡潔，由于天*朝網(wǎng)絡(luò)被墻的緣由嘗試過安裝 Jekyll 失敗而放棄了。而后，安裝 git，一個分布式版本控制系統(tǒng)，用于項(xiàng)目的版本控制管理，做者是 Linux 之父。若是 Git 還不熟悉能夠參考廖雪峰大神的 Git 教程。git
兩個工具不一樣的平臺安裝方法有所不同，可自行了解按步驟安裝，這里不詳述了。安裝成功后打開git bash（Windowns）或者終端（Mac），下方中將統(tǒng)一稱為命令行。在命令行中輸入相應(yīng)命令驗(yàn)證是否成功，若是成功會有相應(yīng)的版本號。程序員
git version
node -v
npm -v
復(fù)制代碼
安裝 Hexo
若是以上環(huán)境準(zhǔn)備好了就可使用 npm 開始安裝 Hexo 了。也可查看 Hexo 的詳細(xì)文檔。在命令行輸入執(zhí)行如下命令：github
npm install -g hexo-cli
復(fù)制代碼
安裝 Hexo 完成后，再執(zhí)行下列命令，Hexo 將會在指定文件夾中新建所須要的文件。web
hexo init myBlog
cd myBlog
npm install
復(fù)制代碼
新建完成后，指定文件夾的目錄以下：chrome
.
├── _config.yml # 網(wǎng)站的配置信息，您能夠在此配置大部分的參數(shù)。
├── package.json
├── scaffolds # 模版文件夾
├── source # 資源文件夾，除 _posts 文件，其余如下劃線_開頭的文件或者文件夾不會被編譯打包到public文件夾
| ├── _drafts # 草稿文件
| └── _posts # 文章Markdowm文件
└── themes # 主題文件夾
復(fù)制代碼
好了，若是上面的命令都沒報錯的話，就恭喜了，運(yùn)行 hexo s 命令，其中 s 是 server 的縮寫，在瀏覽器中輸入 http://localhost:4000 回車就能夠預(yù)覽效果了。shell
hexo s
復(fù)制代碼
如下是我本地的預(yù)覽效果，更換了 next 主題的，默認(rèn)不是這個主題。npm
至此，你本地的博客就已經(jīng)搭建成功，接下來就是部署到 Github Page 了。
注冊 Github
首先若是你尚未 Github 帳號的先注冊一個，具體過程以下
點(diǎn)擊 Start project 或者下面的 new repository 建立一個新的倉庫
注意點(diǎn)來了，Github 僅能使用一個同名倉庫的代碼托管一個靜態(tài)站點(diǎn)，這個網(wǎng)上不少教程沒說到的。
而后打開倉庫建立一個 index.html 文件，并隨意先寫點(diǎn)內(nèi)容，好比 Hello World.
這個時候打開 http://你的用戶名.github.io 就能夠看到你的站點(diǎn)啦，是否是很簡單！index.html 內(nèi)容只是暫時的預(yù)覽效果，后面把 Hexo 的文件部署上去就能夠在 http://你的用戶名.github.io 看到你本身的博客啦！好比個人就是 webw3c.github.io 了。
配置 SSH key
要使用 git 工具首先要配置一下SSH key，為部署本地博客到 Github 作準(zhǔn)備。
打開命令行輸入 cd ~/.ssh 若是沒報錯或者提示什么的說明就是之前生成過的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是能夠查看本機(jī)上的 SSH key 了。
cat ~/.ssh/id_rsa.pub
復(fù)制代碼
若是以前沒有建立，則執(zhí)行如下命令全局配置一下本地帳戶：
git config --global user.name "用戶名"
git config --global user.email "郵箱地址"
復(fù)制代碼
而后開始生成密鑰 SSH key
ssh-keygen -t rsa -C '上面的郵箱'
復(fù)制代碼
按照提示完成三次回車，便可生成 ssh key。經(jīng)過查看 ~/.ssh/id_rsa.pub 文件內(nèi)容，獲取到你的 SSH key
（此圖引用自碼云）
首次使用還須要確認(rèn)并添加主機(jī)到本機(jī)SSH可信列表。若返回 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. 內(nèi)容，則證實(shí)添加成功。
ssh -T [email protected]
復(fù)制代碼
到這還沒完，還要登陸 Github 上添加剛剛生成的SSH key，按如下步驟添加：
建立一個新的 SSH key, 標(biāo)題隨便，key 就填剛才生成那個，確認(rèn)建立，搞定！！這樣在你的 SSH keys 列表里就會看到你剛剛添加的密鑰。
部署到 Github
此時，本地和Github的工做作得差不了，是時候把它們兩個鏈接起來了。你也能夠查看官網(wǎng)的部署教程。先不著急，部署以前還須要修改配置和安裝部署插件。第一：打開項(xiàng)目根目錄下的 _config.yml 配置文件配置參數(shù)。拉到文件末尾，填上以下配置（也可同時部署到多個倉庫，后面再說）：
第二：要安裝一個部署插件 hexo-deployer-git。
npm install hexo-deployer-git --save
復(fù)制代碼
最后執(zhí)行如下命令就能夠部署上傳啦，如下 g 是 generate 縮寫，d 是 deploy 縮寫：
hexo g -d
復(fù)制代碼
稍等一會，在瀏覽器訪問網(wǎng)址：https://你的用戶名.github.io 就會看到你的博客啦！！
開始寫做
博客搭好了，就開始寫文章了，這里簡單介紹一下，詳細(xì)的文檔能夠看 hexo 官網(wǎng)。新建文章，輸入如下命令便可
hexo new '文章標(biāo)題'
復(fù)制代碼
執(zhí)行完成后能夠在 /source/_posts 下看到一個“文章標(biāo)題.md”的文章文件啦。.md 就是 Markdown 格式的文件，具體用法能夠在網(wǎng)上找一下，語法仍是比較簡單的。
在 Markdown 文章里面輸入你的文章內(nèi)容
再執(zhí)行一下如下命令
hexo g
復(fù)制代碼
hexo s
復(fù)制代碼
就能夠看到你的文章在博客顯示了，如下就是剛剛
最后，只要部署到你的 Github 上就能夠了！
hexo clean
復(fù)制代碼
hexo g -d
復(fù)制代碼
部署前最好能先執(zhí)行一下 hexo clean 命令，清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)。在某些狀況（尤為是更換主題后），若是發(fā)現(xiàn)您對站點(diǎn)的更改不管如何也不生效，您可能須要運(yùn)行該命令。
另外，若是你的文章暫時不發(fā)布能夠先保存在草稿里面。生成草稿的方法和文章差很少 hexo new draft "文章標(biāo)題"，生成后會在 /source/_drafts 里看到你的草稿文章。當(dāng)你想發(fā)布時只要執(zhí)行 publish 命令便可發(fā)布到博客。
hexo publish [layout] <filename>
復(fù)制代碼
靜態(tài)圖床
文章里用的一些圖片放哪里比較好呢？比對了幾個免費(fèi)的圖床七牛、sm.ms和微博圖床，最后我決定選用微博的，七牛的好像最近是測試域名不能用了，雖然有解決方案，但怕之后還會有其余問題，因此放棄啦，畢竟免費(fèi)的東西才是最貴的，特別像云儲存這種東西，感受都是錢錢錢，哈哈哈，萬一有一天不讓用就比較麻煩了，另外sm.ms這個口碑也不錯，好像是我的開發(fā)的，免費(fèi)好幾年了，有一樣的擔(dān)憂就放棄了，最好抱了新浪的大腿，感受新浪應(yīng)該會靠譜一點(diǎn)吧，惟一的問題就是若是有一天新浪禁止外鏈的話就不行了，再看吧。
能夠去chrome網(wǎng)上應(yīng)用商店下載一個叫微博圖床的chrome插件，下圖是插件的界面，操做簡單方便，具體使用看說明就能夠啦，比較簡單，這樣圖床的問題就解決了。
主題配置
你能夠到官網(wǎng)主題頁或者網(wǎng)上找你喜歡的，不少都不錯，我使用的是 next 主題。你能夠根據(jù)主題官網(wǎng)使用文檔說明修改相應(yīng)的配置，達(dá)到本身想要的效果。例如設(shè)置字體、開啟打賞功能、添加評論系統(tǒng)、設(shè)置騰訊公益404頁面、數(shù)據(jù)統(tǒng)計(jì)、內(nèi)容分享等等功能。這里我說一下簡單說一下我我的用到的一些配置。
** 1、添加評論系統(tǒng) **
*** 注意我如今已經(jīng)改用 gitalk 啦，而下面是以前寫的 valine 的教程，后面有空會更新或者增長這部分相應(yīng)的內(nèi)容，固然，若是你想使用的是 valine 能夠繼續(xù)參考下面的方法配置 ***
添加 valine 評論系統(tǒng)，打開 /themes/next/_config.yml 文件，搜索 valine，開啟 valine，設(shè)置 enable 為 true。
而后到 leanCloud 登陸或者注冊 一個帳號，注冊后登陸建立一個應(yīng)用，而后進(jìn)入應(yīng)該到設(shè)置里面找到 AppId 和 AppKey 復(fù)制粘貼到主題配置文件里面對應(yīng)的地方，就是上圖中的 appid 和 appkey 這兩個地方。
** 2、配置騰訊公益404頁面 **
在博客根目錄 /source 文件夾下建立404.html（具體內(nèi)容見下圖及代碼）； 在 html 上方加入上面3行代碼；
騰訊公益用到的js其實(shí)有有三個，search_children.js、data.js以及page.js，若是你的站點(diǎn)協(xié)議是 http 的話直接按照 next 文件的方法添加就能夠了，但若是是 https 話直接添加是會報錯的，由于騰訊公益404頁面暫時還不支持 https，因此我直接把 page.js 的內(nèi)容直接加入到頁面是能夠成功的，請看下圖
上圖最前面的那幾行也要加進(jìn)去哦。
layout: false
title: "404"
---
復(fù)制代碼
這里放一下上面用到的幾個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>
復(fù)制代碼
你也能夠直接復(fù)制我 Github 上的404頁面代碼，如下是我博客的預(yù)覽效果。
另外若是須要自定義個性化404頁面的只要刪除相應(yīng)騰訊的JS，直接修改上面的 404.html 文件就能夠了。
** 3、添加字?jǐn)?shù)統(tǒng)計(jì)和閱讀時長 **
首先安裝一個插件
$ npm install hexo-symbols-count-time --save
復(fù)制代碼
接著博客根目錄下的配置文件里添加如下配置
# 文章字?jǐn)?shù)統(tǒng)計(jì)
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
復(fù)制代碼
最后到 next 主題的配置文件下開啟 symbols_count_time 字段
重啟一下 hexo 就能夠看到效果啦
** 4、開啟fancybox **
打開主題配置文件搜索 fancybox 設(shè)置為 true，另外，vendors 填上對應(yīng) CDN 地址便可開啟
** 5、文章分享 **
百度分享有個 https 的坑，按網(wǎng)上的方法把文件放到本身的服務(wù)器是我之前在其余的網(wǎng)站上測試過是能使用的，但在 hexo 中卻報錯了，具體不清楚是什么緣由，感受多是 hexo 版本的問題，由于有的人能夠，有的人報和我同樣的錯誤，忘記截圖了。由于這個功能也沒有十分須要，就不繼續(xù)爬了。換了 share.js 實(shí)現(xiàn)了一樣的功能，具體能夠看本文文末的效果。
綁定域名
若是你感受直接使用 github.io 的域名做為你的博客連接不夠?qū)I(yè)，不夠程序員的話那么就購買一個域名解析綁定到你的博客，我也比較建議這樣作。個人是在阿里萬網(wǎng)注冊的，注冊流程比較常規(guī)這里就很少詳述了，
注冊登陸控制臺后找到你的域名，點(diǎn)右側(cè)的解析按鈕進(jìn)去解析列表
點(diǎn)右邊的“添加記錄”添加兩條 CNAME 類型的記錄，如上圖，后面的記錄值就填寫大家本身的 Github 地址哈
記錄添加完后就要到 Github 設(shè)置綁定你購買的域名了，進(jìn)入你的博客倉庫點(diǎn) Setting，而后拉到 GitHub Pages 那里填上你的申請購買的域名保存就能夠了
這里說下，當(dāng)你點(diǎn)擊保存的時候 Github Pages 會自動幫你生成一個 CNAME 的文件在根目錄，里面的內(nèi)容就是你綁定的域名地址
注意，若是是按上面的方法操做還會有一點(diǎn)小問題，就是當(dāng)你執(zhí)行 hexo d 部署你本地的文章到 Github 時，你本地的文件會所有覆蓋掉你現(xiàn)有倉庫上的全部內(nèi)容，包括 Github Pages 幫你建立的那個 CNAME 文件，這樣的話當(dāng)你訪問域名的時候又會訪問不到了。因此呢，你須要本身手動在本地根目錄 /source 目錄下手動建立一個 CNAME 文件，內(nèi)容就是你的域名地址，由于 source 目錄下的文件部署的時候是不會被刪除的，因此部署的時候也會一塊兒被部署上去，最后還須要從新到你倉庫 Setting，拉到 GitHub Pages 那里再一次綁定你的域名，這樣之后就沒問題了。
稍等一會就能夠用你申請的域名就訪問你的博客了！
SEO優(yōu)化
接下來講下百度收錄，聽說 Github 屏蔽了百度的蜘蛛，也有的人說沒，具體不是很清楚，Github 在2015的時候遭受了史上最大規(guī)模的DDoS攻擊，有國外媒體指百度干的，具體不得而知啦，但感受百度收錄 Github 確認(rèn)是比較難，時間也比較長，因此仍是優(yōu)化一下吧。
1、代碼同時部署到 coding
那有什么方法呢？就是把博客站點(diǎn)同時托管在國內(nèi)的 coding 平臺上，這樣收錄就會容易不少，同時又不影響 Github 上的代碼，coding 是國內(nèi)的一個提供代碼托管服務(wù)的平臺，跟 Github 差很少。使用方法也和 Github 差很少，下面我就具體說一下怎么把代碼同時部署到 coding 和 Github 上面，讓百度更容易收錄。
注冊、登陸 coding 后建立一個新的倉庫，注意點(diǎn)就是新建項(xiàng)目的時候命名規(guī)則和 Github 上的同樣，就是 用戶名.coding.me 能夠看下圖，還有記得別忘了添加 SSH key
倉庫建好后進(jìn)入倉庫，選左側(cè)的 Page 服務(wù)，在設(shè)置中綁定新的域名，輸入后點(diǎn)擊綁定就能夠了
接著到你的域名解析控制臺修改添加兩條 CNAME 記錄指向你的 Page 地址，看下圖，注意看記錄值哦，換成你本身的。
最后呢修改根目錄下的 _config.yml 配置文件中的部署配置，把 coding 的 git 地址添加進(jìn)去就好了
最后執(zhí)行部署命令
hexo clean
hexo g -d
復(fù)制代碼
這時就能夠在 coding 倉庫中看到你提交部署的代碼了，同時 你的用戶名.coding.me 也能夠訪問你的博客站點(diǎn)了，這里 Github 和 coding 的代碼是同時更新的，互不影響。而綁定的域名解析可能須要稍等一會才會生效。
2、百度提交連接
部署到 coding 后也不是百度就能夠收錄的，咱們還須要繼續(xù)優(yōu)化。若是在百度搜索輸入 site:你的域名 若是出現(xiàn)如下的效果證實(shí)就是網(wǎng)站還沒被百度收錄的，咱們?nèi)缃顸c(diǎn)下面的提交網(wǎng)址，進(jìn)入百度站長工具提交。
3、百度站長平臺添加網(wǎng)站管理
注冊百度站長工具，并添加網(wǎng)站
添加網(wǎng)站的過程有三步，主要操做集中在最后一步的網(wǎng)站驗(yàn)證方式里，我選擇的是 HTML標(biāo)簽驗(yàn)證，按下面使用方法添加代碼到你的網(wǎng)站便可
而使用 next 主題的同窗能夠直接在主題的配置文件下搜索 baidu_site_verification 后面填上第三步中 meta 標(biāo)簽中 content 的值就能夠
最后點(diǎn)完成驗(yàn)證就能夠經(jīng)過了。
4、添加sitemap站點(diǎn)地圖
站點(diǎn)地圖包含了你網(wǎng)站上的站點(diǎn)連接，方便搜索引擎蜘蛛的抓取工做，搜索蜘蛛會經(jīng)過網(wǎng)站地圖中連接的深層次爬行，抓取新的內(nèi)容。因此咱們要生成 sitemap 文件助于網(wǎng)站優(yōu)化，安裝生成插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
復(fù)制代碼
接著在博客根目錄下的配置文件里添加對應(yīng)配置項(xiàng)
# sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
復(fù)制代碼
注意縮進(jìn)，要不會編譯報錯
還要修改一個根目錄配置文件下的URL，url 一項(xiàng)的值改為你在百度站長平臺里面添加的本身站點(diǎn)的地址，這樣生成的 sitemap.xml 文件里的 url 才是你站點(diǎn)的地址，看下圖
5、添加蜘蛛?yún)f(xié)議robots.txt
增長 robots.txt 文件，就是蜘蛛?yún)f(xié)議，新建 robots.txt 文件添加如下內(nèi)容，把 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
復(fù)制代碼
Allow后面的就是你的menu，還有最下面的 Sitemap 地址請自行改為大家本身的地址
完成后，重啟hexo，執(zhí)行 hexo g -d 從新生成文件并提交后，在public目錄下會生成對應(yīng)的xml文件。能夠經(jīng)過 xxx.com/sitemap.xml 和 xxx.com/baidusitema… 訪問到 sitemap 文件，經(jīng)過 xxx.com/robots.txt 訪問到 robots.txt 文件。
能夠到百度站長檢測一下 robots.txt 文件是否生效
6、自動推送
百度有自動推送、主動推送、sitemap、手動提交幾種方式。自動推送是輕量級連接提交組件，將自動推送的JS代碼放置在站點(diǎn)每個頁面源代碼中，當(dāng)頁面被訪問時，頁面連接會自動推送給百度，有利于新頁面更快被百度發(fā)現(xiàn)。怎么安裝呢？若是你的是 next 主題，只要打開主題配置文件搜索找到 baidu_push 設(shè)置為 true 便可
若是你使用的不是 next 主題，也能夠手動把如下代碼粘貼到你的站點(diǎn)，通常放在 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>
復(fù)制代碼
7、主動推送
這里利用一個第三方插件 hexo-baidu-url-submit 進(jìn)行主動推送 安裝
npm install hexo-baidu-url-submit --save
復(fù)制代碼
添加想關(guān)配置到根目錄下的配置文件里
# 百度連接提交-主動推送配置
baidu_url_submit:
count: 3 ## 提交最新的一個連接
host: pojian.xyz ## 在百度站長平臺中注冊的域名
token: 3GIEYsuq5ZTkvDBm ## 請注意這是您的秘鑰，因此請不要把博客源代碼發(fā)布在公眾倉庫里!
path: baidu_urls.txt ## 文本文檔的地址， 新連接會保存在此文本文檔里
復(fù)制代碼
添加新的部署配置，注意這里跟以前有點(diǎn)不同，要在 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
復(fù)制代碼
最后，執(zhí)行 hexo deploy 的時候，新的鏈接就會被推送了。** 實(shí)現(xiàn)原理 ** 新連接的產(chǎn)生， hexo generate 會產(chǎn)生一個文本文件，里面包含最新的連接 新連接的提交， hexo deploy 會從上述文件中讀取連接，提交至百度搜索引擎
8、手動推送
就是直接直接把你須要提交的連接直接使用手動的方式填寫提交就能夠。
最后你能夠看到是否已經(jīng)被百度成功收錄了
若是抓取成功了就證實(shí)已經(jīng)被收錄了，好像通常不會這么快，個人等了兩天左右才抓取獲得。
9、添加百度統(tǒng)計(jì)
添加百度統(tǒng)計(jì)就能夠查看你網(wǎng)站相關(guān)的一些數(shù)據(jù)，便于你本身的站點(diǎn)
多端同步寫做
內(nèi)容準(zhǔn)備中...
手機(jī)編寫
網(wǎng)上好像找不到什么資料，不過經(jīng)過在手機(jī)端安裝 SSH 客戶端遠(yuǎn)程操做服務(wù)器端，安裝配置 node / git / hexo 環(huán)境編寫應(yīng)該能夠的，原理同多臺電腦編寫差很少，不過這樣作不太省心，不折騰了哈。
結(jié)語
文章到這差很少啦！后續(xù)有些小點(diǎn)深刻學(xué)習(xí)后仍是會保持更新的，但愿文章對曾經(jīng)像我同樣的小白有那么一點(diǎn)幫助，技術(shù)有限，不免有紕漏，歡迎指正批評和討論，感謝閱讀！:-)
關(guān)注數(shù)：10億+ 文章數(shù)：10億+
粉絲量：10億+ 點(diǎn)擊量：10億+
微信群管理員請掃描這里
微信群管理員請掃描這里
喜歡本文的朋友，歡迎關(guān)注公眾號 程序員哆啦A夢，收看更多精彩內(nèi)容
點(diǎn)個[在看]，是對小達(dá)最大的支持！
如果覺得這篇文章還不錯，來個【分享、點(diǎn)贊、在看】三連吧，讓更多的人也看
