mac 搭建基於Hexo-Github的Blog

GitHubPages + Hexo：免費，使用簡單，使用者衆多

博客搭建javascript

建立 GitHub 倉庫

注意 Respository name 中必定要輸入：你的用戶名.github.io其餘地方不用修改，而後直接點」Create repository「按鈕完成建立便可

安裝博客須要的框架

安裝 Homebrew

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"css

查詢Homebrew是否安裝成功的命令

$ brew -vhtml

安裝 git

$ brew install gitjava

查詢git是否安裝成功的命令

$ git --versionnode

安裝 node.js

$ brew install nodegit

查詢node是否安裝成功的命令

$ node -vgithub

安裝 hexo

$ npm install -g hexoweb

查詢hexo是否安裝成功的命令

$ hexo -v 3. 安裝博客相關插件chrome

自動部署到Github上的插件

$ npm install hexo-deployer-git --savenpm

安裝atom生成插件，便於感興趣的小夥伴們訂閱(RSS訂閱)

$ npm install hexo-generator-feed --save 而後在本地Blog根目錄下的_config.yml文件中，添加如下配置

# Extensions
## Plugins: http://hexo.io/plugins/
#RSS訂閱
plugin: -hexo-generator-feed
#Feed Atom
feed:
     type: atom
     path: atom.xml
     limit: 20
複製代碼

在主題目錄下的_config.yml目錄下，添加以下配置 rss: /atom.xml

安裝博客首頁生成插件

$ npm install hexo-generator-index --save

安裝tag生成插件

$ npm install hexo-generator-tag --save 到此爲止，安裝完畢 4. 建立博客、調試、發佈

$ hexo init Blog 執行成功後，會建立出一個名爲Blog的文件夾

撰寫博客內容

cd到Blog文件夾下，執行命令 $ hexo new firstBlog 在Blog/source/_posts中就會新建一個firstBlog.md的文件，而後你就能夠編輯你的博客內容了，Visual Studio Code編輯器支持預覽，還能夠和印象筆記同步

本地調試

$ sudo hexo server 或 $ sudo hexo s 而後能夠訪問http://localhost:4000來查看結果

安裝發佈插件

在博客文件夾運行下面命令 $ npm install hexo-deployer-git --save 而後在_config.yml文件修改發佈的配置，最後一行改成（注意替換yourusername）

# Site
title: 博客的名字
subtitle: 博客副標題
description: 博客描述
author: 博客做者
language: zh-Hans
theme: next //安裝的主題名稱
deploy:
  type: git  //使用Git 發佈
  repo: https://github.com/yourusername/yourusername.github.com.git  //本身的Github倉庫地址
  branch: master
複製代碼

運行生成發佈

$ sudo hexo g
$ sudo hexo d
複製代碼

若是改動了站點的源碼，須要在發佈以前

$ sudo hexo clean

若是成功了就能夠經過yourusername.github.com或者yourusername.github.io來訪問你的博客了

配置博客分類內容

新增資源分類頁面

hexo new page about
INFO  Created: ~/blog/source/about/index.md
// 打開修改成以下
---
title: about
date: 2016-09-17 13:21:20
tags: 代碼庫        // 標籤
comment: false   // 添加這行關閉評論
---
here is something about me
複製代碼

新添加的菜單須要翻譯對應的中文

打開\themes\next\languages文件夾，建立主站配置語言的對應文件，如：zh-Hans.yml 6. 自定義博客

更換主題

若是你對默認的主題不滿意，能夠經過克隆的方式，把別人的主題克隆到項目"/themes"路徑下，喵神的主題在這裏，Hexo也有更多主題，好比使用這一套 git clone https://github.com/iissnan/hexo-theme-next.git themes/next 而後在blog/themes文件夾下，會看到一個next文件夾，在next中有一個_config.yml文件，它就是主題配置文件，這裏略過設置詳情；要設置博客主題的話，仍是要回到根目錄下(Blog文件夾下)的_config.yml文件中，將theme屬性由landscape修改成next，還有注意配置的鍵值之間必定要有空格。更多設置修改並保存以後，咱們再執行命令

$ hexo g
$ hexo d
複製代碼

執行完畢之後，就能夠在本地或者git上看到博客的新主題了，更多的主題能夠參考知乎

設置網頁瀏覽次數

打開themes/你的主題/layout/_partial/footer.ejs添加便可

# 腳本
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

# 標籤
# pv的方式，單個用戶連續點擊n篇文章，記錄n次訪問量
<span id="busuanzi_container_site_pv">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
# uv的方式，單個用戶連續點擊n篇文章，只記錄1次訪客數
<span id="busuanzi_container_site_uv">
 	總訪客數<span id="busuanzi_value_site_uv"></span>人
</span>
複製代碼

評論功能

使用韓國來必力評論，須要註冊帳號詳見官網在主題配置文件下添加 page_comment: true 在\themes\random\layout\_partial文件夾中新建livere.ejs文件並添加以下代碼

<section class="livere" id="comments">
    <!-- 來必力City版安裝代碼 -->
    <div id="lv-container" data-id="city" data-uid="MTAyM***註冊成功官方返回的uid****xNzkwMw==">
      <script type="text/javascript">
       (function(d, s) {
           var j, e = d.getElementsByTagName(s)[0];

           if (typeof LivereTower === 'function') { return; }

           j = d.createElement(s);
           j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
           j.async = true;

           e.parentNode.insertBefore(j, e);
       })(document, 'script');
      </script>
    <noscript> 爲正常使用來必力評論功能請激活JavaScript</noscript>
    </div>
    <!-- City版安裝代碼已完成 -->
</section>
複製代碼

在\themes\random\layout\post.ejs文件中添加或修改以下代碼

<% if (page.comment || theme.page_comment) { %>
  <%- partial('_partial/livere',{}) %>
<% } %>
複製代碼

頂部加載條

在\themes\random\layout\_partial head.swig或head.ejs文件中添加以下代碼

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
  <style>
      .pace .pace-progress {
          background: #1E92FB; /*進度條顏色*/
          height: 3px;
      }
      .pace .pace-progress-inner {
           box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*陰影顏色*/
      }
      .pace .pace-activity {
          border-top-color: #1E92FB;    /*上邊框顏色*/
          border-left-color: #1E92FB;    /*左邊框顏色*/
      }
  </style>
複製代碼

安全運行天數

在\themes\random\layout\_partial footer.swig或footer.ejs頁腳部分添加以下代碼

# 標籤
<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span>
# 腳本
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("07/08/2018 12:00:00");//此處修改你的建站時間或者網站上線時間 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全運行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒"; 
    } 
    setInterval("createtime()",250);
</script>
複製代碼

在每篇文章末尾統一添加「本文結束」標記

接着打開\themes\vno\layout\post.ejs文件，在post-body以後， post-footer以前添加以下代碼

<div>
    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
</div>  
複製代碼

添加打賞功能，使用iframe嵌入打賞

把下面代碼添加到你想要的位置，通常是在<article>標籤內，如\themes\vno\layout\post.ejs的

標籤內

<iframe src="https://gsl201600.github.io/RewardCode" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

把該項目添加到你的網站，修改相關參數爲你的打賞碼，便可實現項目地址

在Hexo博客上添加可愛的Live 2D模型

安裝npm包 $ npm install --save hexo-helper-live2d 而後在Blog的配置文件_config.yml中添加以下配置，詳細配置能夠參考文檔

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
複製代碼

而後下載模型，模型名稱能夠到這裏參考，一些模型的預覽能夠在這裏 $ npm install live2d-widget-model-shizuku 下載完以後，在Blog根目錄中新建文件夾live2d_models，而後在node_modules文件夾中找到剛剛下載的live2d模型，將其複製到live2d_models中，而後編輯配置文件中的model.use項，將其修改成live2d_models文件夾中的模型文件夾名稱一切就緒以後，用hexo server命令啓動服務器，稍等一下就能夠看到右下角出現了一個可愛的萌萌噠的妹紙！不過由於全部東西都在Github上託管的緣由，可能Live2D不能立刻加載出來

Hexo操做指令一覽

$ hexo clean      #清理緩存
$ hexo generate   #生成靜態文件
$ hexo server     #啓動本地服務器
$ hexo deploy    #部署
或者
$ hexo clean      #清理緩存
$ hexo g          #生成靜態文件
$ hexo s          #啓動本地服務器
$ hexo d         #部署
複製代碼

homebrew操做指令一覽

// 安裝 homebrew
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// 卸載 homebrew
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
// 查看版本
$ brew -v
// 下載軟件：brew install 軟件名
如：$ brew install htop, 安裝htop
// 如須要圖形安裝的軟件 要加cask
如：$ brew cask install google-chrome
// 卸載軟件:brew uninstall 軟件名
如: $ brew cask uninstall google-chrome
// 軟件搜索:brew search 軟件名
如: $ brew search google
// 列出已安裝的包
$ brew list
// 查看軟件相關信息:brew info 軟件名
如：$ brew info google-chrome
// 刪除 Homebrew下載的包
$ brew cleanup
// 更新 Homebrew
$ brew update
複製代碼

附：給Hexo搭建的博客增長百度和谷歌的搜索引擎驗證

驗證站點

搜索引擎驗證的方法有好幾種，下面選擇 HTML標籤驗證 驗證方法，其餘的方法有興趣能夠本身去試一下

首先打開百度搜索引擎驗證，點擊 添加網站 ，輸入本身的 博客 地址
輸完後選擇 HTML標籤驗證 ，而後將下方的 meta 代碼複製下來，網頁先不要關

從新開一個頁面，打開谷歌搜索引擎驗證，點擊添加屬性，同樣輸入本身的博客地址
輸完後選擇備用方法下的HTML 標記，而後將下方的meta代碼複製下來，網頁也不要關

打開本地博客主題下的layout/_partial 文件夾，有一個名爲head的文件，使用HTML編輯器打開，將剛纔複製的兩句meta代碼粘貼進去
保存文件後，輸入如下命令將博客從新部署到GitHub服務器

hexo clean && hexo g && hexo d

而後分別點擊剛纔百度、谷歌驗證頁面的驗證按鈕進行站點驗證

生成站點地圖

打開終端cd到本地博客目錄下，輸入如下命令安裝sitmap插件

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

打開本地博客目錄下的_config.yml文件，修改url參數爲你博客的首頁地址，這樣是爲了保證能正確生成sitemap.xml文件中的地址

url: http://jonzzs.cn # 修改爲你博客的首頁地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
複製代碼

添加如下配置

# 自動生成sitemap
sitemap: 
  path: sitemap.xml
baidusitemap: 
  path: baidusitemap.xml
複製代碼

輸入如下命令從新部署博客

hexo clean && hexo g && hexo d 3. 將站點地圖提交谷歌

打開谷歌站點控制檯進入站點控制檯，先點擊測試站點地圖，測試經過後再點擊提交站點地圖

百度主動推送

首先，在Hexo根目錄下，安裝本插件：$ npm install hexo-baidu-url-submit --save 而後，一樣在根目錄下，把如下內容配置到_config.yml文件中:

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

其次，記得查看_config.ym文件中url的值，必須包含是百度站長平臺註冊的域名，好比:

# URL
url: http://www.hui-wang.info
root: /
permalink: :year/:month/:day/:title/
複製代碼

最後，加入新的deployer:

deploy:
- type: git ## 這是原來的deployer
  repo: https://github.com/yourusername/yourusername.github.com.git  //本身的Github倉庫地址
  branch: master
- type: baidu_url_submitter ## 這是新加的
複製代碼

執行hexo deploy的時候，新的鏈接就會被推送了

百度自動推送

安裝自動推送JS代碼的網頁，在頁面被訪問時，頁面URL將當即被推送給百度，修改主題目錄下的layout/post.swig文件，末尾添加自動推送代碼，代碼以下

<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>
複製代碼

用site:域名測試是否成功

附：個人博客地址