0%

Hexo + 阿里云服务器搭建个人博客网站

零基础搭建博客网站,保姆级详细记录。

0 写在前面

0.1 为什么要搭建这个网站

起初的想法很简单,主要是想拥有一个自己的 “云端笔记系统”。好记性不如烂笔头,虽然也曾尝试着使用印象笔记、OneNote等诸多类似的产品,但换来换去终究没有一款称心的(可能是我太挑剔了?🌚)。后来偶然发现竟然还有搭建个人博客网站这种操作,当即兴趣盎然,对于我这种勇(shan)于(chang)挑(zhe)战(teng)的人,不尝试一下怎么行?!🙈 于是乎各种查资料,参考别人的经验,摩拳擦掌,蠢蠢欲动,然而真正操作起来才发现真是各种坑💩…… 虽然网上有各种资源和教程,但大多面向的是一些专业人员,对于我这种零基础之人,执行起来颇为困难。整个搭建过程涉及太多编程方面的知识,linux系统中一些简单的操作命令,Vim编辑器的常用命令,git的简单使用等等,这些对于我这个非程序猿而言是相当晦涩且繁琐的。最怕的是出现BUG,往往需要尝试很多方法才可以解决。还好功夫不负有心人,在折腾了N次之后终于在2月份把这个网站成功部署上线😆

然而,网站上线之后我却开始自我怀疑与否定了……

花这么长时间、这么大精力搞这么个玩意儿真的值得吗?起初确实是有好奇心和虚荣心在作祟,毕竟拥有一个自己的网站是一件很酷的事儿。但是,之后呢?就像每次都以锻炼的名义买一些运动衣物,等所有装备都到齐,反而偷懒耍赖去了。在这种自我怀疑的情绪中,这个搭建好的网站也被我闲置了很长一段时间😞

重新开始打理这个网站已经是半年后了。一来确有需要,以前的知识需要整理回忆,新知识又要及时记录。二是想给自己一个“空间”,不仅存储知识,还有所思所想、所感所悟。它不应该只是一个“知识笔记本”,还应是一个“思想笔记本”、“情绪笔记本”、“人生笔记本”…… 想到这里,也就决定了要把这个网站长期维护下去

0.2 为什么是Hexo

博客网站的搭建有多种方案,WordPressHexoHugoJekyll 等等,各个框架有其优点和特色。本博客使用的是Hexo框架,并非表示Hexo就是最优的方案,仅仅是因为我一开始接触的就是Hexo框架,没有尝试别的,也没有进行对比,所以对其他方案不甚了解。事实是,在我一股脑儿搭建完这个网站之后,才了解到原来有这么多框架可以选择。所以,如果你也有兴趣搭建一个自己的网站,大可以多多了解之后再做选择。当然,如果不想在搭建平台上浪费时间,尽可以选择现有的平台,微信公众号、简书、CSDN等都是不错的选择。然而我还是情愿自己搭建平台的,按照自己的意愿规划部署,这种DIY的乐趣以及成功后的满足感,不亲自体会是不会理解的😆

因为非科班出身,这个网站的搭建耗费了我大量精力,为防以后有需要,也给和我一样的“小白”们一个参考,特意记录此网站的搭建过程。考虑到实际操作性,本文只记录操作指令,不涉及背后原理,况且我也不懂👐……

1 本地环境搭建

1.1 Node.js的安装与配置

Hexo是基于Node.js开发的,因此需要先安装Node.js。下载链接: Node.js官网Node.js淘宝镜像源。需要注意的是,Node.js有长期支持版和当前发布版两个版本。当前发布版版本较新,相应配套组件更新不及时,后续安装使用Hexo会出现一些未知错误,因此注意下载使用长期支持版。现阶段长期支持版已经更新到14.15,这个版本还是太新,在后续操作中会引起一些报错(具体报错内容可参考此文),建议安装12版本左右的长期支持版 。安装过程中除了可以自定义安装路径外,其余选项建议都采用默认方式。

npm是node.js自带的一个包管理器,后续安装hexo博客和插件时会经常用到。npm仓库是国外的地址,国内下载速度可能较慢,更换为国内镜像源后可大幅提高使用体验。在Win10系统的菜单栏里有命令提示符(即cmd)和Windows PowerShell(以下简称Shell)的快捷链接,打开任意一个均可,此处以Shell演示。

在打开的Shell窗口输入以下命令,即可把npm仓库源更换为淘宝仓库源:

1
npm config set registry https://registry.npm.taobao.org/

然后在Shell窗口输入以下命令,如果出现下图中红框部分表示更换成功:

1
npm config ls

1.2 Hexo的安装

在Shell窗口输入下面这条指令安装Hexo框架:

1
npm install -g hexo-cli

在进行下一步之前,先要决定博客文件存放的位置,比如我想把所有的博客文件存放于D盘的blog文件夹中,那首先需要使用指令 cd d: 切换当前位置,如下图:

按照上图切换成功后,输入下面的指令建立自己的blog文件夹(这条指令会自动创建一个名为blog的文件夹,不需要额外创建文件夹)。

1
hexo init blog

此外,因为后续工作需要,还需要分别安装 hexo-server 和 hexo-deployer-git ,安装命令如下:

1
2
npm install hexo-server --save
npm install hexo-deployer-git --save

至此,博客框架已经安装完毕。切换至博客文件夹路径,执行hexo serverhexo s,如果返回下图信息,表示博客本地环境成功运行:

在电脑浏览器打开http://localhost:4000可以看到默认的博客界面。

1.3 安装过程中遇到的坑

  • 第一个坑

在执行hexo init blog指令时,遇到”无法加载文件脚本“的问题,下面贴出解决过程,以供参考。

解决思路来自博客webpack : 无法加载文件。首先以管理员身份打开Windows PowerShell,输入get-ExecutionPolicy,返回显示Restricted(表示状态是禁止的),然后输入set-ExecutionPolicy RemoteSigned更改策略,输入A选择全是,再次输入get-ExecutionPolicy可以看到已经更改成功,再次执行hexo命令即可正常执行。

  • 第二个坑

执行npm install hexo-server --save指令时,报错提示ENOENT: no such file or directory, open 'C:\Users\WangZC\package.json',意思是缺少了一个package.json的文件(可能是一时手欠误删?😤 ),不过同样是可以解决的,首先执行npm init -f指令,该指令会生成一个package.json文件,用文本编辑器打开后在description字段后随便添加一些字母,再在文件末尾添加"private": true即可,效果如下:

1
2
3
4
5
6
{
...
"description": "ABC",
...
"private": true
}

2 云服务器环境搭建

2.1 域名的购买与备案

是否购买域名完全看个人需求,如果要求不高,可以采用Hexo+GitHub的方案(参考GitHub+Hexo 搭建个人网站详细教程)。只是会在域名后添加一个.github.io的后缀,如iamzc.github.io。想要一个专属的个性域名就需要购买了,本站域名iamzc.wang是在阿里云上购买的。现在域名后缀比以往丰富很多,不用再局限于.com.cn等,而且其他后缀的域名也相对便宜,不过也不要购买太少见的,以免无法备案(阿里云购买时会有提醒)。

个人博客网站并不一定要备案。如果使用国外服务器,不备案也可以正常访问。如果是购买国内的云服务器,那就要求必须备案了。各个云服务器提供商都会提供备案接口,按照步骤一步步操作即可,此处不再赘述。阿里云网站备案点击这里

在这里记录一下备案时遇到的一些”小插曲“。不同省份备案规则不同,以个人身份证信息为准,遵循身份证上住址所在省份的备案规则。虽然在山城生活了许久,但由于本人身份证依旧是老家的信息,所以只能遵循河北省的备案规则。然而河北省的备案规则中有一条要求:“备案时联系电话必须是本人实名认证的河北省手机号!” 😤 没办法,趁着过年回家特意办了一个手机号,才完成备案。

此外,在备案前一定仔细查看个人网站命名要求 中的附录二。我第一次备案时使用的名称是“王志超的博客”,几日后等来的竟然是被拒绝的消息!😕 按照提示查看了相关要求才发现竟然还有那么多要求!在网上看到有个网友分享,先后起了两个名称都被拒绝,后来随便取了一个“健康快乐每一天”,没想到第二天竟然顺利通过了…… 😂 关于网站名称的问题,不用煞费苦心的想一步到位给网站起个好名字,因为备案时的网站名与网站搭建后对外开放的名称是没有关系的。本站备案时的名称是“汤圆薄荷”(不要问我为什么哈哈哈哈😆……),现在网站名称为“理乐志”,二者互不影响。

为了与服务器连接,还需要对域名进行解析,在阿里云官网登陆后,点击右上角的控制台,进入域名列表界面后点击解析进入域名解析页面,按照下图进行配置:

上图中服务器公网IP需要购买云服务器后才能知道,云服务器的购买与配置见下一小节。

2.2 云服务器的购买与连接

2.2.1 云服务器的购买与配置

云端环境的搭建有多种方案,目前比较受欢迎的托管于GitHub上,最大的好处当然是免费,缺点就是慢。一开始我也是采用这种方案,后来实在受不了打开网页时的龟速体验,趁着阿里云搞活动买了个云服务器。本人购买的云服务器只是1核 2 GB 的,但用来部署一个博客网站已经绰绰有余了。目前云服务器厂商很多,阿里云、腾讯云、华为云、七牛云等等,各个厂家为了争夺市场会不定期做一些活动,很多厂商还会针对学生用户有更大力度的折扣活动,大家尽可以选好时机再下手。

云服务器购买后首先安装一个Linux系统(不建议使用Windows),我安装的是64位的CentOS 8.0。在安全设置一栏有设置密钥和自定义密码两种选项,不同选项在远程连接服务器时进行安全验证的方式不同。为了方便,本人使用的是自定义密码方式。

安装后首先需要配置一下安全组规则,进入云服务器管理页面后,在网络与安全下找到安全组,点击进入后添加安全组规则,配置如下:

2.2.2 云服务器的连接

阿里云的管理页面提供了Workbench和VNC两种方式远程连接,但实际体验并不好,这里推荐在本地电脑使用Xshell工具远程连接,个人用户可以使用Xshell免费版 ,安装过程不再赘述。

使用Xshell与服务器连接有两种方式,与前面安装服务器系统时选择的安全设置选项有关,因为我使用的是自定义密码的形式,下面以此连接方式展示。在本地电脑打开Xshell点击新建,在弹出的对话框按照下图设置后连接。

连接后看到下图红框信息表示连接成功。

上图中WARNING信息不影响使用,也可以通过设置消除。依次点击XShell的 “文件” → “当前会话属性” → “隧道”,取消 “转发X11连接到” 之前的对勾。断开后再次连接,就不会有此错误提示了。

2.3 Nginx的安装与配置

Nginx是一款Web服务器,可以托管博客网站的静态资源,实现快速访问。在安装Nginx之前还需要做一些准备工作,首先更新一下系统,然后创建一个目录作为博客网站的根目录:

1
2
3
4
yum update -y    # 更新系统(非必需)
mkdir /home/blog # 在home文件夹下创建一个blog文件夹,作为博客根目录
chown -R git:git /home/blog # 变更该目录的所有者
chmod -R 755 /home/blog # 修改目录权限

Nginx安装命令如下:

1
yum install -y nginx

阿里云默认下载的是fedora版本的nginx,配置文件nginx.conf 位于路径/etc/nginx/ 下,执行以下命令打开配置文件:

1
vim /etc/nginx/nginx.conf

打开后按键盘中的insert键或字母i进入编辑模式,修改配置文件中的以下信息:

1
2
3
4
5
6
7
user: root    #需要修改的内容
...
server {
listen 80; # 云服务器的80端口
server_name chihchao.cn; #此处填域名
root /home/blog; #此处为博客根目录路径
}

修改完成后先按ESC键退出编辑模式,再输入:wq保存并退出。然后执行下面的指令检查配置文件语法是否正确:

1
nginx -t   

如果返回如下信息表示没有问题:

1
2
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

最后启动nginx:

1
2
systemctl start nginx
systemctl enable nginx

2.4 安装Node.js

安装node.js较为简单,安装完成后执行 node -vnpm -v,如果正常返回版本号表示安装成功。

1
2
3
yum install nodejs    # 安装指令
node -v # 查看node版本号
npm -v # 查看npm版本号

3 本地环境与云端环境的连接

Git是分布式版本控制系统,通过git可以实现Hexo代码在本地电脑和云服务器之间同步。因此,需要在本地电脑和云服务器上分别安装Git,并通过ssh公钥连接。有关Git的具体介绍和使用可参考 Git官网廖雪峰的Git教程

3.1 本地环境安装并配置Git

在进行下列工作之前,首先需要在GitHub上注册一个账号,记下自己的用户名和邮箱。在 Git官网Git淘宝镜像源 下载Git软件,建议使用默认方式安装,也可以自定义安装路径。安装完成后打开“Git Bash”,输入自己在GitHub上注册的用户名和邮箱:

1
2
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"

然后输入生成ssh公钥的指令:

1
ssh-keygen -t rsa

在生成公钥过程中会弹出一些选项,不需要更改,一直按回车即可,部分结果下图:

生成之后就可以在上图提示的文件路径中找到一个“.ssh”的文件夹,文件夹中有“id_rsa”和“id_rsa.pub”两个文件,其中“id_rsa.pub”就是用于连接本地和云服务器的公钥,相当于本地电脑有了一把访问服务器的“钥匙”,接下来的工作就是要把这个公钥配置到云服务器上。

3.2 云服务器环境安装并配置Git

在云服务器上安装并配置git:

1
2
3
yum install -y git 
adduser git
passwd git # 配置git密码

对linux系统不熟悉的用户需要注意,在输入密码时,可视化界面中不会出现任何字符,但实际是已经输入了。配置好密码之后就需要赋予git用户相应权限了:

1
2
chmod 740 /etc/sudoers
vim /etc/sudoers # 打开文件

打开sudoers文件后找到 root ALL=(ALL) ALL 这句内容,按键盘中的i键进入编辑模式,在这句话下面添加一句 git ALL=(ALL) ALL 。如下:

1
2
3
## Allow root to run any commands anywhere
root ALL=(ALL) ALL
git ALL=(ALL) ALL # 添加的内容

添加完成后先按ESC键退出编辑模式,再输入:wq保存并退出,最后把sudoers文件的权限修改回来:

1
chmod 400 /etc/sudoers

至此,云服务器环境的git已配置完成,接下来需要连接本地git和云服务器git。

3.3 使用公钥连接

在接下来的操作中,需要来回切换本地电脑和云服务器环境,我会使用加粗字体特别标注,以此提醒。

Xshell连接云服务器的窗口中,输入以下指令以切换至git用户,创建一个“.ssh”的文件夹,并在此文件下创建一个名为“authorized_keys”的文件:

1
2
3
su git    # 切换至git用户
mkdir ~/.ssh #创建.ssh文件夹
vim ~/.ssh/authorized_keys #创建并打开authorized_keys文件

打开authorized_keys文件后进入编辑模式,在本地电脑中找到3.1小节中创建的“id_rsa.pub”文件,用文本编辑器打开后复制所有内容,切换到Xshell连接云服务器的窗口,把复制的所有内容粘贴在“authorized_keys”文件中,保存并退出后修改云服务器中“.ssh”文件夹和“authorized_keys”文件的权限:

1
2
chmod 600 ~/.ssh/authorized_keys    # 将文件设置为可读可写
chmod 700 ~/.ssh # 将该文件夹设置为可读可写可访问

下面测试一下连接是否成功。在本地电脑打开Windows PowerShell,输入以下指令:

1
ssh -v git@云服务器的公网IP    # 连接时把@后面的文字替换为云服务器的公网IP

出现以下界面表示连接成功:

至此,连接工作已经做完。

3.4 自动化部署

上面的工作已经实现本地与云端环境的连接,但还没有完成自动化部署。在Xshell连接云服务器的窗口中,输入以下指令以切换至root用户,在“home”文件夹下创建一个“git”文件夹:

1
2
3
4
su root    #切换到root用户
cd /home/git
chown -R git:git /home/git #变更该目录的所有者
git init --bare blog.git #创建一个git裸库

在 “blog.git” 裸库中新建一个hooks文件夹,在其下新建 “post-receive” 文件:

1
vim blog.git/hooks/post-receive

进入编辑模式,输入以下命令:

1
2
#!/bin/sh
git --work-tree=/home/blog --git-dir=/home/git/blog.git checkout -f

添加完成后保存并退出,最后赋予这个文件可执行权限:

1
2
chown -R git:git /home/git/blog.git/hooks/post-receive
chmod +x /home/git/blog.git/hooks/post-receive

下面在本地环境与云端自动化部署连接起来。在本地电脑博客主目录文件夹下找到_config.yml 文件,用文本编辑器打开后,找到并修改以下语句:

1
2
3
4
5
6
7
8
# URL
url: http://chihchao.cn # 这里改为个人域名

# Deployment
deploy:
type: git
repo: git@服务器公网IP:/home/git/blog.git
branch: master

此步骤有两个细节需要特别注意:一是本地博客文件夹下有两个_config.yml文件,一个位于主目录文件夹下(D:),一个位于主题文件夹下(D:),此处需要修改的是前者;二是修改时要在英文输入法之下,而且所有冒号后面要加一个空格,如type: git中,type:git之间是有一个空格的,此空格必不可少

然后打开本地电脑Windows PowerShell,切换到博客目录,把博客部署到线上:

1
2
cd d:\bog
hexo deploy

在浏览器中打开自定义的域名,可以看到博客已成功部署(第一次部署可能有延迟,等几分钟即可)。

  • 部署过程中遇到的坑​

在执行hexo deploy时报错error: remote unpack failed: unable to create temporary object directory,在网上查了一下,很大可能是权限不够,在云服务器中使用ll命令查看blog目录和git目录的权限,如果目录所有者不是git用户,重新更改即可:

1
2
chown -R git:git /home/blog
chown -R git:git /home/git

4 主题更改与美化

Hexo的Themes页面有大量主题可供选择,点击此处查看网友总结的一些较为欢迎的主题。本博客使用的是NexT。作为最受欢迎的Hexo主题,NexT页面简洁,支持插件多,可定制性强。而且官网教程详细,对新手友好。因为使用的人多,遇到问题也方便查到解决方案。最新版本可在其 Github页面 查看。

主题的安装按照 NexT官方教程 一步步来,完成基本设置之后再根据需求进行深度改造和美化。以下三篇博客是我优化主题的主要参考:

这些大佬们的文章写的文章已经很清晰了,按照以上步骤基本可以完成主题的美化。不过需要注意的是,这些博客写的时间比较早,是基于老版本的NexT进行优化的。目前NexT已经更新到7.8版,有些优化过程不再像以前那样繁琐,甚至可能会不适用。下面记录一下我基于 NexT 7.8 版本的优化过程。

在开始之前再次强调,Hexo 中有两份主要的配置文件,其名称都是 _config.yml。一份位于站点根目录(~blog)下,是 Hexo 本身的配置;另一份位于主题目录(~blog)下,主要用于配置主题相关的选项;一般前者称为 站点配置文件, 后者称为 主题配置文件 ;在配置过程中一定要分清在哪个文件中更改。

4.1 菜单

主题配置文件 中修改以下内容可更改菜单,也就是网站页面抬头:

1
2
3
4
5
6
7
8
9
10
menu:
home: / || fa fa-home
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
about: /about/ || fa fa-user

# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false

各个menu选项从上到下的顺序也就是网站页面抬头从左到右的顺序,可自行调节更改。|| 之后的字符表示图标,NexT 使用的是 Font Awesome 提供的图标,更改字符即可变换为自己喜欢的图标:

1
2
3
4
5
menu:
home: / || fa fa-house-user
categories: /categories/ || fa fa-th-list
archives: /archives/ || fa fa-folder
about: /about/ || fa fa-user-astronaut

如果不想展示图标可在menu_settings项中,把icons设为false。badges设为true时会在菜单后添加数字。

以上设置只是在页面显示的效果,如果点击“分类”进入页面,会有Cannot GET /categories/的错误提示,这是因为还没有创建该页面。本地shell端执行以下命令创建页面:

1
2
cd d:\blog
hexo new page categories

该命令会在source文件夹下创建一个categories的文件夹(d:),该文件夹下有个“index.md”文档,打开后在最后添加一行type内容:

1
2
3
title: categories
date: 2020-02-25 18:08:27
type: "categories"

按照同样的方法可创建“标签”、“关于”等其他页面。

4.2 更改文章链接样式

站点配置文件 中,文章链接permalink 默认是以日期+文章名的形式展现的,默认代码和效果如下:

1
2
3
4
5
permalink: :year/:month/:day/:title/
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

这种 url 结构不太稳定,一旦修改了文章的文件名,就相应会修改其路径,无法保证链接的永久性。hexo-abbrlink 插件可以很好的解决这一问题。首先安装此插件,在本地电脑shell端执行以下命令:

1
npm install hexo-abbrlink --save

然后在站点配置文件中进行如下修改:

1
2
3
4
5
6
# abbrlink config
permalink: posts/:abbrlink/
permalink_defaults:
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex

修改后效果为:

4.3 添加emoji表情 😄

Github上有一个专门用于hexo的emoji表情插件:hexo-filter-github-emojis 。首先安装此插件:

1
npm install hexo-filter-github-emojis --save

然后在站点配置文件添加如下命令:

1
2
3
4
5
6
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:

stylescustomEmojis两个参数暂时没有用到,具体可参考文档

4.4 添加文章结束标记

首先在博客目录source文件夹下创建一个_data 文件夹(D:\blog\source\_data),再创建一个post-body-end.swig文件,在该文件中添加以下代码:

1
2
3
4
5
6
7
8
9
<div>
{% if not is_index %}
<div style="text-align:center;color:#bfbfbf;font-size:16px;">
<span>-------- 本文结束 </span>
<i class="fa fa-{{ config.post_end_tag.icon }}"></i>
<span> 感谢阅读 --------</span>
</div>
{% endif %}
</div>

站点配置文件末尾添加如下代码:

1
2
3
post_end_tag:
enabled: true # 是否开启文末的本文结束标记
icon: coffee # 结束标记之间的图标,可更换

最后在主题配置文件custom_file_path字段下取消postBodyEnd前的#

1
2
3
4
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
postBodyEnd: source/_data/post-body-end.swig

最终效果如下:

4.5 添加站点运行时间

_data 文件夹(blog\source\_data)下创建一个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
{# 页脚站点运行时间统计 #} {% if theme.footer.ages.enable %}
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-precise-range-plugin@1.3.0/moment-precise-range.min.js"></script>
<script>
function timer() {
var ages = moment.preciseDiff(moment(),moment({{ theme.footer.ages.birthday }},"YYYYMMDD"));
ages = ages.replace(/years?/, "年");
ages = ages.replace(/months?/, "月");
ages = ages.replace(/days?/, "天");
ages = ages.replace(/hours?/, "小时");
ages = ages.replace(/minutes?/, "分");
ages = ages.replace(/seconds?/, "秒");
ages = ages.replace(/\d+/g, '<span style="color:{{ theme.footer.ages.color }}">$&</span>');
div.innerHTML = `{{ __('footer.age')}} ${ages}`;
}
var div = document.createElement("div");
//插入到copyright之后
var copyright = document.querySelector(".copyright");
document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
timer();
setInterval("timer()",1000)
</script>
{% endif %}

主题配置文件footer字段下添加以下命令:

1
2
3
4
5
6
7
8
footer:
ages:
# site running time
enable: true
# birthday of your site
birthday: 20200225
# color of number
color: "#FF0000"

birthday就是网站的创建日期,color是运行时间字体的颜色,这两个参数可以自行更改。

然后在themes\next\languages\zh-CN.yml文件中补齐文案:

1
2
footer:
age: 理乐志已运行

最后在主题配置文件中启用footer.swig文件:

1
2
3
4
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
footer: source/_data/footer.swig

最终效果图:

4.6 添加二次元看板娘

该功能由 hexo-helper-live2d 插件支持,该插件提供多个 模型 ,先择一个喜欢的模型在电脑shell窗口安装插件:

1
2
npm install --save hexo-helper-live2d
npm install live2d-widget-model-haruto #更改自己喜欢的模型

在Hexo的站点配置文件 (推荐)或主题文件中添加配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-haruto
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7

以上设置会在网站所有页面展示看板娘,如果只想在一级菜单页面上显示看板娘,可 参考此篇博文

4.7 添加鼠标点击特效

鼠标点击特效共有四种:火花特效、爆炸特效、爱心特效和文字特效。点击此处 (提取码: evhu)下载“cursor.zip”压缩包,解压后把cursor文件夹放在主题文件夹 blog\themes\next\source\js下,在博客文件夹 blog\source\_data下创建一个body-end.swig文件并添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
<script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
<script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
<script async src="/js/cursor/text.js"></script>
{% endif %}

最后在主题配置文件中取消bodyEnd参数前的注释符,并添加相应命令:

1
2
3
4
5
custom_file_path:
bodyEnd: source/_data/body-end.swig

# mouse click effect: fireworks | explosion | love | text
cursor_effect: fireworks

在四种鼠标点击特效中选择自己喜欢的并更改cursor_effect参数即可。如果想要自定义文字特效,可在cursor文件夹下的text.js文件中更改。

4.8 更改字体

NexT主题默认使用的中文字体是微软雅黑(Microsoft Yahei),看着是真的难受🙈 看了看大佬们的博客,决定把网站的中文字体改为思源宋体(Noto Serif SC)。关于黑体和宋体间的区别、思源宋体的介绍可以看下面这两篇文章👇

这两个博客中同样也介绍了更改字体的方法,不过已经不适用于新版本的NexT了,下面给出我的改良方法。

首先在 Google Fonts 上找到 Noto Serif SC ,进入字体页面后选择样式,然后复制网页右侧link中的内容。

~blog\source\_data文件夹下新建一个head.swig文件,把复制的link内容粘贴其中并保存。在站点配置文件 中启用此文件:

1
2
custom_file_path:
head: source/_data/head.swig

最后再把base.styl文件中的“Microsoft Yahei”改为“Noto Serif SC”,保存后重新部署就大功告成😆

1
2
3
4
// 文件位置:~blog\themes\next\source\css\_variables\base.styl

// Font families.
$font-family-chinese = "Noto Serif SC";

如果想修改英文字体则相对简单,只需要修改 站点配置文件Font Settings 的内容即可:

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
# Font Settings

font:
enable: true

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host:

# Global font settings used for all elements inside <body>.
global:
external: true
family: Lora
size:

# Font settings for site title (.site-title).
title:
external: true
family: Lora
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family: Lora
size:

# Font settings for posts (.post-body).
posts:
external: true
family: Lora

# Font settings for <code> and code blocks.
codes:
external: true
family: Lora

4.9 文章置顶功能

博客文章默认按照日期倒序的方式呈现在首页,如果希望某一篇或某几篇文章一直位于首页顶部,那就需要用到置顶功能了。最新版 NexT 主题已经内置了置顶样式,只需要安装一下 hexo-generator-indexed 插件,安装命令如下:

1
npm install hexo-generator-indexed

在需要置顶的文章 Front-matter 中增加一个 sticky 参数, sticky 参数的值应为大于0的整数,表示置顶的优先级(未指定则默认为 0)。数字越大,文章越靠前。

1
2
3
title: Hexo博客之主题美化
……
sticky: 10

这个方法虽然简单,但效果却有点简陋,简单粗暴的在标题前添加了一个与标题文字很不协调的符号。

下面对其进行美化,把置顶符移到文章元数据一栏。打开post.swig 文件,定位到{%- if post.sticky > 0 %} 字段,把以下命令行直接删除(一共有两处):

1
2
3
4
5
6
7
文件路径:blog/themes/next/layout/_macro/post.swig

{%- if post.sticky > 0 %}
<span class="post-sticky-flag" title="{{ __('post.sticky') }}">
<i class="fa fa-thumbtack"></i>
</span>
{%- endif %}

然后在该文件中找到<div class="post-meta">字段,在第一个span标签下添加新的置顶命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="post-meta">
……
{%- if theme.post_meta.created_at %}
<span class="post-meta-item"> {##第一个span标签处##}

{%- if post.sticky > 0 %} {##此行以下为需要添加的内容##}
<span class="post-sticky-flag">
<i class="fa fa-thumbtack"></i>
<font color=FF0000>置顶</font>
<span class="post-meta-divider">|</span>
</span>
{%- endif %}

……

因为NexT内置样式对置顶符号添加了30度的角度旋转,因此还需要把角度改一下:

1
2
3
4
5
6
// 文件路径:blog/themes/next/source/CSS/_common/post/post.styl

.post-sticky-flag {
display: inline-block;
transform: rotate(0deg); //原角度为30deg
}

最终效果如下:

此外,hexo-generator-indexed 插件还具有隐藏文章、隐藏特定分类文章的功能,具体可参考其github页面。

4.10 更换back-to-top按钮

hexo-cake-moon-menu 插件提供一个全新的back-to-top按钮,比NexT原有样式更美观。首先同样要安装此插件,7.8版本以下的NexT需要安装2.1.2版本的back-to-top:

1
npm install hexo-cake-moon-menu@2.1.2

站点配置文件中添加以下命令:

1
2
3
4
5
6
7
8
9
10
11
moon_menu:
back2top:
enable: true
icon: fas fa-chevron-up
func: back2top
order: -1
back2bottom:
enable: true
icon: fas fa-chevron-down
func: back2bottom
order: -2

icon 参数表示图标,可在Font Awesome 找到自己喜欢的图标进行更改。此外,还需要把主题配置文件中的back2top参数关闭:

1
2
back2top:
enable: false # 此处改为false即可

4.10 页面背景及边框圆角

此部分内容参考 nexT主题更改背景图片和边框圆角 。首先是更改背景图和透明度,在 blog/source 目录下新建 images 文件夹用来存储背景图,在blog/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
// 整体背景设置
body {
background: url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:100% 100%;
background-size: cover;
}

//菜单栏的透明度设置
.header-inner {
background: #FFFFFF;
opacity: 0.8;
}

//文章内容的透明度设置
.content-wrap {
opacity: 0.8;
}

//侧边框的透明度设置
.sidebar {
background-color: transparent;
opacity: 0.8;
}

以上命令参数可自行更改调节。然后在 主题配置文件 中启用styles.styl文件:

1
2
custom_file_path:
style: source/_data/styles.styl

至此,背景图更改已完成。下面更改边框圆角,在blog/source/_data 目录下新建一个 variables.styl 文件并添加以下内容:

1
2
3
// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;

然后在 主题配置文件 中启用styles.styl文件:

1
2
custom_file_path:
variable: source/_data/variables.styl

最终效果对比:

参考资料 📚

  1. Hexo官方文档

  2. 廖雪峰的官方网站-Git教程

  3. 鸟哥的Linux私房菜

  4. GitHub+Hexo 搭建个人网站详细教程

  5. 从零搭建Hexo博客并部署阿里云服务器

  6. Hexo部署云服务器的全过程

  7. 阿里云Centos7+Nginx部署Hexo静态博客

  8. 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

  9. NexT官方教程

  10. Hexo 搭建个人博客系列

  11. Hexo NexT深度定制

  12. 打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

  13. Sanarous's Blog

  14. 少女癌的博客

  15. 小康博客

  16. hexo的next主题个性化教程:打造炫酷网站