【持续更新】最全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教程