Hexo博客搭建

系统Arch Linux

安装Hexo

安装Node.jsgit

1
$ sudo pacman -Sy nodejs git

安装hexo

1
sudo npm install -g hexo-cli

fish下安装有问题,不知道为什么。

创建Blog

在github创建一个repository名叫yourname.github.io,其中yourname是github的ID。

进入这个repository,新建一个branch名为source,并且在settings中将default branch设置为source

然后克隆到本地

1
git clone git@github.com:yourname/yourname.github.io.git

将文件夹名称改为Blog并进入文件夹

1
2
mv yourname.github.io/ Blog
cd Blog

接下来就要hexo init了,但是由于此时Blog文件夹下有.git/README.md,而hexo init要求在空目录下执行,所以首先要把.git/转移备份,执行完hexo init再转移回来。

1
2
3
hexo init
npm install
npm install hexo-deployer-git --save

最后修改_config.yml中的deploy

1
2
3
4
5
deploy:
type: git
repository:
github: git@github.com:yourname/yourname.github.io.git
branch: master

特别注意,这里的分支是master

接下来执行git addgit commit 以及git push提交网站相关的文件,注意提交到source分支。

最后执行hexo cleanhexo ghexo d生成网站并部署到github上,这里deployd到的是master分支。

这样一来,Blog的创建就完成了。

Blog美化

更换主题

这里使用github中star追多的next主题

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改Hexo 站点目录下的_config.yml的主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

站点基本设置

修改Hexo站点目录下的_config.yml

1
2
3
4
5
6
7
8
# Site
title: zhuyk6's Blog
subtitle:
description:
keywords:
author: zhuyk6
language: zh-Hans
timezone: Asia/Shanghai

设置主题风格

打开themes/next下的_config.yml文件,搜索 scheme关键字,将你需用启用的scheme 前面注释#去除即可。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置菜单项的显示文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
# schedule: /schedule/ || calendar
# sitemap: /sitemap.xml || sitemap
# commonweal: /404/ || heartbeat

增添目录、标签页面

如果要增添页面categories,执行命令

1
2
$ hexo new page 'categories'
INFO Created: ~/Blog/source/categories/index.md

修改source/categories/index.md

1
2
3
4
5
---
title: categories
date: 2019-04-15 14:27:43
type: categories
---

标签页面类似,增添页面tags

只需要在文章的开头加上

1
2
3
4
5
6
7
8
9
---
title: 矩阵论笔记1
date: 2018-03-27 20:42:20
categories:
- Math
- Linear Algebra
tags:
- Linear Algebra
---

类似上面这样即可实现分类、标签。

主页文章增加边框阴影效果

打开themes/next/source/css/_custom/下的custom.styl向里面加代码

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.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/next/layout/_macro/下的post.swig文件,搜索rel="tag">#,将 # 换成<i class="fa fa-tag"></i>

1
2
3
4
5
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>

添加顶部加载条

打开themes/next下的_config.yml,搜索关键字pace,设置为true,可以更换加载样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替换更换样式

本地搜索

  • 在站点根目录下

    1
    npm install hexo-generator-searchdb --save
  • Hexo站点_config.yml中添加配置

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  • 打开themes/next下的_config.yml,搜索关键字local_search,设置为true

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Local search
    # Dependencies: https://github.com/flashlab/hexo-generator-search
    local_search:
    enable: true
    # if auto, trigger search by changing input
    # if manual, trigger search by pressing enter key or search button
    trigger: auto
    # show top n results per article, show all results by setting to -1
    top_n_per_article: 1

统计功能,显示文章字数

  • 在站点目录下

    1
    npm i --save hexo-wordcount
  • 打开themes/next下的_config.yml,搜索关键字post_wordcount

    1
    2
    3
    4
    5
    6
    7
    8
    # Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
    item_text: true
    wordcount: true
    min2read: true
    totalcount: false
    separated_meta: true

文章末尾添加“本文结束”标记

  • 在路径/themes/next/layout/_macro中新建 passage-end-tag.swig 文件,并添加以下内容:

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
    {% endif %}
    </div>
  • 打开themes/next/layout/_macro/下的post.swig文件,注意在post-bodypost-footer前添加:

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

    具体位置如下:

    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
    29
    {#####################}
    {### END POST BODY ###}
    {#####################}

    <div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
    </div>

    {% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
    {% include 'wechat-subscriber.swig' %}
    </div>
    {% endif %}

    {% if (theme.alipay or theme.wechatpay or theme.bitcoin) and not is_index %}
    <div>
    {% include 'reward.swig' %}
    </div>
    {% endif %}

    {% if theme.post_copyright.enable and not is_index %}
    <div>
    {% include 'post-copyright.swig' with { post: post } %}
    </div>
    {% endif %}

    <footer class="post-footer">
  • 然后打开主题配置文件_config.yml,在末尾添加:

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

修改代码块自定义样式

打开\themes\next\source\css\_custom\custom.styl,向里面加入:(颜色可以自己定义)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

代码块添加一键复制功能

  • 下载clipboard.min.js,并保存在themes/next/source/js/src/中。

  • 使用clipboard.js。在themes/next/source/js/src/中创建clipboard-use.js,文件内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*页面载入完成后,创建复制按钮*/
    !function (e, t, a) {
    /* code */
    var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
    target: function(trigger) {
    return trigger.nextElementSibling;
    }
    });
    }
    initCopyCode();
    }(window, document);
  • themes/next/source/css/_custom/custom.styl样式文件中添加

    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
    29
    30
    31
    32
    33
    34
    35
    36
    //代码块复制按钮
    .highlight{
    //方便copy代码按钮(btn-copy)的定位
    position: relative;
    }
    .btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
    }
    .btn-copy span {
    margin-left: 5px;
    }
    .highlight:hover .btn-copy{
    opacity: 1;
    }
  • themes/next/layout/_layout.swig中,添加引用(在结束标签</body>之前添加)

    1
    2
    3
    <!-- 代码块复制功能 -->
    <script type="text/javascript" src="/js/src/clipboard.min.js"></script>
    <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

Mathjax 渲染

直接在next主题的_config.yml中找到mathjax

1
2
3
4
5
# MathJax Support
mathjax:
enable: true
per_page: false
cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

发现新版的next主题,Mathjax中已经不会将_识别错误了,$a_1$就可以表示$a_1$,不需要对_转义。

但是仍然需要对*转义,例如$a * b * c$就会错误,所以最好不要在Mathjax中使用*

静态资源压缩

  • 安装gulp

    1
    npm install gulp -g
  • 安装gulp插件

    1
    2
    3
    4
    npm install gulp-minify-css --save
    npm install gulp-uglify --save
    npm install gulp-htmlmin --save
    npm install gulp-htmlclean --save
  • Hexo站点下添加gulpfile.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
    29
    30
    31
    32
    33
    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');
    // 压缩 public 目录 css
    gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
    .pipe(minifycss())
    .pipe(gulp.dest('./public'));
    });
    // 压缩 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'))
    });
    // 压缩 public/js 目录 js
    gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./public'));
    });
    // 执行 gulp 命令时执行的任务
    gulp.task('default', gulp.series(
    'minify-html','minify-css','minify-js'
    ));
  • 只需要每次在执行generate命令后执行gulp就可以实现对静态资源的压缩,压缩完成后执行deploy命令同步到服务器

    1
    2
    3
    hexo g
    gulp
    hexo d

    也可是合在一起

    1
    hexo g && gulp

这里有一个坑,如果gulp4.0,那么gulp.task的参数必须是gulp.series

------ 本文结束------
0%