Hexo Next博客配置和SEO优化

SEO优化

在Gitlab上面搭建的博客,最近又买了域名给搭建了起来,文章有了,但是发现百度和Google的索引量比较少,乘着国庆假期抽空又折腾了一番,添加了百度和google收录,更换了静态资源cdn地址,对静态资源进行了压缩。

静态资源压缩

百度收录

在搜索引擎中输入site:<域名>, 如果没有被收录可以点击“网址提交”来提交网站。百度链接提交

生成站点地图

我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎。

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

然后修改博客next主题目录下的配置文件

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: http://dp2px.com
root: /
permalink: :title.html
permalink_defaults:

执行完之后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件,可以通过<域名>/sitemap.xml和<域名>/baidusitemap.xml查看。

提交链接

向百度提交链接的方式:

  1. 主动推送:最为快速的提交方式,推荐您将站点当天新产出链接立即通过此方式推送给百度,以保证新链接可以及时被百度收录。
  2. 自动推送:最为便捷的提交方式,请将自动推送的JS代码部署在站点的每一个页面源代码中,部署代码的页面在每次被浏览时,链接会被自动推送给百度。可以与主动推送配合使用。
  3. sitemap:您可以定期将网站链接放到sitemap中,然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap,对其中的链接进行处理,但收录速度慢于主动推送。
  4. 手动提交:一次性提交链接给百度,可以使用此种方式。

主动推送

安装插件

1
npm install hexo-baidu-url-submit --save

然后再根目录的配置文件中新增字段

1
2
3
4
5
baidu_url_submit:
count: 100 # 提交最新的一个链接
host: www.dp2px.com # 在百度站长平台中注册的域名
token: 89999GuMdOqBN # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里

加入新的deploye

1
2
deploy:
- type:baidu_url_submitter

这样执行hexo deploy的时候,新的链接就会被推送了

自动推送

在主题配置文件下设置,将baidu_push设置为true

1
2
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

然后就会将一下代码自动推送到百度,位置是themes\next\layout_scripts\baidu_push.swig,这样每次访问博客中的页面就会自动向百度提交sitemap

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 %}

主动提交sitemap

百度sitemap提交地址

将你的sitemap路径填入,输入验证码,然后点击下面的提交就可以了。

主动提交sitemap

Google收录

和百度收录类似,在google里面输入site:<网址>

添加google收录

gulp压缩

gulp可以帮助我们将网址中的源码空格和换号去掉,压缩css、js和图片文件,这样就可以提高网站的访问速度。

安装gulp

1
2
npm install gulp -g --save
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

在工程根目录创建gulpfile.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
48
49
50
51
52
53
54
55
56
57
58
59
60
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
}))
.on('error', function(err) {
console.log('html Error!', err.message);
this.end();
})
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});


// 压缩图片任务
// 在命令行输入 gulp minify-images 启动此任务
gulp.task('minify-images', function() {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin(
[imagemin.gifsicle({'optimizationLevel': 3}),
imagemin.jpegtran({'progressive': true}),
imagemin.optipng({'optimizationLevel': 7}),
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public/images'));
});

// 默认任务
gulp.task('default', [
'minify-html','minify-css','minify-js', 'minify-images'
]);

当我们执行完hexo g后执行gulp命令就可以压缩代码

1
hexo g && gulp

本站是托管在gitlab上面的,所以.gitlab-ci.yml中如下(注意23~25行)

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
before_script:
- apt-get update -qq && apt-get install -y -qq pandoc
image: node:8.11.3
pages:
cache:
paths:
- node_modules/
script:
- git config --global user.email "lxq_xsyu@163.com"
- git config --global user.name "lxqxsyu"
- npm install hexo-cli -g
- npm install
- npm uninstall hexo-renderer-marked --save
#- npm install hexo-renderer-pandoc --save
- npm install hexo-generator-sitemap --save
- npm install hexo-generator-baidu-sitemap --save
- npm install hexo-baidu-url-submit --save
- npm install hexo-util --save
- npm install --save hexo-generator-search
- npm install image-size --save
- npm i --save hexo-wordcount
- npm install hexo-asset-image --save
- npm install gulp -g --save
- npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
- hexo g && gulp
- hexo deploy
artifacts:
paths:
- public
only:
- master

网页监控

我们的网站每天是否都在正常运行,可以用Uptime Robot来为我们免费监听。

Uptime Robot官网地址:https://uptimerobot.com/
本站演示地址:https://status.dp2px.com/

第一步:注册并添加网站

Uptime Robot

第二步:勾选要发送警告通知的联络人

Uptime Robot

第三步:生成静态状态页面

Uptime Robot