程序员在旅途

用这生命中的每一秒,给自己一个不后悔的未来!

0%

程序员在旅途博客 (Hexo+Next)搭建历程

一、建站背景

  之前一直有在CSDN网站(程序员在旅途)写博客,记录相关技术知识的解决思路,分享作为程序员的成长历程,也在想着能有一个专属的个人版简约网站。一次偶然的机会,巧遇Hexo,被Next主题的简约所吸引,所以在2020年起搭建程序员在旅途博客站点。博客网站采用Hexo+Next主题构建,然后托管在公有云服务器上基于域名(meijindong.com)对外提供访问。
  程序员在旅途博客建设过程中,主要涉及到了站点本身的配置优化、域名配置、搜索引擎检索等内容,将会以系列文章的形式发布出来。

  本篇博客主要介绍站点本身的配置以及优化过程,主要涉及以下过程:

1. hexo站点搭建;
2. 配置Next主题(界面配置、站内搜索、valine评论);
3. 博客发布。

二、Hexo站点搭建

  Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

2.1 依赖环境配置

Hexo依赖以下基础环境,需要提前安装:

Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本);
Git

使用以下命令确认环境安装完成:

1
2
node -v   # 版本 >=10.13
git --version

2.2 Hexo安装

使用npm命令安装hexo:

1
npm install hexo-cli -g

hexo安装完之后,就可以使用hexo命令初始化站点了。
使用hexo init <blog>命令会在执行命令的路径下创建一个<blog>目录,该目录会包含hexo站点的主体结构。进入该目录,执行npm install安装相关依赖,然后使用hexo server命令就可以将一个基础的站点运行起来了,默认会占用4000端口。

1
2
3
4
hexo init hexo-next
cd hexo-next
npm install
hexo server # hexo server -p port_num ,指定端口运行

2.3 _config.yml文件配置

Hexo根目录的_config.yml文件用于配置网站的全局性参数,其中可配置标题、描述、关键词、permalink、url、采用主题、deploy部署等内容。

#主体信息配置

title: “程序员在旅途”
subtitle: “用这生命中的每一秒,给自己一个不后悔的未来!”
description: “计算机领域耕作者”
keywords: “IT之旅,程序员在旅途,计算机领域耕作者,物联网,操作系统,算法,云原生,go,java,python,docker,k8s”
author: IT之旅
email: ***
language: zh-CN
timezone: ‘’

#设置站点链接形式

设置站点和文章的访问链接,形式为:https://www.meijindong.com/abbrlink.html,其中 abbrlink为文章持久化识别值,如果不设置,默认为title。

url: https://www.meijindong.com
root: /
permalink: /:abbrlink.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
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: dec # 进制:dec(default) and hex

其中 hexo-abbrlink需要安装以下插件的支持:

1
npm install hexo-abbrlink --save

如果提示缺少依赖,执行npm 命令安装相关依赖即可。如缺少 babel-eslint,可执行 npm install eslint@4.x --save 安装。

三、Next主题配置

使用心仪的Next主题替换Hexo的默认主题。Hexo主题安装的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下站点_config.yml配置文件启用Next主题即可。

1
2
cd hexo-next
git clone https://github.com/iissnan/hexo-theme-next themes/next # 在站点目录下载该主题文件。

在Hexo中有两份主要的配置文件,其名称都是_config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

启用Next主题:修改_config.yml,更改为:

1
theme: next

这样主题就启用了,然后清除缓存,验证主题是否启用成功:

1
2
hexo clean
hexo server

以上,就启用了 Next主题。
通过配置主题的_config.yml,可以让博客功能更为丰富和美观。

#选择不同的Scheme

Next提供了Scheme,借助于 Scheme,可以选择不同的外观样式。几乎所有的配置参数都可以在不同 Scheme 之间共用。目前 NexT 支持四种 Scheme,他们是:

Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白;
Mist - Muse 的紧凑版本,整洁有序的单栏外观;
Pisces - 双栏 Scheme,小家碧玉似的清新;
Gemini - Pisces 的紧凑版本 。

本站点选择的是Mist,注释其他的Scheme即可。

#设置Menu导航菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标。自定义的菜单名称需要在主题的languages文件中配置中英文对应关系。

1
2
3
4
5
6
7
menu:
home: / || fa fa-home
archives: /archives || fa fa-archive
categories: /categories || fa fa-folder-open
messagebord: /messagebord || fa fa-coffee
tags: /tags || fa fa-tags
about: /about || fa fa-heart

以上菜单选项,需要自行创建page页面,不然会报page页面找不到 404错误,page页面创建也是使用hexo命令:

1
2
cd hexo-next
hexo new page messagebord #按需创建其他的导航页面。

#站点概览

站点概览会展示头像,文章统计数据,网站title,social链接等内容。

1
2
3
4
5
avatar:
url: /img/avatar.png
social:
E-Mail: mailto:***@163.com || fa fa-envelope
CSDN: https://blog.csdn.net/qq_24754061 || fa fa-archive

#本地搜索

设置搜索可以在导航菜单栏提供一个搜索入口,用于快速对站点内容进行搜索。
可以使用官方提供的 插件配置搜索功能

1
npm install hexo-generator-searchdb --save 

然后在站点_config.yml文件中加入以下内容,提供一个搜索的页面:

1
2
3
4
5
search:
path: search.xml
field: post
content: true
format: html

然后在主题的_config.yml中启用搜索:

1
2
local_search:
enable: true

#配置站点浏览量、访问量

打开busuanzi_count的开关即可,可以展示站点总计浏览量、文章浏览量。

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye

#文章字数统计、阅读时间预估

首先是安装next推荐的 symbols_count_time插件,然后再配置文件中开启统计即可。

1
npm install hexo-symbols-count-time

开启统计:

1
2
3
4
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false

#首页文章列表自动截取摘要

针对hexo-theme-next 7.8.0版本,使用以下方法配置首页文章列表自动截取摘要。
首先安装摘要插件:

1
npm install hexo-excerpt --save

然后在主题配置中添加以下配置:

1
2
3
4
5
excerpt:
depth: 10
excerpt_excludes: []
more_excludes: []
hideWholePostExcerpts: true

#文章段落折叠

对段落或者代码很长的内容,可能有折叠需求,Markdown语言支持自动折叠的功能。

段落/代码折叠示例
1
2
3
4
5
<details>
<summary>Title</summary>

content!!! 注意summary与该内容之间要空一行,部分编辑器可能不支持此功能。
</details>

#相关文章推荐

该功能会列出与当前文章相关联的博文推荐,由hexo-related-popular-posts提供支持,Next已集成此功能。
首先安装该插件:

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

然后再配置文件中开启推荐功能:

1
2
3
4
5
6
7
8
9
10
related_posts:
enable: true
title: 相关文章推荐 # 标题名称
display_in_home: false # false代表首页不显示
params:
maxCount: 5 # 最多5条
#PPMixingRate: 0.0 # 相关度
#isDate: true # 日期显示
#isImage: false # 是否显示配图
#isExcerpt: false # 是否显示摘要

配置参数后,clean本地缓存,然后运行:

1
2
hexo clean
hexo server # hexo server -p port_num ,指定端口运行

#推荐置顶

对默认以时间排序的方式做一个功能增强,加入置顶功能。
修改hexo-generator-index的排序函数为以下内容,路径为: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
29
30
31
32
'use strict';

const pagination = require('hexo-pagination');
const { sort } = require('timsort');

module.exports = function(locals) {
const config = this.config;
const posts = locals.posts.sort(config.index_generator.order_by);

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) {
return -1;
}else if(!a.top && b.top) {
return 1;
}else {return b.date - a.date}; // 都没定义按照文章日期降序排
});

const paginationDir = config.pagination_dir || 'page';
const path = config.index_generator.path || '';

return pagination(path, posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

然后在文章标题处添加置顶的标识,修改themes/next/layout/_macro/post.swig文件,在<div class="post-meta">标签下加入内容:

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

#进度条配置

theme-next-pace提供了在文章打开时候提供进度条显示功能。
首先下载样式文件至Next主题中:

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

然后在配置文件中开启pace配置(配置好之后需要clean缓存再次运行):

1
2
3
pace:
enable: true
theme: minimal

四、撰写博客与发布

Hexo采用标准Markdown语法进行文章撰写,一篇博文中通常会包含Front-matter元数据、正文内容。Front-matter元数据包含title、创建日期、tag、以及其他插件所依赖的字段信息(例如:是否显示评论)等内容。Front-matter在博文上方以 --- 与正文内容区分开,不会直接显示在发布的博文中。Hexo通过generage命令生成博客站点静态文件,用于部署在服务器上对外提供服务。

4.1 博文撰写

可以通过以下命令生成一篇博文,然后在此基础上完善内容:

1
hexo new [layout] <title>

Hexo 有三种默认layout:post、page 和 draft。在创建这三种不同类型的文件时,它们将会被保存到不同的路径。draft文章不会直接显示在站点中。

布局 路径
post source/_posts
page source
draft source/_drafts

可以使用一些Markdown工具来写博文,提高生产力。 针对VScode的插件,直接搜索markdown就可以安装。
也可以使用hexo-admin来管理博文:

1
npm install --save hexo-admin

然后打开:http://host:port/admin/ 就可以访问了admin页面了。

4.2 博文发布

通过generate命令,在博客根目录下的 public文件夹生成站点静态文件,该文件用于发布。

1
hexo generage

Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。
首先需要在站点_config.yml文件中配置deploy信息,支持git等方式。然后在服务器配置好git服务,将服务器的内容目录和git分支对应,实现服务器可读取git分支内容,然后通过hexo deploy就可以实现一键部署了。
如果提示git缺失之类的错误,执行一下命令安装:

1
npm install hexo-deployer-git --save

配置文件_config.yml内容如下:

1
2
3
deploy:
- type: git
repo: user@host:/root/blog.git,master # git 地址

执行部署,当执行 hexo deploy 时,Hexo 会将public目录中的文件和目录推送至_config.yml 中指定的远端仓库和分支中,并且完全覆盖该分支下的已有内容:

1
hexo deploy

至此,程序员在旅途博客站点主体搭建完毕。