技术文章和学习笔记

互联网 & 技术 & 产品 & 阅读 & 生活

0%

搭建 HEXO 博客（一）：配置环境

发表于 更新于 分类于
本文字数： 15k 阅读时长 ≈ 13 分钟
本文介绍的是基于 Hexo 的个人博客搭建的环境配置过程。主要是 Node、Npm、Hexo 以及 Nginx 的安装和配置。另外本文基于 CentsOS 进行讲解。最后，本文介绍和对比了几种常用的同步代码和部署服务器的方案。

搭建 HEXO 博客（一）：配置环境

1、安装 Node 和 Npm

Hexo 是一个前端框架，所以一些前端开发工具必不可少，首当其冲的当然是 Node 和 Npm. 你可以到 Node 下载链接 下载新版 nodejs 并安装。这里以 CentOS 安装为例，

1
wget https://npm.taobao.org/mirrors/node/v16.9.0/node-v16.9.0-linux-x64.tar.gz

下载完毕解压缩，

1
tar -xvf node-v16.9.0-linux-x64.tar.gz

移动文件同时改名，

1
sudo mv node-v16.9.0-linux-x64 /usr/local/node

创建软链接（类似于快捷方式），

1
2
3
ln -s /usr/local/node/bin/node /usr/bin/node
ln -s /usr/local/node/bin/npm /usr/bin/npm
ln -s /usr/local/node/bin/npx /usr/bin/npx

检测安装结果，

1
2
node --version
npm --version

正确显示版本信息说明安装成功。

2、安装 Hexo

安装了 Npm 之后就可以安装 Hexo 了，

1
npm install -g hexo-cli

测试下是否安装成功，

1
hexo -v

如果找不到这个命令，可以试下到 node 安装目录下的 bin 目录中检查是否存在，如果不存在，可能是因为 hexo 没有关联到命令中，此时使用软连接，

1
ln -s /usr/local/node/bin/hexo /usr/bin/hexo

3、搭建博客

初始化博客 blog，

1
hexo init blog

这里创建了一个名为 blog 的目录。该目录内的文件就是我们博客的代码文件。我们可以通过修改这个目录内文件的内容来个性化定制自己的博客。

进入该目录，

1
npm install

启动，

1
2
hexo g
hexo server

默认在 4000 端口启动。所以，打开服务器 4000 端口，用 ip 访问即可。

一般开发的时候用到的 Hexo 指令并不多，通常每次修改完配置和笔记之后使用 hexo s -g 重新启动进行预览即可。而当我们开发完毕之后，使用 hexo deploy 生成 public 目录即可。这里的 public 目录位于这里的 blog 目录下面，这就是最终生成的静态网站的代码，我们可以直接将该代码资源放到 Github Pages 或者 Nginx 中来使用即可。

4、安装和配置 Nginx

4.1 安装 Nginx

在 CentOS 中安装 Nginx 的方式如下。

如果 EPEL 仓库中有 Nginx 的安装包，可直接使用。如果没有安装过 EPEL，可以通过运行下面的命令来完成安装：

1
sudo yum install epel-release

然后，输入以下命令来安装 Nginx：

1
sudo yum install nginx

如果这是您第一次从 EPEL 仓库中安装软件，yum 可能会提示您导入 EPEL GPG key，输入 y 即可。

等到安装完成以后，可以通过以下命令来设置开机启动和运行 Nginx 服务，

1
sudo systemctl start nginx

可见 nginx 是作为系统服务的一部分使用的。系统服务的其他管理方法还有，

1
2
3
4
5
sudo systemctl stop nginx       # 停止 Nginx
sudo systemctl restart nginx    # 重启 Nginx
sudo systemctl reload nginx     # 修改 Nginx 配置后，重新加载
sudo systemctl enable nginx     # 设置开机启动 Nginx
sudo systemctl disable nginx    # 关闭开机启动 Nginx

这属于 CentOS 系统管理的内容，如果不熟悉的话，可以浏览本站 Linux 相关的教程。

4.2 配置 Nginx

按照上述安装方式，Nginx 的主配置文件将被存储到 /etc/nginx/nginx.conf 中。这里做如下修改，

配置文件部分示例，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    server_name  _;
    root         /;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    error_page 404 /404.html;
    location = /404.html {

    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }

    location / {
        root /opt/nginx/public;
        index index.html index.htm;
    }
}

这里的意思是将 root 的位置定位到 /opt/nginx/public 目录中。这样每当我们开发完 Hexo 之后，将 hexo deploy 生成的 public 目录拷贝到该目录中即可。

5、开发和部署方式

其实上述的 Node 和 Npm 我们可以只在本地进行安装，然后本地生成 public 目录的资源之后上传到服务器即可。传递资源到服务器有多种方式，我们可以使用 FTP 进行上传，或者使用 Github/Gitee 建立私有仓库之后通过 Git 传递（建议后者）。

4、Hexo 配置

4.1 主题配置

以 next 主题为例，到 https://github.com/theme-next/hexo-theme-next 克隆项目到 themes/next 目录下面。然后在 _config.yml 文件里面将 theme 修改为 next，清理，重启：

1
2
hexo clean
hexo s -g

Next 提供了多种主题样式，到 next 目录下面修改 _config.yml 文件，修改 Schemes 属性，将指定的注释去掉即可，清理，重启。

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

4.2 评论

基于 github issue 的评论，https://github.com/gitalk/gitalk/blob/master/readme-cn.md

4.3 Local Search本地搜索

安装插件hexo-generator-searchdb,执行以下命令:

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

编辑 主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
enable: true

4.4 设置网站图标

在 EasyIcon 中找一张（32 * 32）的 ico 图标，或者去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images 里，并且修改主题配置文件：

1
2
Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

4.5 修改文章底部的#号的标签，改为图标

修改模板 /themes/next/layout/_macro/post.swig

搜索 rel="tag"，将 {{ tag.name }} 之前的内容换成 <i class="fa fa-tag"></i>，就是更改一个标签的意思。

4.6 增加文章字数统计及阅读时常功能

参考：https://github.com/theme-next/hexo-symbols-count-time

安装插件 symbols_count_time，执行以下命令:

1
npm install hexo-symbols-count-time

修改 themes/next/_config.yml 主题配置文件，搜索关键字 symbols_count_time，修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

4.7 修改链接文字样式

打开 themes\next\source\css\_common\components\post\post.styl 添加以下代码:

1
2
3
4
5
6
7
8
.post-body p a{
 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }
}

4.8 头像设置圆形,停留旋转效果

修改 themes/next/_config.yml

将 avatar: /images/avatar_2.gif 替换为自己的头像，

可以将自己的头像上传自定义的图片到下列目录 /themes/next/source/images/下面，然后进行引用即可。

4.9 代码复制

在 next 配置中修改如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
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
  # Add copy button on codeblock
  border_radius: 8   # 按钮圆滑度
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

4.10 修改文章链接

hexo-next文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。比如：https://zxiaoxuan.github.io/2019/08/12/hello-world/ 这样，如果文章标题是中文的话，URL链接是也会是中文，那么要生存简洁且唯一的URL，怎么办呢

安装插件

1
npm install hexo-abbrlink --save

修改根目录站点配置文件 config.yml，改为：

1
2
3
4
permalink: posts/:abbrlink/
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

4.11 标签页和分类页

进入项目目录下，开启命令行，输入

1
hexo new page tags

这样会在生成一个文件：/source/tags/index.md

修改这个文件的注释，注意这里的 type: "tags" 标记了这个文件的类型，

1
2
3
4
5
---
title: tags
date: 2016-06-08 16:19:38
type: "tags"
---

4.12 显示预览内容

首先修改配置文件：

1
excerpt_description: true

两种方式，

方法一：写概述
在文章的 front-matter 中添加 description，其中description中的内容就会被显示在首页上，其余一律不显示。

1
2
3
4
5
6
7
---
title: 让首页显示部分内容
date: 2020-02-23 22:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
photos: # 如果要显示图片的话
	"https://faithlove.github.io/pic/2018/HexoThumb/topPicPre.png-slim"
---

比较不方便的是还得写一下概述，很多时候会懒得写概述，于是就需要第二种方法了。

方法二：文章截断
在需要截断的地方加入：

1
2
<img src="https://faithlove.github.io/pic/2018/RMTP_1/topPicPre.png-slim" width=50% />
<!--more-->

首页就会显示这条以上的所有内容，隐藏接下来的所有内容。

4.13 推荐内容

安装插件：

1
npm install hexo-related-popular-posts --save

我们只需要在主题配置文件_config.yml 中修改：

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: 推荐文章 # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    PPMixingRate: 0.25
    isDate: false
    isImage: false
    isExcerpt: false

4.14 RSS

安装配置

安装插件：

1
npm install hexo-generator-feed --save

在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

然后到 hexo 主题配置下面修改

1
2
3
4
5
follow_me:
  Twitter: https://twitter.com/username || fab fa-twitter
  Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  RSS: /atom.xml || fa fa-rss

打开 rss 即可。RSS 图标出现在文章的末尾。

4.14 置顶操作

安装插件：

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

在需要置顶的文章的 Front-matter 中加上 top: true 或者 top: 任意数字，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: TMDb电影数据分析
declare: true
toc: true
tags:
  - Python
  - 数据分析
categories:
  - 数据分析
  - 实战
abbrlink: 7e380af2
date: 2018-11-23 13:20:03
top: 100
---

注意：top 中数字越大，文章越靠前。

打开 /themes/next/layout/_macro/ 目录下的 post.swig 文件，在 <div class="post-meta"> 的第一个 <span> 标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=FF0000>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

4.15 Hexo 页面静态资源压缩插件

我们自己添加的 css 和 js 文件为了可读性，往往会有很多换行和空格，这些对于浏览器来说是没有用的，甚至还会降低渲染页面的速度。同时，由于 Markdown 转成 html 的 bug，会导致页面存在大量的空白，我们可以通过查看页面源代码发现这些大量的空白符，这也会造成页面渲染的性能问题。

因此，我们需要对页面的静态资源进行压缩，包括 css、js 和 html 等文件。

我们可以使用 hexo-neat 插件进行压缩。hexo-neat 配置简单，无需额外命令，我们只需使用原本的调试、部署命令就可以自动完成静态资源的压缩。

地址

安装 hexo-neat 插件

1
npm install hexo-neat --save

然后我们需要在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/fireworks.js'

4.16 修改头部背景

找到如下位置：

1
hexo\themes\next\source\css\_schemes\Mist\_header.styl

打开 _header.styl，将第一行 background: 后的内容改为如下形式：

1
.header { background: url('../image/background.jpg'); }

保存，重新生成网页即可。

以图床上的图片作为背景

url() 内的链接可以是绝对地址的形式。因为我的静态博客在 github 上面，打开比较慢，所以将背景图片放到图床上以提高打开速度。设置形式如下：

1
.header { background: url('http://xx.xx.xx.com/hexo/image/header-backgroud.jpg'); }

居中自动裁剪效果：

1
2
3
4
5
6
background: url('https://images.unsplash.com/photo-1633120059477-a05c57ed01d0?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-size: 100% auto;  // 可以使用cover
background-position: center; //背景图片居中显示，让多余部分相对容器对此展示
background-repeat: no-repeat;
background-origin: border-box; //从border开始填充
background-clip: border-box;  //border外的多余背景图片不展示，截取掉，

4.17 添加动态背景

1.打开 next/layout/_layout.swig
在 body 标签里面添加代码

1
2
3
{% if theme.canvas_nest %}
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

复制

2.打开 /next/_config.yml，在里面修改如下代码：

1
2
3
4
# background settings
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

添加动态背景的另一种方式，使用 Next 自带背景，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.3 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

参考上述注释，到指定的 github 地址进行 clone，将克隆的代码添加到 lib 里面，然后这里更改配置即可。

4.18 添加文章结束提示语

在路径 \themes\next\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>

接着打开 \themes\next\layout_macro\post.swig 文件，在 post-body 之后，post-footer 之前添加如下代码：

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

复制

然后打开主题配置文件_config.yml，在末尾添加：

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

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

4.19 新建404界面

在站点根目录下,输入 hexo new page 404 ,默认在 Hexo 站点下/source/404/index.md 打开新建的404界面，在顶部插入一行，写上 permalink: /404 ，这表示指定该页固定链接为 http://"主页"/404.html。

1
2
3
4
5
6
---
title: #404 Not Found：该页无法显示
date: 2017-09-06 15:37:18
comments: false
permalink: /404
---

如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

4.20 自定义 Slidebar

打开注释，

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

按照注释说明那样，在站点的 source 目录下创建 _data 目录和 styles.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
//全文字体
body {
    font-family: 'Noto Serif SC',"PingFang SC","Microsoft YaHei",sans-serif;
}
code, pre {
    font-family: 'Roboto Mono',consolas,Menlo,monospace,"PingFang SC","Microsoft YaHei";
}

// 菜单栏样式
.header {
    background: #ffffff;
}

//去除菜单项左边icon
.menu-item .fa {
    display: none;
}

//更改菜单项字体大小
.menu-item a, .menu-item span.exturl {
    font-size: 1.025em;
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover {
    background: #ffffff;
    color: #000;
    font-size: 1.125em;
}

//去掉网站名上下的横线
.logo-line-before i, .logo-line-after i {
    display: none;
}

//更改网站名字体大小
.site-title {
    font-size: 2em;
}
// 菜单栏样式结束

//侧边栏样式
.sidebar {
    background: #bbbbbb1a;
    bottom: 0;
    position: fixed;
    box-shadow: inset 0 0px 0px #0000;
    top: 0;
    z-index: 200;
}

//目录与站点概览链接样式
.sidebar-nav li{
    color: #555;
    font-size: 1em;
}
.sidebar-nav li:hover{
    color: #222;
}
.sidebar-nav li.sidebar-nav-overview {
    margin-left: 10px;
}
.sidebar-nav .sidebar-nav-active {
    border-bottom-color: #222;
    color: #222;
}
.sidebar-nav .sidebar-nav-active:hover {
    border-bottom-color: #222;
    color: #222;
}

//目录样式
.post-toc ol a {
    border-bottom-color: #5550;
}
.post-toc .nav .active-current > a {
    color: #222;
}
.post-toc .nav .active > a {
    border-bottom-color: #222;
    color: #222;
}
.post-toc .nav .active-current > a:hover {
    color: #222;
}

//头像样式
.site-author-image {
    border: 0px solid #333;
}

//name字体颜色
.site-author-name {
    color: #222;
}
//description颜色
.site-description {
    color: #222;
}

//sidebar-item颜色
.sidebar a, .sidebar span.exturl {
    border-bottom-color: #2220;
    color: #222;
}
.sidebar a:hover, .sidebar span.exturl:hover {
    border-bottom-color: #2220;
    color: #22222282;
}

//RSS样式
.feed-link a, .chat a {
    border: 0px solid #fc6423;
}
.feed-link a:hover, .chat a:hover {
    background: #bbbbbb1a;
    border: 0px solid #fc6423;
    color: #222;
}
.fa-feed:before, .fa-rss:before {
    color: #222;
}

//社交链接样式
.links-of-author a::before, .links-of-author span.exturl::before {
    display: none;
}

//展开按钮
.toggle .toggle-line {
    background: #222;
    height: 3px;
}
.sidebar-toggle {
    background: #bbb0;
    height: 20px;
    width: 25px;
}

//返回顶部按钮
.back-to-top {
    background: #2220;
        color: #222;
}
//侧边栏样式结束

//文章块添加阴影
.post-block{
   margin-top: 60px;
   margin-bottom: 60px;
   border-radius: 20px; //文章背景设置圆角
   padding: 30px 60px 30px 60px;
   background:rgba(255,255,255,0.5) none repeat scroll !important; //添加透明效果
//    -webkit-box-shadow: 0 0 15px rgba(202, 203, 203, .8); //文章块阴影
//    -moz-box-shadow: 0 0 15px rgba(202, 203, 204, .8);
}

//调节文章宽度
// .main-inner {
//     width: 800px;
// }

//调整子标题文本大小
.site-subtitle {
    font-size: 1em;
}

//加入背景图片
//body { 
//	background: url(/images/background.jpg)
//	background-repeat: no-repeat;
//    background-attachment:fixed;
//    background-position:50% 50%;
//}
	
//调整文章块底部空白大小
.post-eof {
    margin: 20px auto 20px;
}

//调整按钮透明度
.btn {
    background: rgba(255,255,255,0);
}

5、小结

  • 通过 gitee 托管代码，public 和 blog 分成两个仓库，服务器拉 public 使用，本地使用 blog 管理代码，开发完毕之后 deploy 生成 public 然后上传到服务器。
推荐文章

-----本文结束 感谢阅读---------

欢迎关注我的其它发布渠道