Hexo+Github搭建博客&各類設置

 

要使用Hexo，須要在你的系統中支持Nodejs以及Git，若是尚未，那就開始安裝吧！

安裝Node.js

下載Node.js 
參考地址：安裝Node.js

安裝Git

下載地址：http://git-scm.com/download/

安裝Hexo

$ cd d:/hexo $ npm install hexo-cli -g $ hexo init blog $ cd blog $ npm install $ hexo g # 或者hexo generate $ hexo s # 或者hexo server，能夠在http://localhost:4000/ 查看

這裏有必要提下Hexo經常使用的幾個命令：

hexo generate (hexo g) 生成靜態文件，會在當前目錄下生成一個新的叫作public的文件夾
hexo server (hexo s) 啓動本地web服務，用於博客的預覽
hexo deploy (hexo d) 部署播客到遠端（好比github, heroku等平臺）

另外還有其餘幾個經常使用命令：

$ hexo new "postName" #新建文章 $ hexo new page "pageName" #新建頁面

經常使用簡寫

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

經常使用組合

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

如今咱們打開http://localhost:4000/ 已經能夠看到一篇內置的blog了。

目前我安裝所用的本地環境以下：(能夠經過hexo -v查看)

 

Hexo主題設置

這裏以主題yilia爲例進行說明。

安裝主題

$ hexo clean $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

啓用主題

修改Hexo目錄下的_config.yml配置文件中的theme屬性，將其設置爲yilia。

更新主題

$ cd themes/yilia $ git pull $ hexo g # 生成 $ hexo s # 啓動本地web服務器

如今打開http://localhost:4000/ ，會看到咱們已經應用了一個新的主題。

Github Pages設置

什麼是Github Pages

GitHub Pages 本用於介紹託管在GitHub的項目，不過，因爲他的空間免費穩定，用來作搭建一個博客再好不過了。

每一個賬號只能有一個倉庫來存放我的主頁，並且倉庫的名字必須是username/username.github.io，這是特殊的命名約定。你能夠經過http://username.github.io 來訪問你的我的主頁。

這裏特別提醒一下，須要注意的我的主頁的網站內容是在master分支下的。

建立本身的Github Pages

註冊GitHub及使用Github Pages的過程已經有不少文章講過，在此再也不詳述，能夠參考：

一步步在GitHub上建立博客主頁 全系列

如何搭建一個獨立博客——簡明Github Pages與Hexo教程

在這裏我建立了一個github repo叫作 jiji262.github.io. 建立完成以後，須要有一次提交(git commit)操做，而後就能夠經過連接http://jiji262.github.io/ 訪問了。（如今尚未內容，彆着急）

部署Hexo到Github Pages

這一步恐怕是最關鍵的一步了，讓咱們把在本地web環境下預覽到的博客部署到github上，而後就能夠直接經過http://jiji262.github.io/訪問了。不過不少教程文章對這個步驟語焉不詳，這裏着重說下。

首先須要明白所謂部署到github的原理。

以前步驟中在Github上建立的那個特別的repo（jiji262.github.io）一個最大的特色就是其master中的html靜態文件，能夠經過連接http://jiji262.github.io來直接訪問。
Hexo -g 會生成一個靜態網站（第一次會生成一個public目錄），這個靜態文件能夠直接訪問。
須要將hexo生成的靜態網站，提交(git commit)到github上。

明白了原理，怎麼作天然就清晰了。

使用hexo deploy部署

hexo deploy能夠部署到不少平臺，具體能夠參考這個連接. 若是部署到github，須要在配置文件_config.xml中做以下修改：

  type: git

  repo: git@github.com:jiji262/jiji262.github.io.git

  branch: master

而後在命令行中執行

hexo d

便可完成部署。

注意須要提早安裝一個擴展：

$ npm install hexo-deployer-git --save

使用git命令行部署

不幸的是，上述命令雖然簡單方便，可是偶爾會有莫名其妙的問題出現，所以，咱們也能夠追本溯源，使用git命令來完成部署的工做。

克隆倉庫

$ cd d:/hexo/blog $ git clone https://github.com/jiji262/jiji262.github.io.git .deploy/jiji262.github.io

將咱們以前建立的repo克隆到本地，新建一個目錄叫作.deploy用於存放克隆的代碼。

建立一個deploy腳本文件

hexo generate

cp -R public/* .deploy/jiji262.github.io

cd .deploy/jiji262.github.io

git add .

git commit -m 「update」

git push origin master

簡單解釋一下，hexo generate生成public文件夾下的新內容，而後將其拷貝至jiji262.github.io的git目錄下，而後使用git commit命令提交代碼到jiji262.github.io這個repo的master branch上。

須要部署的時候，執行這段腳本就能夠了（好比能夠將其保存爲deploy.sh）。執行過程當中可能須要讓你輸入Github帳戶的用戶名及密碼，按照提示操做便可。

Hexo 主題配置

每一個不一樣的主題會須要不一樣的配置，主題配置文件在主題目錄下的_config.yml。以咱們使用的yilia主題爲例，其提供以下的配置項（themeyilia_config.yml）：

# Headermenu:

  主頁: /

  全部文章: /archives

  # 隨筆: /tags/隨筆# SubNavsubnav:

  github: "#"weibo: "#"rss: "#"zhihu: "#"#douban: "#"#mail: "#"#facebook: "#"#google: "#"#twitter: "#"#linkedin: "#"rss: /atom.xml

​

# Contentexcerpt_link: more

fancybox: truemathjax: true# Miscellaneousgoogle_analytics: ''favicon: /favicon.png

#你的頭像urlavatar: ""#是否開啓分享share: true#是否開啓多說評論，填寫你在多說申請的項目名稱 duoshuo: duoshuo-key#若使用disqus，請在博客config文件中填寫disqus_shortname，並關閉多說評論duoshuo: true#是否開啓雲標籤tagcloud: true#是否開啓友情連接#不開啓——#friends: false#是否開啓「關於我」。#不開啓——#aboutme: false#開啓——aboutme: 我是誰，我從哪裏來，我到哪裏去？我就是我，是顏色不同的吃貨…

 

其餘高級使用技巧

綁定獨立域名

購買域名
在你的域名註冊提供商那裏配置DNS解析，獲取GitHub的IP地址點擊，進入source目錄下，添加CNAME文件

$ cd source/ $ touch CNAME $ vim CNAME # 輸入你的域名 $ git add CNAME $ git commit -m "add CNAME"

使用圖牀

使用七牛雲存儲
本身在github上搭建的圖牀：http://jiji262.github.io/qiniuimgbed/ ，須要首先註冊七牛帳號使用。

添加插件

添加sitemap和feed插件

$ npm install hexo-generator-feed $ npm install hexo-generator-sitemap

修改_config.yml，增長如下內容

# ExtensionsPlugins:

- hexo-generator-feed

- hexo-generator-sitemap

#Feed Atomfeed:

  type: atom

  path: atom.xml

  limit: 20

​

#sitemapsitemap:

  path: sitemap.xml

 

配完以後，就能夠訪問http://jiji262.github.io/atom.xml和http://jiji262.github.io/sitemap.xml，發現這兩個文件已經成功生成了。

添加404公益頁面

GitHub Pages有提供製做404頁面的指引：Custom 404 Pages。

直接在根目錄下建立本身的404.html或者404.md就能夠。可是自定義404頁面僅對綁定頂級域名的項目才起做用，GitHub默認分配的二級域名是不起做用的，使用hexo server在本機調試也是不起做用的。

推薦使用騰訊公益404。

添加about頁面

$ hexo new page "about"

以後在sourceaboutindex.md目錄下會生成一個index.md文件，打開輸入我的信息便可，若是想要添加版權信息，能夠在文件末尾添加：

 

<div style="font-size:12px;border-bottom: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; BACKGROUND: #f6f6f6; HEIGHT: 120px; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: #ddd 1px solid"><div style="MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 5px; MARGIN-RIGHT: 10px"><IMG alt="" src="https://avatars1.githubusercontent.com/u/168751?v=3&s=140" width=90 height=100></div><div style="LINE-HEIGHT: 200%; MARGIN-TOP: 10px; COLOR: #000000">

本文連接：<a href="<%= post.link %>"><%= post.title %></a> <br/>

做者： 

<a href="http://jiji262.github.io/">令狐蔥</a> <br/>出處： 

<a href="http://jiji262.github.io/">http://jiji262.github.io/</a><br/>本文基於<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 知識共享署名-相同方式共享 4.0 </a>

國際許可協議發佈，歡迎轉載，演繹或用於商業目的，可是必須保留本文的署名 

<a href="http://jiji262.github.io/">令狐蔥</a>及連接。

</div></div>

添加Fork me on Github

獲取代碼，選擇你喜歡的代碼添加到hexo/themes/yilia/layout/layout.ejs的末尾便可，注意要將代碼裏的you改爲你的Github帳號名。

添加支付寶捐贈按鈕及二維碼支付

支付寶捐贈按鈕

在D:hexothemesyilialayout_widget目錄下新建一個zhifubao.ejs文件，內容以下

<p class="asidetitle">打賞他</p><div><form action="https://shenghuo.alipay.com/send/payment/fill.htm" method="POST" target="_blank" accept-charset="GBK"><br/><input name="optEmail" type="hidden" value="your 支付寶帳號" /><input name="payAmount" type="hidden" value="默認捐贈金額(元)" /><input id="title" name="title" type="hidden" value="博主，打賞你的！" /><input name="memo" type="hidden" value="你Y加油，繼續寫博客！" /><input name="pay" type="image" value="轉帳" src="http://7xig3q.com1.z0.glb.clouddn.com/alipay-donate-website.png" /></form></div>

添加完該文件以後，要在D:/hexo/themes/yilia/_config.yml文件中啓用，以下所示，添加zhifubao

widgets: - category - tag - links - tagcloud - zhifubao - rss

二維碼捐贈

首先須要到這裏獲取你的支付寶帳戶的二維碼圖片，支付寶提供了自定義功能，能夠添加自定義文字。

個人二維碼掃描捐贈添加在about頁面，固然你也能夠添加到其它頁面，在D:hexoblogsourceabout下有index.md，打開，在適當位置添加

<center>

歡迎您捐贈本站，您的支持是我最大的動力！

![][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]

</center><br/>

<center>可讓圖片居中顯示，注意將圖片連接地址換成你的便可。

添加百度站內搜索

點擊進入，點擊其它工具->站內檢索->如今使用->新建搜索引擎->查看代碼，將代碼裏的id值複製，打開/d/hexo/themes/jacman/_config.xml，配置成以下便可。

baidu_search:     ## http://zn.baidu.com/enable: trueid: "1433674487421172828" ## e.g. "783281470518440642" for your baidu search idsite: http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default site

使用不蒜子添加訪客統計

詳情參考搞定你的網站計數，具體作法很簡單，就是在你的themes/your themes/layout/_partial/footer.ejs底部加入這段腳本

 

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

而後在<p class="copyright"></p>中間添加以下統計信息便可。本站總訪問量 <span id="busuanzi_value_site_pv"></span> 次, 訪客數 <span id="busuanzi_value_site_uv"></span> 人次, 本文總閱讀量 <span id="busuanzi_value_page_pv"></span> 次

不蒜子的官方服務網站是不蒜子，目前最大的弊端就是不開放註冊，因此對於運行了一段時間的網站，不蒜子的數據都是從1開始，沒辦法設置，只有等後期開放註冊以後，登入網站才能對統計計數進行設置

在Hexo中使用暢言評論系統

修改themes\landscape\layout\_partial\article.ejs模板

 

<% if (!index && post.comments && config.disqus_shortname){ %>

 <section id="comments">

   <div id="disqus_thread">

     <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

   </div>

 </section>

 <% } %>

 

<% if (!index && post.comments && config.disqus_shortname){ %>

 <section id="comments">

   <div id="disqus_thread">

     <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

   </div>

 </section>

 <% } %>

<% if (!index && post.comments && config.disqus_shortname){ %>

 <section id="comments">

   <div id="disqus_thread">

     <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

   </div>

 </section>

 <% } %>

 

  改成：

 

<% if (!index && post.comments){ %>

  <section id="comments">

<!--高速版，加載速度快，使用前需測試頁面的兼容性-->

<div id="SOHUCS" sid="<%= page.title %>"></div>

<script>

  (function(){

    var appid = '你的APP ID',

    conf = '你的APP KEY';

    var doc = document,

    s = doc.createElement('script'),

    h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement;

    s.type = 'text/javascript';

    s.charset = 'utf-8';

    s.src =  'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid;

    h.insertBefore(s,h.firstChild);

    window.SCS_NO_IFRAME = true;

  })()

</script>    

  </section>

  <% } %>

上面的APP ID和APP KEY是在暢言設置中獲得，在每篇文章開頭的front-matter中添加一句comments: true，而後刷新就能夠看到暢言評論框