Hexo+Next主题搭建博客安装美化及SEO优化指南

做博客最重要的是用心啦

最终成果当然是本站了。安装,美化,SEO推广,部署通通奉上。

  • 持续集成自动部署已提上日程:已完成。
  • 查看持续集成:《用TravisCI持续集成自动部署Hexo博客的个人实践》

Hexo + Next主题 搭建博客 “真”零基础安装配置

最终成果: 本站

node.js

官网下载: 下一步下一步安装法

node-v8.9.3-x64

C:\softEnvir\nodejs

验证安装:

mark

设置npm下载目录

1
2
3
npm config set prefix D:\softEnvDown\nodejs\node_global
npm config set cache D:\softEnvDown\nodejs\node_cache
npm config ls

npm模块安装的默认全局路径已经改到了相应的文件夹中,但是 这时候用户还是无法require这些模块。因为电脑系统现在还不知道你把默认路径给改了,所以需要在win+R–>“sysdm.cpl–>高级–>环境变量打开设置对话框。

  • 首先在系统变量中新建,新建一个名为NODE_PATH的变量,变量值: 全局模块的文件夹中的node_modules文件夹的绝对路径.

即:D:\softEnvDown\nodejs\node_global\node_modules

配置文件目录:C:\Users\mtian\.npmrc

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

Git安装

Git-2.15.1.2-64-bit(同样官网下载: 下一步下一步安装法

C:\softEnvir\Git

hexo-cli: 1.0.4安装

cmd控制台下:

`npm install -g hexo-cli`

初始化hexo博客目录

D:/mtianBlog:

hexo init hexoBlog

下载next主题及主题美化

官方文档地址: http://theme-next.iissnan.com/

下载主题next:v5.1.4。名字改为next

然后放入D:\mtianBlog\hexoBlog\themes

1
2
3
hexo clean

hexo s --debug

主题美化。

推荐阅读:https://www.jianshu.com/p/f054333ac9e6

部分节选:

  1. 圆形头像旋转。

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.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
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
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;

/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;

/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}

img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/

/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
  1. 配置百度统计站长版。(官方文档有写)

baidu_analytics: *

  1. 配置leancloud (官方文档有写)

leancloud_visitors:
enable: true
app_id: *
app_key: #

  1. 配置搜索(更推荐localSearch)
1
2
3
4
5
6
7
8
9
algolia:
applicationID: '*'
apiKey: '*'
adminApiKey: '*'
indexName: '*'
chunkSize: 5000

$ export(windows 为 set) HEXO_ALGOLIA_INDEXING_KEY=***
$ hexo algolia

您好!当我集成Algolia时候一直出错——上传不了记录,请问知道如何解决嘛?

答案地址:https://github.com/iissnan/theme-next-docs/issues/162

使用gulp进行博文压缩(持续集成自动部署前提)

在站点的根目录下执行以下命令:

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

新建文件gulpfile.js:

mark

内容为:

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
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');
// 压缩 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,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

部署hexo:

npm install hexo-deployer-git --save

修改站点配置文件:

1
2
3
4
5
deploy:
type: git
repo: https://github.com/mtianyan/mtianyan.github.io
branch: master
message: new version first commit

需要使用的命令

1
2
3
4
5
6
7
8
9
git config --global user.email "1147727180@qq.com"

git config --global user.name "mtianyan"

hexo clean

hexo g && gulp

hexo d

将博客源码备份到github或码云(持续集成自动部署前提)

1
2
3
4
5
git init
git add .
git remote add origin https://github.com/mtianyan/hexoBlog-Github.git
git commit -m "first"
git push -u origin master

想要弄到码云替换第三行为下面:

1
git remote add origin https://gitee.com/mtianyan/hexoBlog-mayun.git

SEO优化指南

URL唯一化:

1
npm install hexo-abbrlink --save

站点配置文件里添加:

1
2
3
4
permalink: post/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

安装sitemap站点地图生成插件

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

在站点配置文件或主题配置文件加入。

mark

1
2
3
4
sitemap: 
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

注意缩进

hexo-site\source中新建文件robots.txt,内容如下,请自行替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /about/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://mtianyan.gitee.io/sitemap.xml
Sitemap: http://mtianyan.gitee.io/baidusitemap.xml

Allow后面的就是你的menu 可以在主题配置文件中找到。

前往链接:https://www.google.com/webmasters/
添加你的网站。

mark

下载验证文件放入hexo-site\source

Tips: 站点配置文件忽略Google的验证文件。这样clean的时候就不会被删除了。

1
2
3
skip_render: 
- README.md
- google*****.html

mark

打开站点地图:添加站点地图。
mark

可以进入站点地图详情查看有没有报错。

robots.txt测试

mark

确保0错误,0警告。

百度搜索资源平台

http://ziyuan.baidu.com/

mark

点击用户中心。站点管理 进行 添加网站操作。

下载验证文件放入hexo-site\source

mark

验证完成之后点击域名进入控制台。

mark

对于Robots文件进行验证。

mark

点击链接提交,往下多翻点

mark

选择sitemap:填入自己网站的sitemap地址。点击提交

mark

查看状态。

mark

页面关键字优化

title

文件路径是your-hexo-site\themes\next\layout\index.swig

将文件中

1
{% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}

改为

1
{% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}{% endif %}{{ theme.description }} {% endblock %}

mark

-------------本文结束感谢您的阅读-------------

本文标题:Hexo+Next主题搭建博客安装美化及SEO优化指南

文章作者:mtianyan

发布时间:2018年01月02日 - 18:01

最后更新:2018年02月02日 - 20:02

原始链接:http://blog.mtianyan.cn/post/a625fa82.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请博主吃包辣条
0%