程序员在旅途

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

0%

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

置顶 | 发表于 更新于 分类于 Valine：
本文字数： 6.9k 阅读时长 ≈ 6 分钟

一、建站背景

　　之前一直有在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

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

相关文章推荐