Fork me on GitHub

搭建自己的Hexo博客(3)

前言

搭建自己的Hexo博客(2) 这篇文章,时隔一段时间,我对自己的博客陆陆续续又进行了部分优化,特地总结了下。

正文

图片存储问题

原来blog的图片也随静态页面托管在Github Pages 上的,后来页面访问加载速度很慢,而且图片本来较大,上传至Github上也是比较费劲的。

就考虑到将其存储到OSS服务上,由于我的域名没有经过网络备案,因此无法开启CDN服务,开启CDN服务后可以进一步提高图片加载速度。

我的域名在阿里云申请的,进而选择了阿里云的OSS服务。

PS:当然,对于阿里云,CDN服务和OSS服务都是要收取一定费用的。

我们登陆阿里云,选择对象存储OSS服务,如未开通请选择开通,而后新建一个我们blog的Bucket,找到文件管理选项,选择上传文件,上传我们的blog图片,上传成功后,可以通过复制图片URL的方式拿到图片地址,将博文中的图片地址指向此路径即可。

upload successful

upload successful

因为上传到OSS图片并在blog中使用后,图片的地址会被暴露在网页上,为了防止图片地址被盗用,我们可以设置只允许我们的域名可以访问图片,以进一步确保安全,如下:

upload successful

添加相册功能

我们为blog添加相册功能,进一步美化blog。

我们可以为相册增加一个标签,如图所示,点击进入到相册页面。

upload successful

在 next 主题的config文件里添加相册(photos)标签,如下:

1
2
3
4
5
6
7
8
9
10
11
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
support: /support/ || support
photos: /photos/ || photo

PS: 如果不显示中文(相册),只显示photos,需要在next主题里的languages/zh-Hans.yml 里配置 photos: 相册

添加完标签后,回到hexo的source文件夹,在里面新建photos文件夹,并在该文件夹里新建index.md 文件,内容如下:

1
2
3
4
5
6
7
title: 相册
comments: false
type: photos
noDate: true
---

<div class="ImageGrid"></div>

ImageGrid的div即用来存放相册的一个div。

我们在博客的根目录下新建photosTool.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
33
34
35
36
"use strict";
const fs = require("fs");
const sizeOf = require('image-size');
const path = "source/images_backup/photos";
const output = "source/photos/photos.json";
var dimensions;
fs.readdir(path, function(err, files) {
if (err) {
return;
}
let arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile(output, JSON.stringify(arr, null, "\t"));
return;
}
fs.stat(path + "/" + files[index], function(err, stats) {
if (!files[index].endsWith(".jpg") || files[index].endsWith(".jpeg")) {

}
if (err) {
return;
}
if (stats.isFile()) {
if (files[index].endsWith(".jpg") || files[index].endsWith(".jpeg") ||
files[index].endsWith(".mp4") || files[index].endsWith(".png") || files[index].endsWith(".gif")) {
dimensions = sizeOf(path + "/" + files[index]);
console.log(dimensions.width, dimensions.height);
arr.push(dimensions.width + '.' + dimensions.height + ' ' + files[index]);
}

}
iterator(index + 1);
})
}(0));
});

这个js用于获取图片的长和宽,以便可以获得更好的展示效果,同时,她会生成一个photos.json的文件,里面保存这图片的长和宽,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[
photo-1-1.jpg,
"3200.2000 photo-10.jpg",
"1920.1200 photo-11.jpg",
"1920.1080 photo-12.jpg",
"1920.1200 photo-13.jpg",
"1920.1080 photo-14.jpg",
"1920.1080 photo-15.jpg",
"1920.1200 photo-16.jpg",
"1920.1080 photo-17.jpg",
"1920.1186 photo-18.jpg",
"1920.1080 photo-19.jpg",
"1024.610 photo-2.jpg",
"2200.1400 photo-3.jpg",
"1200.750 photo-4.jpg",
"3500.1898 photo-5.jpg",
"1080.1920 photo-6.jpg",
"1600.1120 photo-7.jpg",
"1728.1080 photo-8.jpg",
"1920.1080 photo-9.jpg"
]

这个文件我生成在了photos文件夹下。

可以看到它们的图片是从source/images_backup/photos路径下获取的。

为提高相应速度,需要将这些图片放到阿里云OSS上,存放到上面后,我们需要一个photos.js来解析图片并展示。

找到themes/next/source/js/src文件夹,新建photos.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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
photo = {
page: 1,
offset: 20,
init: function() {
var that = this;
$.getJSON("/photos/photos.json", function(data) {
that.render(that.page, data);
//that.scroll(data);
});
},
render: function(page, data) {
var begin = (page - 1) * this.offset;
var end = page * this.offset;
if (begin >= data.length) return;
var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
for (var i = begin; i < end && i < data.length; i++) {
imgNameWithPattern = data[i].split(' ')[1];
imgName = imgNameWithPattern.split('.')[0]
imageSize = data[i].split(' ')[0];
imageX = imageSize.split('.')[0];
imageY = imageSize.split('.')[1];
li += '<div class="card" style="width:330px">' +
'<div class="ImageInCard" style="height:' + 330 * imageY / imageX + 'px">' +
'<a data-fancybox="gallery" href="http://sakuratears.oss-cn-beijing.aliyuncs.com/blog/photos/' + imgNameWithPattern + '?raw=true" data-caption="' + imgName + '">' +
'<img src="http://sakuratears.oss-cn-beijing.aliyuncs.com/blog/photos/' + imgNameWithPattern + '?raw=true"/>' +
'</a>' +
'</div>' +
// '<div class="TextInCard">' + imgName + '</div>' +
'</div>'
}
$(".ImageGrid").append(li);
$(".ImageGrid").lazyload();
this.minigrid();
},
minigrid: function() {
var grid = new Minigrid({
container: '.ImageGrid',
item: '.card',
gutter: 12
});
grid.mount();
$(window).resize(function() {
grid.mount();
});
}
}
photo.init();

可以看到,我们主要是解析原来生成的photos.json文件,获得长和宽,并将其放到card框里,同时图片是通过OSS获取的。

要使该js生效,需要被引用并加载,打开themes/next/layout/_scripts/commons.swig文件,添加photos.js的引用,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if page.type ==='photos' %}
{%
set js_commons = [
'src/utils.js',
'src/motion.js',
'src/minigrid.min.js',
'src/photos.js'
]
%}
{% else %}
{%
set js_commons = [
'src/utils.js',
'src/motion.js'
]
%}
{% endif %}

{% for common in js_commons %}
<script type="text/javascript" src="{{ url_for(theme.js) }}/{{ common }}?v={{ theme.version }}"></script>
{% endfor %}

PS:一些自己想实现的其它功能,如果有新的js文件,也可以做如下的添加方式,另使photos.js生效不仅仅只可以添加到这儿,也可以通过其它的地方引入,考虑到以后维护的方便,我们可以统一添加到了这里。

可以为相册相框添加缩放效果及一些其它效果,我的相框的css样式如下:

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
//图片鼠标靠近放大效果
.fancybox img {
display: block;
border: 0;
width: 100%;
transform: scale(1);
transition: all 1s ease 0s;
-webkit-transform: scale(1);
-webkit-transform: all 1s ease 0s;
}
.fancybox:hover img {
transform: scale(1.1);
transition: all 1s ease 0s;
-webkit-transform: scale(1.1);
-webkit-transform: all 1s ease 0s;
}

.ImageGrid {
width: 100%;
max-width: 1040px;
margin: 0 auto;
text-align: center;
}

.card {
overflow: hidden;
transition: .3s ease-in-out;
border-radius: 8px;
background-color: #ddd;
}

.ImageInCard img {
padding: 0 0 0 0;
}

.TextInCard {
line-height: 54px;
background-color: #ffffff;
font-size: 24px;
}

这个css内容我们添加到themes/next/source/css/_custom/custom.styl文件夹里。

最终效果如下:

upload successful

upload successful

SEO 相关优化

这一块的优化还是蛮多的,我挑几个比较重要的说下。

我们知道,我们的blog有了域名后,相当于发布在了外网,为了提高blog阅读量,需要对blog或者其它方面做些工作,这都可以称谓博客的SEO优化。

编写质量高的原创博文

这一条基本不用多说,好的文章从不缺少流量。关键在于作者提高自身的写作水平。

更改博文生成结构

使用hexo生成博文时,博文的生成方式(permalink)为blog/:title:year:month:day/这种格式,这种是不便于搜索的,因为相当于四级目录,我们可以改为blog/:title.html这种格式。

在hexo 的 config.yml文件里进行修改,并重新运行命令生成博文。

1
2
3
4
url: https://www.sakuratears.top
root: /
permalink: blog/:title.html ## SEO优化
permalink_defaults:

禁止外链

我们在写作博文时,有可能引用到其它博文的文章,会有指向其它博文的链接,这样是不便于SEO的,我们又不能去掉该外链而影响到博文功能。因此我们可以引入 hexo-autonofollow 插件,在package.json文件里配置并安装该插件后,在hexo的config.yml文件里添加如下配置。

1
2
3
4
5
## nofollow  SEO 优化
nofollow:
enable: true
exclude: # 除外的链接
- ‘https://www.sakuratears.top’

可以使网页爬虫更好的获取我们的页面数据,提高SEO。

人为发布博客外链

这个就比较简单了,我们可以在一些平台等地方发布我们的博客地址,提高曝光度,提高SEO。

使百度、谷歌、必应等网站收录你的网站

这项是一项漫长而又复杂的过程,但也是效果最明显的一个。

我们如果有百度账号的话,可以登陆百度站长平台,将我们的站点添加百度收录。

upload successful

如果网站已备案,添加备案号可以加快收录速度。

我们可以在链接提交-自动提交-sitemap里添加我们网站的sitemap.xml并提交,以加快百度对我们网站的收录。

upload successful

同时在自动推送里,我们看到我们可以使用js进行自动推送,由于hexo已经集成了该功能,我们简单设置下就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------

# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: true
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

可以看到hexo里面集成的baidu_push.swig内容和百度提供的js是一样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.baidu_push %}
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

我们可以使用手动抓取功能对我们的网站进行抓取,如下效果图。

upload successful

PS:由于网络等一些原因,有可能抓取失败。

弄好后,过一段时间,可以看到数据的变化。

upload successful

我们可以通过 site:www.sakuratears.top来检查百度是否收录了我们的网站,如图。

upload successful

PS:我在bing上进行测试,发现必应收录的比百度要快。

upload successful

后来查询了解得知Github屏蔽掉了百度爬虫,所以一些blog作者在国内托管到Coding或者Gitee上,在国外托管到GitHub上,以加快博客访问速度,提高SEO优化。

有关这一块内容,我准备后面在处理。

结语

今天差不多就这些了,关于博客的一些其它优化内容我会在整理一下。

一些其它的想法:

  • 原来blog的音乐播放器直接使用的网易云的,但是我们公司居然把网易云墙了,而且考虑到歌曲以后可能放在那边会404等情况,下阶段优化考虑使用Hexo的aplayer去处理,并将音乐放到OSS存储上。

  • 关于托管到Coding或者Gitee上的问题,也要研究下。

  • 每次看博客是都会出现live2D妹子,可能并不是所有人都喜欢,也有时候觉得碍事,可能考虑新增一个关闭按钮,可以主动开启或关闭live2D妹子。

  • 部分页面需要美化下,SEO的部分还要看看有没有需要总结的,毕竟SEO优化是条漫长的道路。

以上。




-------------文章结束啦 ~\(≧▽≦)/~ 感谢您的阅读-------------

SakuraTears wechat
扫一扫关注我的公众号
您的支持就是我创作的动力!
0%