HEXO安装教程

HEXO官网
安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
Node.js
Git
如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用npm即可完成 Hexo 的安装。

1
npm install -g hexo-cli

安装Hexo完成后,请执行下列命令,Hexo将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <folder>
cd <folder>
npm install

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml
网站的 配置 信息,您可以在此配置大部分的参数。

HEXO卸载

单个项目直接删掉文件夹就行,如果系统也要删掉

1
npm uninstall hexo

3.0.0版本执行

1
npm uninstall hexo-cli -g

之前版本执行

1
npm uninstall hexo -g

安装Next

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

创建“分类”页面

  1. 执行命令
    1
    hexo new page categories
  2. 编辑刚新建的页面,将页面的类型设置为categories,主题将自动为这个页面显示所有分类。
    1
    2
    3
    title: 分类
    date: 2018-2-22 12:39:04
    type: "categories"
  3. 注意:如果有启用多说 或者Disqus评论,默认页面也会带有评论。需要关闭的话,请添加字段comments并将值设置为false,如:
    1
    2
    3
    4
    title: 分类
    date: 2018-2-22 12:39:04
    type: "categories"
    comments: false
  4. 修改主题配置文件_config.yml去掉categories前面注释。
    1
    2
    3
    4
    5
    menu:
    home: /
    categories: /categories
    archives: /archives
    tags: /tags

创建“标签”云页面

  1. 执行命令
    1
    hexo new page "tags"
  2. 编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。
    1
    2
    3
    title: All tags
    date: 2018-01-23 03:19:21
    type: "tags"
  3. 注意:如果有启用多说 或者Disqus评论,默认页面也会带有评论。需要关闭的话,请添加字段comments并将值设置为false,如:
    1
    2
    3
    4
    title: All tags
    date: 2018-01-23 03:19:21
    type: "tags"
    comments: false
  4. 修改主题配置文件_config.yml去掉tags前面注释。
    1
    2
    3
    4
    menu:
    home: /
    archives: /archives
    tags: /tags

创建“关于我”页面

  1. 执行命令
    1
    hexo new page "about"
  2. 修改主题配置文件_config.yml去掉about前面注释。
    1
    2
    3
    4
    5
    menu:
    home: /
    archives: /archives
    tags: /tags
    about: /about

固定链接

修改站点配置文件_config.yml

1
2
3
4
5
permalink: :id.html
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

主题添加友情链接

修改主题配置文件_config.yml

1
2
3
4
5
6
7
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
SuperTLD: http://www.SuperTLD.com/

代码高亮

修改主题配置文件_config.yml

1
2
3
4
5
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

代码块复制

修改主题配置文件_config.yml

1
2
3
4
5
6
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style:

CNZZ统计

  1. 进入cnzz-analytics.swig目录
    1
    next/layout/_third-party/statistics/cnzz-analytics.swig
  2. 修改文件cnzz-analytics.swig
    主题自带的统计二级域名为s95.cnzz.com 修改二级域名为你cnzz生成的二级域名即可, 如我的统计代码二级域名为 s22.cnzz.com。
  3. 修改主题配置文件_config.yml填写你的ID
    1
    2
    # CNZZ count
    cnzz_siteid:

打赏功能

修改主题配置文件_config.yml

1
2
3
4
5
6
7
8
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
#comment: Donate comment here.
reward:
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

GitHub右上角图标

修改主题配置文件_config.yml

1
2
3
4
github_banner:
enable: true
permalink: https://github.com/SuperTLD
title: Follow me on GitHub

百分比浏览进度

修改主题配置文件_config.yml

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

顶部阅读进度条

修改主题配置文件_config.yml

1
2
3
4
5
6
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

书签保存阅读进度

修改主题配置文件_config.yml

1
2
3
4
5
6
7
bookmark:
enable: true
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

Hexo增加网站运行时间统计

修改\themes\next\layout\_partials\footer.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<span>本站已运行<span id="htmer_time"></span>
<script>
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {
time[4] = second;
}
return time;
}
</script>

<script type="text/javascript" language="javascript">
function setTime() {
var create_time = Math.round(new Date(Date.UTC(2018, 2, 20, 14, 0, 0)).getTime() / 1000); //这里设置建站时间
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp - create_time));
currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
+ currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
+ '秒';
document.getElementById("htmer_time").innerHTML = currentTimeHtml;
} setInterval(setTime, 1000);

$(function(){
$("#learnmore").click(function(){
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset},800);
return false;
}
}
});
});

</script>

插件依赖

pjax无刷新加载

  1. 进入next目录
    1
    cd themes/next
  2. 执行命令将
    1
    git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
  3. 修改主题配置文件_config.yml
    1
    pjax: true
  4. 如果您想使用CDN,修改主题配置文件_config.yml
    1
    2
    3
    vendors:
    ...
    pjax: //cdn.jsdelivr.net/gh/theme-next/[email protected]/pjax.min.js
  5. 更新
    1
    2
    cd themes/next/source/lib/pjax
    git pull

外链转内链

  1. 执行命令

    1
    npm install hexo-external-link --save
  2. 修改站点配置文件_config.yml文件中添加如下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    hexo_external_link:
    enable: true # 默认开启
    enable_base64_encode: true # 默认开启 base64 加密
    url_param_name: 'u' # url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 u
    html_file_name: 'go.html' # 跳转到外链的页面文件路径 - 默认 go.html
    target_blank: true # 是否为外链的a标签添加target='_blank' - 默认 true
    link_rel: 'external nofollow noopener noreferrer' # 设置外链的a标签的rel属性 - 默认 external nofollow noopener noreferrer
    domain: 'window.location.host' # 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
    safety_chain: true # go.html 为了防止外链盗用 对域名进行的判断 - 默认 false -ignore_attrs - 忽略属性列表,对于拥有该属性列表中任意一个属性的a标签,跳过外链替换 - 默认 ['data-fancybox','ignore-external-link']
    ignore_attrs:
    - 'data-fancybox'
    - 'ignore-external-link'

顶部加载进度条

  1. 进入next目录
    1
    cd themes/next
  2. 执行命令
    1
    git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  3. 修改主题配置文件_config.yml
    1
    pace: true
  4. 更新
    1
    2
    cd themes/next/source/lib/pace
    git pull

文章置顶

  1. 执行命令
    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save
  2. 文章头部
    1
    top: true
  3. 设置置顶标志,打开
    1
    /next/layout/_macro/post.swig
  4. <div class="post-meta">位置下面插入代码
    1
    2
    3
    4
    5
    {% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="RED">置顶</font>
    <span class="post-meta-divider">|</span>
    {% endif %}

本地搜索

  1. 执行命令
    1
    npm install hexo-generator-searchdb --save
  2. 修改主题配置文件_config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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
    # Unescape html strings to the readable one.
    unescape: false
    # Preload the search data when the page loads.
    preload: false

文章统计

  1. 执行命令
    1
    npm install hexo-symbols-count-time
  2. 修改主题配置文件_config.yml
    1
    2
    3
    4
    5
    6
    symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: false
    awl: 4
    wpm: 275

图片预览

  1. 进入next目录
    1
    cd themes/next
  2. 执行命令
    1
    git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
  3. 修改主题配置文件_config.yml
    1
    fancybox: true

优化页面加载速度

它将自动过滤您的html文件,找到<link rel =“ stylesheet”>块并将其替换为JavaScript以优化CSS投放。
将main.css内联到html页面中。
它将改善您的页面加载,并在Google PageSpeed Insights中获得更高的分数。

  1. 执行命令
    1
    npm install hexo-filter-optimize --save
  2. 修改hexo配置文件_config.yml添加下面代码激活插件
    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
    filter_optimize:
    enable: true
    # remove static resource query string
    # - like `?v=1.0.0`
    remove_query_string: true
    # remove the surrounding comments in each of the bundled files
    remove_comments: false
    css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    # - only support the full path
    # - default is ['css/main.css']
    inlines:
    excludes:
    js:
    # bundle loaded js file into the one
    bundle: true
    excludes:
    # set the priority of this plugin,
    # lower means it will be executed first, default is 10
    priority: 12

开启RSS

  1. 执行命令
    1
    npm install hexo-generator-feed --save
  2. 修改主题配置文件_config.yml
    1
    2
    social:
    RSS: /atom.xml || rss

站点地图sitemap

  1. 执行命令
    1
    2
    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
  2. 修改hexo配置文件_config.yml添加代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 谷歌、百度站点地图生成
    Plugins:
    - hexo-generator-baidu-sitemap
    - hexo-generator-sitemap

    baidusitemap:
    path: baidusitemap.xml
    sitemap:
    path: sitemap.xml

部署到Github Pages

  1. 执行命令
    1
    npm install hexo-deployer-git --save
  2. 修改hexo配置文件_config.yml
    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/你的github用户名/你的github用户名.github.io.git
    branch: master

部署到 VPS for Rsync

  1. VPS执行命令[以Debia Ubuntu为例]
    1
    apt-get install rsync
  2. 本地执行命令
    1
    npm install hexo-deployer-rsync --save
  3. 修改hexo配置文件_config.yml
    编辑博客文件夹目录下的_config.yml,找到deploy添加如下代码:
    1
    2
    3
    4
    5
    6
    deploy:
    type: rsync
    host: vps # 这里填写你VPS的IP地址,比如:138.23.23.23
    user: root # 这里填写你登陆VPS所用的用户名,比如:root
    root: /usr/www/hexo # 这里填写你在nginx中配置的文件路径
    port: 22 # SSH默认端口号,不需要修改
    1
    hexo generate && hexo deploy

Github Pages一键部署deploy.sh脚本

  1. hexo根目录新建deploy.sh文件填写代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    #!/bin/bash
    DIR=`dirname $0`

    # Generate blog
    hexo clean
    hexo generate
    sleep 5

    # Deploy
    hexo deploy
    sleep 5

    # Push hexo code
    git add .
    current_date=`date "+%Y-%m-%d %H:%M:%S"`
    git commit -m "Blog updated: $current_date"

    sleep 2
    git push origin hexo

    echo "=====>Finish!<====="
  2. 执行命令
    1
    chmod 775 deploy.sh
  3. 执行脚本
    1
    ./deploy.sh