【持續更新】最全Hexo博客搭建+主題優化+插件配置+經常使用操做+錯誤分析

時間  2019-11-08
標籤 持續更新 hexo 博客 搭建 主題 優化 插件 配置 經常 使用 錯誤 分析 简体版
原文   原文鏈接

若是你和我同樣是小白，那麼恭喜你！javascript

看完這篇文章，你也能夠擁有一個這樣的博客啦！css

前言

  1. 歡迎在文末留言，或者點擊加入QQ羣933583982互相交流。
  2. 本文采用 CC BY-NC-SA 4.0 許可協議，轉載請註明出處！
  3. 【持續更新】連接：www.simon96.online/2018/10/12/…

博客搭建

準備環境

  1. Node.js 下載，並安裝。詳細步驟：www.simon96.online/2018/11/10/…html

  2. Git 下載，並安裝。詳細步驟：www.simon96.online/2018/11/10/…java

  3. 安裝Hexo，在命令行（即Git Bash）運行如下命令：node

    npm install -g hexo-clinginx

  4. 初始化Hexo，在命令行（即Git Bash）依次運行如下命令便可：c++

    如下，即存放Hexo初始化文件的路徑， 即站點目錄。git

    $ hexo init <folder>
$ cd <folder>
$ npm install
複製代碼

    新建完成後，在路徑下，會產生這些文件和文件夾：github

    .
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
複製代碼

    注：web

    • hexo相關命令均在站點目錄下，用Git Bash運行。

    • 站點配置文件：站點目錄下的_config.yml。

      ​ 路徑爲<folder>\_config.yml

    • 主題配置文件：站點目錄下的themes文件夾下的，主題文件夾下的_config.yml。

      ​ 路徑爲<folder>\themes\<主題文件夾>\_config.yml

  5. 啓動服務器。在路徑下，命令行（即Git Bash）輸入如下命令，運行便可：

    hexo server

  6. 瀏覽器訪問網址： http://localhost:4000/

至此，您的Hexo博客已經搭建在本地。

實施方案

方案一：GithubPages

  1. 建立Github帳號

  2. 建立倉庫， 倉庫名爲：<Github帳號名稱>.github.io

  3. 將本地Hexo博客推送到GithubPages

    3.1. 安裝hexo-deployer-git插件。在命令行（即Git Bash）運行如下命令便可：

    $ npm install hexo-deployer-git --save
複製代碼

    3.2. 添加SSH key。

    • 建立一個 SSH key 。在命令行（即Git Bash）輸入如下命令， 回車三下便可：

      $ ssh-keygen -t rsa -C "郵箱地址"
複製代碼

    • 添加到 github。 複製密鑰文件內容（路徑形如C:\Users\Administrator\.ssh\id_rsa.pub），粘貼到New SSH Key便可。

    • 測試是否添加成功。在命令行（即Git Bash）依次輸入如下命令，返回「You've successfully authenticated」即成功：

      $ ssh -T git@github.com
$ yes
複製代碼

    3.3. 修改_config.yml（在站點目錄下）。文件末尾修改成：

    # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:<Github帳號名稱>/<Github帳號名稱>.github.io.git
  branch: master
複製代碼

    注意：上面倉庫地址寫ssh地址，不寫http地址。

    3.4. 推送到GithubPages。在命令行（即Git Bash）依次輸入如下命令， 返回INFO Deploy done: git即成功推送：

    $ hexo g
$ hexo d
複製代碼

  4. 等待1分鐘左右，瀏覽器訪問網址： https://<Github帳號名稱>.github.io

至此，您的Hexo博客已經搭建在GithubPages, 域名爲https://<Github帳號名稱>.github.io。

方案二：GithubPages + 域名

在方案一的基礎上，添加自定義域名（您購買的域名）。

  1. 域名解析。

    類型選擇爲 CNAME；

    主機記錄即域名前綴，填寫爲www；

    記錄值填寫爲自定義域名；

    解析線路，TTL 默認便可。

  2. 倉庫設置。

    2.1. 打開博客倉庫設置：https://github.com/<Github帳號名稱>/<Github帳號名稱>.github.io/settings

    2.2. 在Custom domain下，填寫自定義域名，點擊save。

    2.3. 在站點目錄的source文件夾下，建立並打開CNAME.txt，寫入你的域名（如www.simon96.online），保存，並重命名爲CNAME。

  3. 等待10分鐘左右。

    瀏覽器訪問自定義域名。

    至此，您的Hexo博客已經解析到自定義域名，https://<Github帳號名稱>.github.io依然可用。

方案三：GithubPages + CodingPages + 域名

GithubPages 在國內較慢，百度不收錄，而CodingPages 在國外較快。因此在方案二的基礎上，添加CodingPages 。

  1. 建立Coding帳號

  2. 建立倉庫， 倉庫名爲：<Coding帳號名稱>

  3. 進入項目裏『代碼』頁面，點擊『一鍵開啓靜態 Pages』，稍等片刻CodingPages便可部署成功。

  4. 將本地Hexo博客推送到CodingPages

    4.1. 鑑於建立GithubPages 時，已經生成過公鑰。可直接複製密鑰文件內容（路徑形如C:\Users\Administrator\.ssh\id_rsa.pub）， 粘貼到新增公鑰。

    4.2. 測試是否添加成功。在命令行（即Git Bash）依次輸入如下命令，返回「You've successfully authenticated」即成功：

    $ ssh -T git@git.coding.net
$ yes
複製代碼

    4.3. 修改_config.yml（在存放Hexo初始化文件的路徑下）。文件末尾修改成：

    # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repo: git@github.com:<Github帳號名稱>/<Github帳號名稱>.github.io.git
  branch: master
- type: git
  repo: git@git.dev.tencent.com:<Coding帳號名稱>/<Coding帳號名稱>.git
  branch: master
複製代碼

    4.4. 推送到GithubPages。在命令行（即Git Bash）依次輸入如下命令， 返回INFO Deploy done: git即成功推送：

    $ hexo g
$ hexo d
複製代碼

  5. 域名解析

    1. 添加 CNAME 記錄指向 <Coding帳號名稱>.coding.me

      類型選擇爲 CNAME；

      主機記錄即域名前綴，填寫爲www；

      記錄值填寫爲自定義域名；

      解析線路，TTL 默認便可。

    2. 添加 兩條A 記錄指向 192.30.252.153和192.30.252.154

      類型選擇爲 A；

      主機記錄即域名前綴，填寫爲@；

      記錄值填寫爲192.30.252.153和192.30.252.154；

      解析線路，境外或谷歌。

    3. 在『Pages 服務』設置頁（https://dev.tencent.com/u/<Coding帳號名稱>/p/<Coding帳號名稱>/git/pages/settings）中綁定自定義域名。

至此，您的Hexo博客已經解析到自定義域名，https://<Github帳號名稱>.github.io和https://<Coding帳號名稱>.coding.me依然可用。

方案四：雲服務器 + 域名

該方案須要先購買雲服務器和域名。

  1. 在雲服務器安裝Git 和 Nginx。(Git 用於版本管理和部署，Nginx 用於靜態博客託管。)

    登錄root用戶，運行：

    $ yum -y update
$ yum install -y git nginx
複製代碼

  2. Nginx配置

    2.1. 建立文件目錄(用於博客站點文件存放)

    cd /usr/local/
mkdir hexo
chmod 775 -R /usr/local/hexo/
複製代碼

    2.2. 添加 index.html(用於檢測配置 Nginx 是否成功)

    vim /usr/local/hexo/index.html
複製代碼

    添加如下代碼，並保存。

    <!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>Nginx running</p>
  </body>
</html>
複製代碼

    2.3. 配置 Nginx 服務器

    vim /etc/nginx/nginx.conf
複製代碼

    修改server_name和root：

    server {
      listen       80 default_server;
      listen       [::]:80 default_server;
      server_name  www.baidu.com; # 填我的域名 
      root         /usr/local/hexo/;
  }      
複製代碼

    2.4. 啓動nginx服務；

    service nginx start
複製代碼

    2.5. 雲服務器瀏覽器訪問我的域名或IP，若跳轉index.html，則配置完成，不然檢查以上配置。

  3. git配置

    3.1. 建立文件目錄, 用於私人 Git 倉庫搭建, 並更改目錄讀寫權限。

    cd /usr/local/
mkdir hexoRepo
chmod 775 -R /usr/local/hexoRepo/
複製代碼

    3.2. Git 初始化裸庫。

    cd hexoRepo/
git init --bare hexo.git
複製代碼

    3.3. 建立 Git 鉤子(hook)。

    vim /usr/local/hexoRepo/hexo.git/hooks/post-receive
複製代碼

    3.4. 輸入如下信息，用於指定 Git 的源代碼 和 Git 配置文件。

    #!/bin/bash 
git --work-tree=/usr/local/hexo --git-dir=/usr/local/hexoRepo/hexo.git checkout -f
複製代碼

    3.5. 保存並退出後, 給該文件添加可執行權限。

    chmod +x /usr/local/hexoRepo/hexo.git/hooks/post-receive
複製代碼

  4. 本地博客推送到雲服務器

    4.1. 安裝hexo-deployer-git插件。在命令行（即Git Bash）運行如下命令便可：

    $ npm install hexo-deployer-git --save
複製代碼

    4.2. 添加SSH key。

    • 建立一個 SSH key 。在命令行（即Git Bash）輸入如下命令， 回車三下便可：

      $ ssh-keygen -t rsa -C "郵箱地址"
複製代碼

    • 添加到 github。 複製密鑰文件內容（路徑形如C:\Users\Administrator\.ssh\id_rsa.pub），粘貼到New SSH Key便可。

    • 測試是否添加成功。在命令行（即Git Bash）依次輸入如下命令，返回「You've successfully authenticated」即成功：

      $ ssh -T git@github.com
$ yes
複製代碼

    4.3. 修改_config.yml（在站點目錄下）。文件末尾修改成：

    # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: root@xxx.xxx.xxx.xxx:/usr/local/hexoRepo/hexo  //用戶名@域名或 IP 地址:/usr/local/hexoRepo/hexo
  branch: master
複製代碼

    注意：上面倉庫地址寫ssh地址，不寫http地址。

    4.4. 推送到GithubPages。在命令行（即Git Bash）依次輸入如下命令， 返回INFO Deploy done: git即成功推送：

    $ hexo g
$ hexo d
複製代碼

  5. 等待1分鐘左右，瀏覽器訪問我的域名。

    至此，您的Hexo博客已經搭建在雲服務器, 域名爲我的域名。

主題優化

選擇主題

Hexo默認的主題是landscape，推薦如下主題：

  1. snippet
  2. Hiero
  3. JSimple
  4. BlueLake

應用主題

  1. 下載主題
  2. 將下載好的主題文件夾，粘貼到站點目錄的themes下。
  3. 更改站點配置文件_config.yml 的theme字段，爲主題文件夾的名稱：
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: <主題文件夾的名稱>
複製代碼

主題優化

以上主題都有比較詳細的說明文檔，本節主要解決主題優化的常見問題。

主題優化通常包括：

  • 設置「RSS」

  • 添加「標籤」頁面

  • 添加「分類」頁面

  • 設置「字體」

    問題：引用國外字體鏡像較慢。

    解決：能夠改用國內的。將\themes\*\layout_partials\head external-fonts.swig文件中fonts.google.com改爲fonts.lug.ustc.edu.cn。

  • 設置「代碼高亮主題」

  • 側邊欄社交連接

    問題：圖標哪裏找？

    解決：Font Awesome

  • 開啓打賞功能

    問題：微信支付寶二維碼不美觀，規格不一。

    解決：在線生成二維碼

  • 設置友情連接

  • 騰訊公益404頁面

  • 站點創建時間

  • 訂閱微信公衆號

  • 設置「動畫效果」

    問題：慢，須要等待 JavaScript 腳本徹底加載完畢後纔會顯示內容。 解決：將主題配置文件_config.yml中，use_motion字段的值設爲 false 來關閉動畫。

  • 設置「背景動畫」

主題優化還包括：

添加背景圖

在 themes/*/source/css/_custom/custom.styl 中添加以下代碼：

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}
複製代碼
修改Logo字體

在 themes/*/source/css/_custom/custom.styl 中添加以下代碼：

@font-face {
    font-family: Zitiming;
    src: url('/fonts/Zitiming.ttf');
}
.site-title {
    font-size: 40px !important;
	font-family: 'Zitiming' !important;
}
複製代碼

其中字體文件在 themes/next/source/fonts 目錄下，裏面有個 .gitkeep 的隱藏文件，打開寫入你要保留的字體文件，好比個人是就是寫入 Zitiming.ttf ，具體字庫本身從網上下載便可。

修改內容區域的寬度

編輯主題的 source/css/_variables/custom.styl 文件，新增變量：

// 修改爲你指望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px
複製代碼
網站標題欄背景顏色
.site-meta {
  background: $blue; //修改成本身喜歡的顏色
}
複製代碼
自定義鼠標樣式

打開 themes/*/source/css/_custom/custom.styl ,在裏面寫下以下代碼：

// 鼠標樣式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }
複製代碼
文章加密訪問

打開 themes/*/layout/_partials/head.swig文件,在 {% if theme.pace %} 標籤下的 {% endif %} 以前插入代碼：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入密碼') !== '{{ page.password }}'){
                alert('密碼錯誤');
                history.back();
            }
        }
    })();
</script>
複製代碼

寫文章時加上password: *：

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---
複製代碼
實現點擊出現桃心效果
  1. 在/themes/*/source/js/src下新建文件click.js，接着把如下粘貼到click.js文件中。 代碼以下：
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

複製代碼
  1. 在\themes\*\layout\_layout.swig文件末尾添加：
<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

複製代碼
靜態資源壓縮

在站點目錄下：

$ npm install gulp -g
複製代碼

安裝gulp插件：

npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
複製代碼

在 Hexo 站點下新建 gulpfile.js文件，文件內容以下：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 壓縮css文件
gulp.task('minify-css', function() {
  return gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
// 壓縮html文件
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
  .pipe(htmlclean())
  .pipe(htmlmin({
    removeComments: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }))
  .pipe(gulp.dest('./public'))
});
// 壓縮js文件
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 壓縮 public/demo 目錄內圖片
gulp.task('minify-images', function() {
    gulp.src('./public/demo/**/*.*')
        .pipe(imagemin({
           optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
           progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
           interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染
           multipass: false, //類型：Boolean 默認：false 屢次優化svg直到徹底優化
        }))
        .pipe(gulp.dest('./public/uploads'));
});
// 默認任務
gulp.task('default', [
  'minify-html','minify-css','minify-js','minify-images'
]);
複製代碼

只須要每次在執行 generate 命令後執行 gulp 就能夠實現對靜態資源的壓縮，壓縮完成後執行 deploy 命令同步到服務器：

hexo g
gulp
hexo d
複製代碼
修改訪問URL路徑

默認狀況下訪問URL路徑爲：domain/2018/10/18/關於本站,修改成 domain/About/關於本站。 編輯 Hexo 站點下的 _config.yml 文件，修改其中的 permalink字段：

permalink: :category/:title/
複製代碼
博文置頂

  1. 安裝插件

    npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

而後在須要置頂的文章的Front-matter中加上top便可：

---
title: 2018
date: 2018-10-25 16:10:03
top: 10
---

複製代碼
  1. 設置置頂標誌

打開：/themes/*/layout/_macro/post.swig，定位到

，插入如下代碼便可： 

{% if post.top %}
        <i class="fa fa-thumb-tack"></i>
        <font color=7D26CD>置頂</font>
        <span class="post-meta-divider">|</span>
      {% endif %}

複製代碼
在右上角或者左上角實現fork me on github
  1. 選擇樣式GitHub Ribbons,
  2. 修改圖片跳轉連接,將<a href="https://github.com/you">中的連接換爲本身Github連接：
  3. 打開 themes/next/layout/_layout.swig 文件，把代碼複製到<div class="headband"></div>下面。
主頁文章添加邊框陰影效果

打開 themes/*/source/css/_custom/custom.styl ,向裏面加代碼:

// 主頁文章添加陰影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
複製代碼
顯示當前瀏覽進度

修改themes/*/_config.yml，把 false 改成 true：

# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true
複製代碼
建立分類頁

在終端窗口下，定位到 Hexo 站點目錄下，新建：

$ cd <站點目錄>
$ hexo new page categories
複製代碼
加入 廣告

主要有兩種：百度SSP和谷歌Adsense。方法相似：

  1. 註冊，複製廣告代碼

  2. 部署到網站。

    2.1. 新建 theme/*/layout/_custom/google_ad.swig，將 AdSense 上的代碼粘貼進去

    2.2. 頭部。在 theme/*/layout/_custom/head.swig 中也粘貼一份

    2.3. 每篇博客。在 theme/*/layout/post.swig 裏中在但願看到的地方加上：

    {% include '_custom/google_ad.swig' %}

複製代碼

    例如：在 <div id="posts" class="posts-expand"> </div> 中間插入，總代碼以下：

    {% block content %}
  <div id="posts" class="posts-expand">
    {{ post_template.render(page) }}
    {% include '_custom/google_ad.swig' %}
  </div>
{% endblock %}

複製代碼

  3. 等待審覈經過。若是失敗，可再次申請。

添加萌萌噠

  1. 安裝插件

    npm install --save hexo-helper-live2d

複製代碼

  2. 複製你喜歡的模型名字：

    Epsilon2.1

    img

    Gantzert_Felixander

    img

    haru

    img

    miku

    img

    ni-j

    img

    nico

    img

    nietzche

    img

    nipsilon

    img

    nito

    img

    shizuku

    img

    tsumiki

    img

    wanko

    img

    z16

    img

    hibiki

    img

    koharu

    img

    haruto

    img

    Unitychan

    img

    tororo

    img

    hijiki

    img

  3. 將如下代碼添加到主題配置文件_config.yml，修改<你喜歡的模型名字>：

    live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜歡的模型名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

複製代碼

  4. 建配置文件

    4.1. 在站點目錄下建文件夾live2d_models，

    4.2. 再在live2d_models下建文件夾<你喜歡的模型名字>,

    4.3. 再在<你喜歡的模型名字>下建json文件：<你喜歡的模型名字>.model.json

  5. 安裝模型。在命令行（即Git Bash）運行如下命令便可：

    npm install --save live2d-widget-model-<你喜歡的模型名字>

  6. 在命令行（即Git Bash）運行如下命令， 在http://127.0.0.1:4000/查看測試結果:

    hexo clean && hexo g && hexo s

插件配置

如下插件（評論系統、數據統計與分析、內容分享服務、搜索服務）各選一個便可。

評論系統

推薦指數 優勢 缺點
Valine 4 天天30000條評論，10GB的儲存 做者評論無標識
來必力/livere 4 多種帳號登陸 評論沒法導出
暢言 3 美觀 必須備案域名
gitment 3 簡潔 只能登錄github評論
Disqus 1 須要翻*牆
Valine

1.1. 獲取APP ID 和 APP Key

請先登陸或註冊 LeanCloud, 進入控制檯後點擊左下角建立應用，

進入剛剛建立的應用，選擇左下角的設置>應用Key，而後就能看到你的APP ID和APP Key了。

1.2. 填寫APP ID 和 APP Key到主題配置文件_config.yml

1.3. 運行hexo g&&hexo d推送到博客。

來必力/livere

2.1. 登錄 來必力 獲取你的 LiveRe UID。

2.2. 填寫LiveRe UID到主題配置文件_config.yml

暢言

3.1.獲取APP ID 和 APP Key

請先登陸或註冊 暢言, 點擊「當即免費獲取暢言」，

新建站點，點擊管理，點擊評論插件>評論管理，

點擊後臺總覽，而後就能看到你的APP ID和APP Key了。

3.2. 填寫APP ID 和 APP Key到主題配置文件_config.yml

3.3. 運行hexo g&&hexo d推送到博客。

gitment

4.1. 安裝插件：

npm i --save gitment

4.2. 申請應用

在New OAuth App爲你的博客應用一個密鑰:

Application name:隨便寫
Homepage URL:這個也能夠隨意寫,就寫你的博客地址就行
Application description:描述,也能夠隨意寫
Authorization callback URL:這個必須寫你的博客地址

複製代碼

4.3. 配置

編輯主題配置文件themes/*/_config.yml:

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: {you github user id}
  github_repo: 公開的git倉庫,評論會做爲那個項目的issue
  client_id: {剛纔申請的ClientID}
  client_secret: {剛纔申請的Client Secret}
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_pro

複製代碼
Disqus

編輯 主題配置文件themes/*/_config.yml， 將 disqus 下的 enable 設定爲 true，同時提供您的 shortname。count 用於指定是否顯示評論數量。

disqus:
  enable: false
  shortname:
  count: true

複製代碼

數據統計與分析

推薦指數 優勢 缺點
不蒜子 4 可直接將訪問次數顯示在您在網頁上（也可不顯示） 只計數
百度統計 3 收錄慢
不蒜子

編輯 主題配置文件 themes/*/_config.yml中的busuanzi_count的配置項便可。

  • 當enable: true時，表明開啓全局開關。
  • 若site_uv（本站訪客數）、site_pv（本站訪客數）、page_pv（本文總閱讀量）的值均爲false時，不蒜子僅做記錄而不會在頁面上顯示。

注意：

不蒜子官方因七牛強制過時原有的『dn-lbstatics.qbox.me』域名（預計2018年10月初），與客服溝通數次無果，即便我提出爲此付費也不行，只能更換域名到『busuanzi.ibruce.info』！

複製代碼

解決辦法：

  1. 找到主題調用不蒜子的swig文件。通常在"\themes*\layout_third-party\analytics\busuanzi-counter.swig"

  2. 更改域名

    把原有的：
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
域名改一下便可：
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

複製代碼
百度統計
  1. 登陸 百度統計，定位到站點的代碼獲取頁面
  2. 複製統計腳本 id，如圖： ​
    img
  3. 編輯 主題配置文件themes/*/_config.yml，修改字段 google_analytics，值設置成你的統計腳本 id。

內容分享服務

推薦指數 優勢 缺點
百度分享 4 穩定 不太美觀
need-more-share2 4 美觀 更新不及時（好比微信分享API）
百度分享

編輯 主題配置文件，添加/修改字段 baidushare，值爲 true便可。

# 百度分享服務
baidushare: true

複製代碼
need-more-share2

編輯 主題配置文件，添加/修改字段 needmoreshare2，值爲 true便可。

needmoreshare2:
  enable: true

複製代碼

搜索服務

推薦指數 優勢 缺點
Local Search 4 配置方便
Swiftype 2 需註冊
Algolia 2 需註冊
Local Search

添加百度/谷歌/本地 自定義站點內容搜索

  1. 安裝 hexo-generator-searchdb，在站點的根目錄下執行如下命令：

    $ npm install hexo-generator-searchdb --save

複製代碼

  2. 編輯 站點配置文件，新增如下內容到任意位置：

    search:
  path: search.xml
  field: post
  format: html
  limit: 10000

複製代碼

  3. 編輯 主題配置文件，啓用本地搜索功能：

    # Local search
local_search:
  enable: true

複製代碼

錯誤分析

若是你使用Hexo遇到一樣的問題,這裏有一些常見問題的解決方案。

YAML Parsing Error

JS-YAML: incomplete explicit mapping pair; a key node is missed at line 18, column 29:
      last_updated: Last updated: %s

複製代碼
  1. 參數中包含冒號，請用加引號，如Last updated: %s
JS-YAML: bad indentation of a mapping entry at line 18, column 31:
      last_updated："Last updated: %s"

複製代碼
  1. 字段後面的冒號必須爲英文冒號，如：last_updated:
  2. 字段冒號後面必須跟一個空格，如：last_updated: "Last updated: %s"

EMFILE Error

Error: EMFILE, too many open files

複製代碼

生成大量的文件時，可能遇到EMFILE錯誤。

能夠運行如下命令來增長容許同步I / O操做的數量。

$ ulimit -n 10000

複製代碼

Process Out of Memory

當hexo g時，遇到如下錯誤：

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

複製代碼

以下，更改hexo-cli文件的第一行，來增大nodejs堆內存.該bug已在新版本修復。

#!/usr/bin/env node --max_old_space_size=8192

複製代碼

Git Deployment Problems

  1. RPC failed
error: RPC failed; result=22, HTTP code = 403

fatal: 'username.github.io' does not appear to be a git repository

複製代碼

確保你有你的電腦上設置git正確或嘗試使用HTTPS存儲庫URL。

  1. Error: ENOENT: no such file or directory

這個須要有必定的git的知識，由於多是因爲寫錯了標籤,類別,或文件名，致使本地和github衝突了，Git不能自動合併這一變化因此它打破了自動分支。

解決辦法：

  1. 檢查文章的標籤和類別,確保本地和github上是相同的。
  2. 合併分支（Commit）。
  3. 清除，重構。在站點目錄下，命令行（即Git Bash）運行hexo clean和hexo g
  4. 手動將站點目錄下的public文件夾複製到您的桌面
  5. 從你的master分支切換到部署在本地分支。
  6. 從桌面複製public文件夾到本地分支。
  7. 合併分支到github（Commit）。
  8. 切回master分支。

Server Problems

Error: listen EADDRINUSE

複製代碼

你可能使用相同的端口，同時開啓了兩個Hexo服務器。若是須要同時開啓，能夠嘗試修改端口設置：

$ hexo server -p 5000

複製代碼

Plugin Installation Problems

npm ERR! node-waf configure build

複製代碼

這個錯誤可能發生在試圖安裝一個用Cc++或另外一個javascript語言編寫的插件。確保您已經安裝了正確的編譯器在您的計算機上。

Error with DTrace (Mac OS X)

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

複製代碼

DTrace安裝可能有問題，重裝:

$ npm install hexo --no-optional

複製代碼

詳見 #1326

Iterate Data Model on Jade or Swig

Hexo使用倉庫的數據模型。這不是一個數組,因此你可能須要將對象轉換爲iterable。

{% for post in site.posts.toArray() %}
{% endfor %}

複製代碼

Data Not Updated

一些數據不能更新或新生成的文件的最後一個版本徹底相同。清理緩存，再試一次：

$ hexo clean

複製代碼

No command is executed

那個不能使用除help、init和version之外的命令行（即Git Bash）時, 有可能時站點目錄下的 package.json文件，缺乏hexo ，以下:

{
  "hexo": {
    "version": "3.2.2"
  }
}

複製代碼

Escape Contents

Hexo使用Nunjucks渲染的頁面. { { } }或{ % % }將解析和可能會引發麻煩， 若是要在博文中出現，必須使用三引號：

​```
{% raw %}
Hello {{ sensitive }}
{% endraw %}
​```

複製代碼

ENOSPC Error (Linux)

若是運行命令$ hexo server 返回一個錯誤:

Error: watch ENOSPC ...

複製代碼

能夠經過運行$ npm dedupe或者如下命令行（即Git Bash）：

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

複製代碼

來增長測試時，你能夠看見的文件數量。

EMPERM Error (Windows Subsystem for Linux)

若是在Windows Subsystem for Linux，運行命令$ hexo server 返回這個錯誤:

Error: watch /path/to/hexo/theme/ EMPERM

複製代碼

由於目前在Windows Subsystem for Linux中，有些內容更改時，還不能實時更新到hexo服務器。

因此須要從新編譯，再啓動服務器：

$ hexo generate
$ hexo server -s

複製代碼

Template render error

有時運行命令$ hexo generate 返回一個錯誤:

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html Template render error: (unknown path) 複製代碼

這意味着有些認不出來單詞在你的文件，而且極可能在你的新博文,或者配置文件_config.yml中，好比縮進錯誤：

錯誤例子：

plugins:
hexo-generator-feed
hexo-generator-sitemap

複製代碼

經常使用操做

建立文章

命令：

$ hexo new [layout] <title>

複製代碼

參數說明：

  • [layout]能夠爲如下三種：
參數名 功能 文章路徑
post 新建博文 source/_posts
page 新建頁面（如404，分類） source
draft 草稿 source/_drafts

草稿可經過一下命令發佈：

$ hexo publish [layout] <title>

複製代碼

  • title注意：

    不是博文標題，

    是博文markdown文件的名字，

    也是博文連接的後綴（如https://www.simon96.online/2018/10/12/hexo-tutorial/中的hexo-tutorial）

文章模版

  • 建立模版

    在新建文章時，Hexo 會根據 scaffolds 文件夾內相對應的文件來創建文件，例如：

$ hexo new blog "simon"

​ 在執行這行指令時，Hexo 會嘗試在 scaffolds 文件夾中尋找 blog.md，並根據其內容創建文章。

  • 修改參數

    如下是您能夠在模版中使用的變量：

變量 描述
layout 佈局
title 標題
date 文件創建日期

Front-matter

就是博文最上方以 --- 分隔的那部分。

默承認以使用的Front-matter：

參數 描述 默認值
layout 佈局
title 標題
date 創建日期 文件創建日期
updated 更新日期 文件更新日期
comments 開啓文章的評論功能 true
tags 標籤（不適用於分頁）
categories 分類（不適用於分頁）
permalink 覆蓋文章網址

感謝支持

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程