前言
博客有第三方平臺(tái)，也可以自建，比較早的有博客園、CSDN，近幾年新興的也比較多諸如：WordPress、segmentFault、簡書、掘金、知乎專欄、Github Page 等等。
這次我要說的就是 Github Page + Hexo 搭建個(gè)人博客的方式！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)介紹。
下面就開始吧~
準(zhǔn)備環(huán)境
準(zhǔn)備 node 和 git 環(huán)境，
首先，安裝 NodeJS，因?yàn)?Hexo 是基于 Node.js 驅(qū)動(dòng)的一款博客框架，相比起前面提到過的 Jekyll 框架更快更簡潔，因?yàn)樘斐W(wǎng)絡(luò)被墻的原因嘗試過安裝 Jekyll 失敗而放棄了。
然后，安裝 git，一個(gè)分布式版本控制系統(tǒng)，用于項(xiàng)目的版本控制管理，作者是 Linux 之父。如果 Git 還不熟悉可以參考廖雪峰大神的 Git 教程。
兩個(gè)工具不同的平臺(tái)安裝方法有所不一樣，可自行了解按步驟安裝，這里不詳述了。安裝成功后打開git bash（Windowns）或者終端（Mac），下方中將統(tǒng)一稱為命令行。
在命令行中輸入相應(yīng)命令驗(yàn)證是否成功，如果成功會(huì)有相應(yīng)的版本號。
git version
node -v
npm -v
安裝 Hexo
如果以上環(huán)境準(zhǔn)備好了就可以使用 npm 開始安裝 Hexo 了。也可查看 Hexo 的詳細(xì)文檔。
在命令行輸入執(zhí)行以下命令：
npm install -g hexo-cli
安裝 Hexo 完成后，再執(zhí)行下列命令，Hexo 將會(huì)在指定文件夾中新建所需要的文件。
hexo init myBlog
cd myBlog
npm install
新建完成后，指定文件夾的目錄如下：
.
├── _config.yml # 網(wǎng)站的配置信息，您可以在此配置大部分的參數(shù)。
├── package.json
├── scaffolds # 模版文件夾
├── source # 資源文件夾，除 _posts 文件，其他以下劃線_開頭的文件或者文件夾不會(huì)被編譯打包到public文件夾
| ├── _drafts # 草稿文件
| └── _posts # 文章Markdowm文件
└── themes # 主題文件夾
好了，如果上面的命令都沒報(bào)錯(cuò)的話，就恭喜了，運(yùn)行 hexo s 命令，其中 s 是 server 的縮寫，在瀏覽器中輸入 http://localhost:4000 回車就可以預(yù)覽效果了。
hexo s
至此，你本地的博客就已經(jīng)搭建成功，接下來就是部署到 Github Page 了。
注冊 Github
首先如果你還沒有 Github 賬號的先注冊一個(gè)，詳情參考百度注冊教程。注冊好GitHub后就 new repository 創(chuàng)建一個(gè)新的倉庫，注意點(diǎn)來了，Github 僅能使用一個(gè)同名倉庫的代碼托管一個(gè)靜態(tài)站點(diǎn)，這個(gè)網(wǎng)上很多教程沒說到的。
配置 SSH key
要使用 git 工具首先要配置一下SSH key，為部署本地博客到 Github 做準(zhǔn)備。
打開命令行輸入 cd ~/.ssh 如果沒報(bào)錯(cuò)或者提示什么的說明就是以前生成過的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本機(jī)上的 SSH key 了。
cat ~/.ssh/id_rsa.pub
如果之前沒有創(chuàng)建，則執(zhí)行以下命令全局配置一下本地賬戶：
git config --global user.name "用戶名"
git config --global user.email "郵箱地址"
然后開始生成密鑰 SSH key
ssh-keygen -t rsa -C '上面的郵箱'
按照提示完成三次回車，即可生成 ssh key。通過查看 ~/.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)容，則證明添加成功。
ssh -T git@github.com
到這還沒完，還要登錄 Github 上添加剛剛生成的SSH key，按以下步驟添加：
創(chuàng)建一個(gè)新的 SSH key, 標(biāo)題隨便，key 就填剛才生成那個(gè)，確認(rèn)創(chuàng)建，搞定??！這樣在你的 SSH keys 列表里就會(huì)看到你剛剛添加的密鑰。
部署到 Github
此時(shí)，本地和Github的工作做得差不了，是時(shí)候把它們兩個(gè)連接起來了。你也可以查看官網(wǎng)的部署教程。
先不著急，部署之前還需要修改配置和安裝部署插件。
第一：打開項(xiàng)目根目錄下的_config.yml 配置文件配置參數(shù)。拉到文件末尾，填上如下配置（也可同時(shí)部署到多個(gè)倉庫，后面再說）：
第二：要安裝一個(gè)部署插件 hexo-deployer-git。
npm install hexo-deployer-git --save
最后執(zhí)行以下命令就可以部署上傳啦，以下 g 是 generate 縮寫，d 是 deploy 縮寫：
hexo g -d
稍等一會(huì)，在瀏覽器訪問網(wǎng)址： https://你的用戶名.github.io 就會(huì)看到你的博客啦??！
開始寫作
博客搭好了，就開始寫文章了，這里簡單介紹一下，詳細(xì)的文檔可以看 hexo 官網(wǎng)。
新建文章，輸入以下命令即可
hexo new '文章標(biāo)題'
執(zhí)行完成后可以在 source文件夾里的_posts 下看到一個(gè)“文章標(biāo)題.md”的文章文件啦。.md 就是 Markdown 格式的文件，具體用法可以在網(wǎng)上找一下，語法還是比較簡單的。
再執(zhí)行一下以下命令
hexo g
hexo s
就可以看到你的文章在博客顯示了，以下就是剛剛
最后，只要部署到你的 Github 上就可以了！
hexo clean
hexo g -d
部署前最好能先執(zhí)行一下 hexo clean 命令，清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)。在某些情況（尤其是更換主題后），如果發(fā)現(xiàn)您對站點(diǎn)的更改無論如何也不生效，您可能需要運(yùn)行該命令。
另外，如果你的文章暫時(shí)不發(fā)布可以先保存在草稿里面。生成草稿的方法和文章差不多 hexo new draft “文章標(biāo)題”，生成后會(huì)在 source文件夾里的_drafts 里看到你的草稿文章。當(dāng)你想發(fā)布時(shí)只要執(zhí)行 publish 命令即可發(fā)布到博客。
hexo publish [layout] <filename>
SEO優(yōu)化
接下來說下百度收錄，據(jù)說 Github 屏蔽了百度的蜘蛛，也有的人說沒，具體不是很清楚，Github 在2015的時(shí)候遭受了史上最大規(guī)模的DDoS攻擊，有國外媒體指百度干的，具體不得而知啦，但感覺百度收錄 Github 確認(rèn)是比較難，時(shí)間也比較長，所以還是優(yōu)化一下吧。
代碼同時(shí)部署到 coding
那有什么方法呢？就是把博客站點(diǎn)同時(shí)托管在國內(nèi)的 coding 平臺(tái)上，這樣收錄就會(huì)容易很多，同時(shí)又不影響 Github 上的代碼，coding 是國內(nèi)的一個(gè)提供代碼托管服務(wù)的平臺(tái)，跟 Github 差不多。使用方法也和 Github 差不多，下面我就具體說一下怎么把代碼同時(shí)部署到 coding 和 Github 上面，讓百度更容易收錄。
注冊、登錄 coding 后創(chuàng)建一個(gè)新的倉庫，注意點(diǎn)就是新建項(xiàng)目的時(shí)候命名規(guī)則和 Github 上的一樣，就是 用戶名.coding.me 可以看下圖，還有記得別忘了添加 SSH key，接著到你的域名解析控制臺(tái)修改添加兩條 CNAME 記錄指向你的 Page 地址，看下圖，注意看記錄值哦，換成你自己的。
最后呢修改根目錄下的 _config.yml 配置文件中的部署配置，把 coding 的 git 地址添加進(jìn)去就行了
最后執(zhí)行部署命令
hexo clean
hexo g -d
這時(shí)就可以在 coding 倉庫中看到你提交部署的代碼了，同時(shí) 你的用戶名.coding.me 也可以訪問你的博客站點(diǎn)了，這里 Github 和 coding 的代碼是同時(shí)更新的，互不影響。而綁定的域名解析可能需要稍等一會(huì)才會(huì)生效。
百度提交鏈接
部署到 coding 后也不是百度就可以收錄的，我們還需要繼續(xù)優(yōu)化。如果在百度搜索輸入 site:你的域名 如果出現(xiàn)以下的效果證明就是網(wǎng)站還沒被百度收錄的，我們現(xiàn)在點(diǎn)下面的提交網(wǎng)址，進(jìn)入百度站長工具提交。
百度站長平臺(tái)添加網(wǎng)站管理
注冊百度站長工具，并添加網(wǎng)站，添加網(wǎng)站的過程有三步，主要操作集中在最后一步的網(wǎng)站驗(yàn)證方式里，我選擇的是 HTML標(biāo)簽驗(yàn)證，按下面使用方法添加代碼到你的網(wǎng)站即可
而使用 next 主題的同學(xué)可以直接在主題的配置文件下搜索 baidu_site_verification 后面填上第三步中 meta 標(biāo)簽中 content 的值就可以,最后點(diǎn)完成驗(yàn)證就可以通過了。
添加sitemap站點(diǎn)地圖
站點(diǎn)地圖包含了你網(wǎng)站上的站點(diǎn)鏈接，方便搜索引擎蜘蛛的抓取工作，搜索蜘蛛會(huì)通過網(wǎng)站地圖中鏈接的深層次爬行，抓取新的內(nèi)容。所以我們要生成 sitemap 文件助于網(wǎng)站優(yōu)化，安裝生成插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
接著在博客根目錄下的配置文件里添加對應(yīng)配置項(xiàng)
# sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
注意縮進(jìn)，要不會(huì)編譯報(bào)錯(cuò)
還要修改一個(gè)根目錄配置文件下的URL，url 一項(xiàng)的值改成你在百度站長平臺(tái)里面添加的自己站點(diǎn)的地址，這樣生成的 sitemap.xml 文件里的 url 才是你站點(diǎn)的地址，看下圖
添加蜘蛛?yún)f(xié)議robots.txt
增加 robots.txt 文件，就是蜘蛛?yún)f(xié)議，新建 robots.txt 文件添加以下內(nèi)容，把 robots.txt 放在 /source 文件下，我們前面說過 /source 目錄下的文件是會(huì)被打包上傳的。
# 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，執(zhí)行 hexo g -d 重新生成文件并提交后，在public目錄下會(huì)生成對應(yīng)的xml文件?？梢酝ㄟ^ http://xxx.com/sitemap.xml 和 http://xxx.com/baidusitemap.xml 訪問到 sitemap 文件，通過 http://xxx.com/robots.txt 訪問到 robots.txt 文件。
可以到百度站長檢測一下 robots.txt 文件是否生效
自動(dòng)推送
百度有自動(dòng)推送、主動(dòng)推送、sitemap、手動(dòng)提交幾種方式。
自動(dòng)推送是輕量級鏈接提交組件，將自動(dòng)推送的JS代碼放置在站點(diǎn)每一個(gè)頁面源代碼中，當(dāng)頁面被訪問時(shí)，頁面鏈接會(huì)自動(dòng)推送給百度，有利于新頁面更快被百度發(fā)現(xiàn)。怎么安裝呢？
如果你的是 next 主題，只要打開主題配置文件搜索找到 baidu_push 設(shè)置為 true 即可
如果你使用的不是 next 主題，也可以手動(dòng)把以下代碼粘貼到你的站點(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>
主動(dòng)推送
這里利用一個(gè)第三方插件 hexo-baidu-url-submit 進(jìn)行主動(dòng)推送
安裝
npm install hexo-baidu-url-submit --save
添加想關(guān)配置到根目錄下的配置文件里
# 百度鏈接提交-主動(dòng)推送配置
baidu_url_submit:
count: 3 ## 提交最新的一個(gè)鏈接
host: pojian.xyz ## 在百度站長平臺(tái)中注冊的域名
token: 3GIEYsuq5ZTkvDBm ## 請注意這是您的秘鑰，所以請不要把博客源代碼發(fā)布在公眾倉庫里!
path: baidu_urls.txt ## 文本文檔的地址， 新鏈接會(huì)保存在此文本文檔里
添加新的部署配置，注意這里跟之前有點(diǎn)不一樣，要在 type 前添加一個(gè)破折號 -
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
最后，執(zhí)行 hexo deploy 的時(shí)候，新的連接就會(huì)被推送了。
實(shí)現(xiàn)原理
新鏈接的產(chǎn)生， hexo generate 會(huì)產(chǎn)生一個(gè)文本文件，里面包含最新的鏈接
新鏈接的提交， hexo deploy 會(huì)從上述文件中讀取鏈接，提交至百度搜索引擎
手動(dòng)推送
就是直接直接把你需要提交的鏈接直接使用手動(dòng)的方式填寫提交就可以。
最后你可以看到是否已經(jīng)被百度成功收錄了
如果抓取成功了就證明已經(jīng)被收錄了，好像一般不會(huì)這么快，我的等了兩天左右才抓取得到。
添加百度統(tǒng)計(jì)
添加百度統(tǒng)計(jì)就可以查看你網(wǎng)站相關(guān)的一些數(shù)據(jù)，便于你自己的站點(diǎn)
文章來源：http://www.zghlxwxcb.cn/news/detail-426596.html
多端同步寫作
原理就是利用 Git 的分支功能，比如新建立一個(gè) blog 分支來存放 Hexo 的源文件，而 master 分支則用來放編譯后的靜態(tài)文件，這樣在使用另外一臺(tái)電腦編寫的時(shí)候只要把 blog 分支拉取下來然后進(jìn)行寫作再 push 到分支就可以了。文章來源地址http://www.zghlxwxcb.cn/news/detail-426596.html
到了這里，關(guān)于超詳細(xì)Hexo+Github Page搭建技術(shù)博客教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
