Santu's Blog
  2. 教程

Hexo+next搭建博客指南

我以前用的博客系统是wordpress，虽然搭起来比较方便，但是权限少，个人觉得wordpress博客系统架构有点混乱。听了@Xieldy和@barriery的建议，开始尝试Hexo系统，发现这个博客系统还基于Flask架构来写的, 我在菊厂实习的时候刚好用flask开发过后台，所以对这个架构比较熟悉。现在来分享一下自己建站的经历（踩的坑）。

我云主机的系统是Ubuntu16.04

  • 首先安装nodejs

一开始我使用的apt源安装，但是Ubuntu源中的nodejs时旧版本，用apt源安装会导致hexo命令异常，所以需要在安装后更新nodejs。

1
2
3
sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm
  • 更换成淘宝的镜像，否则非常慢
1
sudo npm config set registry https://registry.npm.taobao.org

  • 可以通过 sudo npm config list 查看是否生效

  • 安装更新版本的工具N

1
sudo npm install n -g
  • 更新版本
1
sudo n stable

  • 可以看到有 installed：版号，说明更新成功

  • 安装hexo

1
sudo npm install -g hexo
  • 选一个空目录创建根目录模版

我选择的是/var/www/html/目录下

1
sudo hexo init
  • 下载next主题模版
1
sudo git clone https://github.com/iissnan/hexo-theme-next.git themes/next
  • 在根目录_config.yml文件中启用next主题
1
theme: next

PS: 所有配置文件内，每一项配置的冒号后面都要加上空格

  • 设置语言

在根目录_config.yml文件中

1
language: zh-Hans
  • 主题选择

在主题配置文件中，查找scheme, 选择你喜欢的主题对其反注释

1
2
3
4
5
# 主题中的主题
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini
  • 背景设置

在主题配置文件中，查找canvas：

1
2
3
4
5
6
7
8
9
10
11
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: true

开启相应的背景，只要把对应的false设置为true，记得把其他都改为false

  • 修改内容区域宽度

Next 对内容的宽度的设定如下：

700px，当屏幕宽度 < 1600px

900px，当屏幕宽度 >= 1600px

移动设备下，宽度自适应

在主题目录下的 source/css_variables/custom.styl 文件，新增变量：

1
2
3
4
// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme， Pisces Scheme 编辑themes/next/source/css/_schemes/Picses/_layout.styl文件，更改以下 css 选项定义值

1
2
3
.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}
  • 文章内链接样式美化

在主题目录下，将source/css/_custom/custom.styl文件修改如下：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}
  • 文章内代码美化

行内代码

在主题目录下，将source/css/_custom/custom.styl文件修改如下：

1
2
3
4
5
6
7
8
9
//行内代码样式
code {
    color: #c7254e;
    background: #f9f2f4;
    border: 1px solid #d6d6d6;
    padding:1px 4px;
    word-break: break-all;
    border-radius:4px;
}

区块代码

在主题目录下，修改config.yml文件：

1
2
#   样式可选： normal | night | night eighties | night blue | night bright
highlight_theme: night
  • 添加文章结束语

添加模板文件

在主题目录下/layout/_macro中新建 passage-end-tag.swig文件,并添加以下内容：

1
2
3
4
5
6
7
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
              -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
        </div>
    {% endif %}
</div>

导入模板文件

在/layout/_macro/post.swig文件中，找到：

1
2
3
{#####################}
{### END POST BODY ###}
{#####################}

在上面代码之前添加：

1
2
3
4
5
<div>
      {% if not is_index %}
          {% include 'passage-end-tag.swig' %}
      {% endif %}
</div>

配置

在主题配置文件中添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

  • 增强文章底部版权信息

    • 增加文章md文件的头部信息中添加copyright: true时，添加版权声明
    • 增加文章标题、发布时间、更新时间等信息

在目录next/layout/_macro/下找到post-copyright.swig，进行部分修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% if page.copyright %}
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文标题:</strong>
    <a href="{{ url_for(page.path) }}">{{ page.title }}</a>
  </li>
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
    {{ config.author }}
  </li>
  <li class="post-copyright-author">
    <strong>发布时间:</strong>
    {{ page.date.format("YYYY年MM月DD日 - HH:MM") }}
  </li>
  <li class="post-copyright-author">
    <strong>最后更新:</strong>
    {{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}
  </li>
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    <a href="{{ post.permalink }}" title="{{ post.title }}">{{ post.permalink }}</a>
  </li>
  <li class="post-copyright-license">
    <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
    {{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
  </li>
</ul>
{% endif %}
  • 自定义文章的默认头部信息

在根目录的/scaffolds/post.md文件中添加：

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
tags:                #标签
categories:      #分类
copyright: true #版权声明
permalink: 01  #文章链接，有默认值
top: 0              #置顶优先级
password:      #密码保护
---
  • 文章加密访问(其实可以不用)

打开主题目录下layout/_partials/head.swig文件,在meta标签后面插入这样一段代码：

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

然后文章头部信息中添加password：

password: 你设置的密码

如果password后面为空，则表示不用密码。

  • 博文置顶

安装hexo-generator-index插件

1
npm install hexo-generator-index--save

替换代码

把node_modules/hexo-generator-index/lib/generator.js内的代码替换为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

设置top值

在文章头部信息中添加top值，数值越大文章越靠前:

1
2
3
---
top: 100
---
  • 增强文章底部标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 #换成

1
<i class="fa fa-tag"></i>
  • 修改打赏

在主题配置文件中找到如下行，并作出相应的修改，然后上传你的微信和支付宝二维码到博客根目录下的source/img文件夹中

1
2
3
4
5
# 打赏设置
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /assets/img/weixin.jpg
alipay: /assets/img/alipay.jpg
# bitcoin: /images/bitcoin.png
  • 字体不闪动设置

修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：

1
2
3
4
5
6
7
8
9
10
11
12
/* 注释文字闪动函数
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/
  • 添加顶部加载条

在主题配置文件_config.yml中，找到pace并修改：

1
2
pace: true
pace_theme: pace-theme-minimal

加载条样式有许多，在你找到的位置中可自行更换

  • 主页文章添加阴影效果

打开/themes/next/source/css/_custom/custom.styl,添加：

1
2
3
4
5
6
7
.post {
   margin-top: 60px;
   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);
  }
  • 给背景添加蜂窝状动画

添加下列代码到你的布局文件中的标签之前（位置/layout/layout.ejs）

1
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

在引用的同时可以对 Nest 进行相关的配置

color ： 线条颜色, 默认: ‘0,0,0’ ；三个数字分别为(R,G,B)，注意用,分割

opacity : 线条透明度（0~1）, 默认: 0.5

count : 线条的总数量, 默认: 150，（建议修改少点，否者 cpu 占用过高）

zIndex : 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

例如

1
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
  • 搜索功能

安装

1
npm install hexo-generator-searchdb --save

配置

在主题配置文件下，查找local_search:

1
2
3
4
local_search:
  enable: false
  trigger: auto
  top_n_per_article: 1

enable修改为true

在根目录配置文件中，添加以下代码：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 页脚美化

隐藏网页底部 powered By Hexo 强力驱动

在主题配置文件_config.yml中修改：

1
copyright: false
  • 侧边栏添加访问量等信息

获取不蒜子代码

在不蒜子上获取代码：

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

添加js文件

在主题目录下，找到/layout/_layout.swig文件， 在文件的后面，</body>标签之前，添加上面代码。

安装wordcount

1
npm install hexo-wordcount --save

修改布局

在主题目录下，找到/layout/_macro/sidebar.swig文件，查找/nav，在</nav>标签之前，添加下面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<br>
<br>
<div class="site-state-item site-state-posts" style="border-left:none;">
       <span class="site-state-item-count" id="busuanzi_value_site_pv"></span>
       <span class="site-state-item-name">浏览量</span>
</div>
<div class="site-state-item site-state-posts">
      <span class="site-state-item-count" id="busuanzi_value_site_uv"></span>
     <span class="site-state-item-name">访客量</span>
</div>
<div class="site-state-item site-state-posts">
      <span class="site-state-item-count">{{totalcount(site)}}</span>
      <span class="site-state-item-name">总字数</span>
</div>
  • 文章标签显示设置

在主题配置文件中，查找post_meta：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 文章标签显示设置
post_meta:
  item_text: true
  created_at: true  # 发表时间
  updated_at: false  # 更新时间
  categories: true  # 分类

# 文章字数显示设置（需要wordcount，前面已经下载）
post_wordcount:
  item_text: true
  wordcount: true  # 显示字数
  min2read: false   # 所需时间
  totalcount: false  # 总字数
  separated_meta: true # 分割符
  • 文章阅读量

注册leancloud统计账号，按照next官方推荐文档 为NexT主题添加文章阅读量统计功能，获取AppID以及AppKey并在主题的_config.yml文件中填写：

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
  app_key: E9UJsJpw1omCHuS22PdSpKoh
  • 添加友言评论

在友言评论中注册，并进入管理来获取你的id。
修改主题配置文件的友言id：

1
2
# youyan 评论
youyan_uid: "2144889"
  • 添加jiathis分享按钮

将你的友言Id添加进去：

1
2
3
# jiathis 分享按钮
jiathis:
  uid: '2144889'

参考资料以及FAQ

  1. ubuntu下搭建LAMP环境

    https://blog.csdn.net/lu_embedded/article/details/79604380

  2. ubuntu创建自签名证书

    https://www.howtoing.com/how-to-create-a-self-signed-ssl-certificate-for-apache-in-ubuntu-18-04

  3. 腾讯云安装let's encrypt证书

    https://www.howtoing.com/how-to-create-a-self-signed-ssl-certificate-for-apache-in-ubuntu-18-04

  4. 安装Next主题

    http://theme-next.iissnan.com/getting-started.html#install-next-theme

  5. Next github源码包

    https://github.com/iissnan/hexo-theme-next

  6. GitHub+Hexo 搭建个人网站详细教程

    https://zhuanlan.zhihu.com/p/26625249

  7. hexo使用手册

    https://hexo.io/docs/server

  8. 如何更新npm（它要在themes目录下才能运行，不更新在ubuntu16.04环境下hexo命令会出现异常）

    https://blog.csdn.net/y5492853/article/details/79529410

  9. Hexo-NexT搭建个人博客

    https://neveryu.github.io/2016/09/03/hexo-next-one/

  10. hexo中获取图片失败问题

    https://www.jianshu.com/p/c2ba9533088a

  11. hexo + next主题高级配置

    https://www.jianshu.com/p/344cf061598d

  12. hexo常用命令

    https://segmentfault.com/a/1190000002632530

  13. 添加分类与标签

    https://www.jianshu.com/p/e17711e44e00

  14. 每次在主页上阅读更多的链接总是指向发表时间最早的一篇，解决方法：

    https://hexo.io/zh-cn/docs/permalinks.html

  15. 蜂窝状动画

    http://wintersmilesb101.online/2017/03/22/Next-Use-Nest/

TAGS