hexo博客附加优化指南

Part1 前言

话不多说,先给大家看看我的博客,欢迎互换友链!

大家都有自己的博客吧(如果没有可以看这篇文章这篇文章快速搭建一个属于自己的hexo博客并且进行基础优化)

那么大家是否知道怎么对自己的博客进行进一步优化呢?请看我下面的文章。

Part2 速度优化

在你做了许多优化后,会发现网站打开速度明显慢了很多,怎么办呢?

1.改变自己博客的部署位置

github是一个国外的网站。由于众所周知的原因,速度非常慢。那么怎么加速呢?改变自己博客的部署位置即可!

下面大家可以看看我的博客的打开速度

改到哪里呢?可以用腾讯云开发者平台,这个是国内的,而且免费,是一个不错的选择,但是我听说可以在coding上弄,便直接注册了一个企业版(捂脸,企业只有我一个人),只需要手机号验证即可。我推荐使用腾讯云的。腾讯云的和coding操作差不多,下面以coding为例,进行演示

先新建一个项目,然后点静态网站

图片.png

新建网站,然后这样填写即可

图片.png

在项目里新建一个ssh公钥,公钥内容直接从github用的那个复制即可,如果删了就再弄一个。
图片.png

图片.png

接着绑定你的域名,在你的域名注册商添加他提示的Cname解析即可
图片.png

然后回到本地配置,打开博客的_config.yml文件,我是同时部署到github和coding,所以是这样填写的,腾讯云同理

1
2
3
4
5
deploy:
type: git
repo:
github: git@github.com:johnvp22/johnvp22.github.io.git,master
coding: git@e.coding.net:lijiaan/lijiaan.coding.me.git,master

然后再hexo d即可!

2.安装cdn

这个主要是针对国外的用户,安装cloudflareCDN可以快许多,还有SSL证书自动配置,很方便。

注意,coding和腾讯云用户极不推荐使用cloudflare加速,反而会变慢很多。

3.安装https证书

这个如果是coding或github的话会自动配置,如果使用netlify的话则需去这个网站注册一个,再根据提示配置即可。

Part3 SEO优化

SEO,即搜索引擎优化,这个东西可以让百度收录你的博客,并且提升排名。我的博客已经被收录了。(好像如果博客放在github上的话,搜索引擎爬不上去)
图片.png

注意,如果你是.tk域名的话,百度不会收录,推荐大家购买.top或.xyz域名,首年最低1块钱,就是需要实名认证。ml域名我还没有试过。

1.打开自动推送到百度

如果你的主题配置文件里有这个选项的话,设为true即可(大部分主流主题都有)

1
baidu_push: true # 这里改为true即可

2.添加博客的描述

添加描述系很重要滴!

修改博客根目录下配置文件,如下:

1
2
3
4
5
6
7
8
# Site
title: xxx的博客 # 标题
subtitle: by xxx # 次标题
description: xxxxxxxxxx # 描述,这里要填写
keywords: xxxxx # 关键词也最好填一下
author: xxx
language: zh-CN
timezone:

3.Sitemap

这个是要提交给搜素引擎的,但是如果你没有熊掌号的话,那么就不能提交给百度了,只能让百度自行爬取robots.txt里的sitemap地址了

先用git安装sitemap插件

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

博客配置文件里这里修改成自己的域名

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.xxx.xxx # 这里修改
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

下次hexo g+hexo d博客的根目录下就可以看到自己的站点地图了

4.robots.txt

这个文件是告诉搜索引擎哪些目录要访问,哪些目录不要访问的,下面给出一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /about/
Allow: /talk/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /fancybox/

Sitemap: https://www.lijiaan.top/sitemap.xml
Sitemap: https://www.lijiaan.top/baidusitemap.xml

Part3 美化

当然,一个好的博客必须要好看啦~

1.添加二次元模型

先安装插件

1
npm install hexo-helper-live2d --save

然后在博客配置文件里添加如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
model:
use: live2d-widget-model-miku
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
display:
superSample: 2
width: 150
height: 300
position: right
hOffset: 0
vOffset: -20
mobile:
show: true
scale: 0.5
react:
opacityDefault: 0.7
opacityOnHover: 0.2

然后去这里下载你想要的模型,放到node_modules文件夹下,修改上面的use变量就可以啦

2.添加背景网状脚本

先用git在博客根目录下安装脚本

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

再在主题配置文件里找到如下配置项,修改为true即可

1
2
canvas_nest:
enable: true

下面可以修改颜色和数量

3.添加背景音乐

在网易云音乐生成外链播放器
图片.png
得到这样一段代码

1
2
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=459434585&auto=1&height=66">
</iframe>

打开\themes\next\layout\_macro\_config.yml文件,在

1
2

{% if theme.custom_file_path.sidebar %}

前添加

1
2
3
4
5

<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=459434585&auto=1&height=66">
</iframe>
</div>

中间两行那里可以换成自己获取的代码

效果:

4.添加友情链接区

在主题配置文件内找到blog rulls修改成如下配置项,推荐设为inline,否则可能显示不下

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: 友情链接
#links_layout: block
links_layout: inline
links: # 自行修改
洛谷: https://www.luogu.org
xxx: http://www.xxx.xxx

Part4 实用功能

1.添加valine评论系统

gittalk每篇文章都要新建issue,太麻烦……

valine评论需要LeanCloud,国内的服务需要身份证,所以有一位大佬告诉我可以使用国外的……

这里注册,登录,新建一个应用,在设置中拷贝你的appkey和appid,粘贴到下面的配置项里

还有要添加自己的web安全域名

图片.png

1
2
3
4
5
6
7
8
9
10
11
valine:
enable: true
appid: xxxxx # 这里
appkey: xxxxx # 这里
notify: false
verify: false
placeholder: 欢迎来评论~٩(๑❛ᴗ❛๑)۶
avatar: mm
guest_info: nick,mail,link
pageSize: 10
visitor: false

2.安装valine-admin

在leancloud应用的云引擎配置界面填写代码库如下:https://github.com/DesertsP/Valine-Admin.git

再在下面添加一大堆环境变量(以下表格数据来自valine-admin官方搭建指南) | 变量名称 | 示例 | 作用 |
| :———-: | :———-: | :———-: |
| SITE_NAME | lijiaan的博客 | [必填]博客名称 |
| SITE_URL | https://www.lijiaan.top | [必填]首页地址 |
| SMTP_SERVICE | 163 | 邮件服务提供商,支持 QQ、163、126、Gmail 以及 更多 |
| SMTP_USER | johnvp@163.com | [必填]SMTP登录用户 |
| SMTP_PASS | xxxxxxxx | [必填]SMTP登录密码(QQ邮箱需要获取独立密码) |
| SENDER_NAME | lijiaan | [必填]发件人 |
| SENDER_EMAIL | johnvp@163.com | [必填]发件邮箱 |
| ADMIN_URL | https://lijiaan.avosapps.us/ | [建议]Web主机二级域名,用于自动唤醒(这个怎么获取看下面) |

在下面添加你要的主机域名,以后通过这个链接管理评论

切到部署页面,分支填master,按部署,过一会,就可以了

再切到定时任务里面,这里新建两个任务,注意官方教程上的cron表达式因为leancloud最近更新了这个规则已经不能使用,selfwake的任务需要写为0 */20 7-23 * * ?,另一个不用更改,为0 0 8 * * ?

resend_mail函数配置

self_wake函数配置

这样就可以了!

3.添加留言区

到博客根目录下git运行hexo n page talk

发现\source\talk\下多了一个index.md

title改为”讨论”,下面写一些你要在留言区上面显示的话就可以了。

然后在主题配置文件中menu配置项下添加如下配置项:

1
talk: /talk/ || pencil

就可以了!

谢谢你看到这里!