因为刚开始使用hexo框架，没有配置，所以访问巨慢，国内访问会等1分钟才可以打开网站。
究其原因，发现刚启用
blog框架:hexo
主题框架: NexT
1. SEO 优化
title优化
更改index.swig文件
文件路径是\themes\next\layou
{% block title %}
{{ config.title }}
{% endblock %}
改成:
{% block title %}
{{ config.title }} - {{ theme.description }}
{% endblock %}
添加sitemap
添加sitemap便于搜索引擎可以更加友好的抓取博客内容:
在博客根目录下运行:
npm install hexo-generator-sitemap –save
npm install hexo-generator-baidu-sitemap –save配置_config.yml
#hexo sitemap网站地图 sitemap: path: sitemap.xml
看到有些网站说在配置_config.yml时也要添加
baidusitemap: path: baidusitemap.xml表示添加后直接编译不过，不用添加其实也可以生成baidusitemap.xml
添加robots.txt
将该文件添加至source文件夹下
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://{域名}/sitemap.xml
Sitemap: http://{域名}/baidusitemap.xml
Allow:允许抓取
Disallow:不允许抓取
2. 字体优化
三种方式:
直接在主题配置文件里面禁用font:
font: enable: true修改font的host,因为默认是googleapis所以国内访问巨慢:
font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default) host: fonts.useso.comNexT主题的话如果不嫌麻烦还可以直接:
themes>next>layout>_partials>head>external-fonts.swig
{% if font_families !== '' %}
{% set font_families += '&subset=latin,latin-ext' %}
{% set font_host = font_config.host | default('//fonts.useso.com') %}
{% endif %}
3. 资源文件压缩
使用gulp
添加 gulpfile.js 至与_config.yml同目录的地方,写内容的时候注意一下目录是否与本网站一致
var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var minifyHTML = require("gulp-minify-html"); var htmlclean = require('gulp-htmlclean'); var gutil = require('gulp-util'); var minifyInline = require('gulp-minify-inline'); var inline = require('gulp-inline') var inlineimage = require('gulp-inline-image');
// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin');
var dir = './public'
// 压缩 public 目录 html
gulp.task('minify-html',function() {
var opts = {
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
};
gulp.src('./public/**/*.html')
.pipe(inline({
base: './public/',
disabledTypes: ['svg', 'img'], // Only inline css files
}))
.pipe(minifyInline())
.pipe(minifyHTML(opts))
.pipe(gulp.dest(dir));
});
// 压缩 public 目录 css
gulp.task('minify-css', function() {
gulp.src('./public/**/*.css')
.pipe(inlineimage())
.pipe(minifycss())
.pipe(gulp.dest(dir));
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
gulp.src('./public/**/*.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest(dir));
});
// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images-photos', function () {
// 1. 找到图片
gulp.src('./photos/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
});
// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images-public', function () {
// 1. 找到图片
gulp.src('./public/**/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest(dir))
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-css','minify-js','minify-html',
'images-photos','images-public']
);
修改package.json添加依赖包:
"gulp": "^3.9.1", "gulp-htmlclean": "^2.7.6", "gulp-htmlmin": "^1.3.0", "gulp-imagemin": "^2.4.0", "gulp-minify-css": "^1.2.4", "gulp-uglify": "^1.5.3",安装工具gulp(全局)
npm install gulp -g如何用？
以前的执行步骤:
hexo clean hexo generate hexo deploy现在的执行步骤
hexo clean hexo generate gulp hexo deploy
–
为了每次不重复输入这些命令，制作一个脚本去执行它:
添加deploy.sh到与_config.yml平级的目录
#!/bin/bash
hexo clean
hexo generate
gulp
hexo deploy
添加完成之后执行如下命令赋予权限:
chmod +x deploy.sh
之后每次发布只需要执行:
./deploy.sh
即可
以上，完成本次优化。
参考博文:
