Fork me on GitHub

搭建自己的Hexo博客(2)

前言

关于之前的部分请参考我的《搭建自己的Hexo博客(1)》这篇文章。

创建Github账户

我们把博客发布到Github上。

首先申请Github账号:https://github.com/

新建一个Repository

upload successful

红框内为项目名称,应写成 yourname.github.io 这种形式。

如我注册的用户名是JavaZWT,则项目名应写为 JavaZWT.github.io

新建好后,我们开始发布我们的博客。

博客发布

进入到原来的blog文件夹。

我们要记住以下指令:

博客本地调试启动:hexo s

博客部署文件生成:hexo g

博客发布:hexo d

博客部署文件夹清空: hexo clean

hexo g 后,要发布的博客文件会生成在public文件夹下。

hexo d 会把这个文件夹下的文件deploy到Github上。

_config.yml配置文件里,指明自己的Github地址上新建的yourname.github.io的项目。

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:JavaZWT/JavaZWT.github.io.git

正常的发布流程:

  1. 新写了一篇博文
  2. 通过hexo s本地调试通过后
  3. hexo clean 清空public文件夹及db文件
  4. hexo g 重新生成部署文件
  5. hexo d 发布到Github

当我们发布成功后,通过 https://yourname.github.io/ 便可以在外网访问自己的blog啦。

添加域名

成功访问之后,我们觉得这个网址不好,想换个自己喜欢的域名怎么办?

这里我使用了阿里云申请了域名。

首先登陆阿里云,没有账号请注册申请。

找到域名与网站(万网)菜单。

upload successful

找到自己喜欢的域名进行购买。

得到域名后,我们需要配置域名解析。把域名指向我们的博客。

在域名解析列表里我们新增两条记录,如下图红框部分。

其中记录值可以写 https://yourname.github.io/

相当于把这个域名指向了https://yourname.github.io/这个域名。

或者我们可以查到 https://yourname.github.io/ 这个域名的IP,直接将新的域名指向这个IP即可。

upload successful

配置好后等一段时间,我们访问新的域名,就可以跳转到我们的博客啦。

其他优化

添加音乐播放功能

找到 /themes/next/layout/_custom/sidebar.swig 文件

登陆网易云音乐,对于一首歌,生成外链播放器。

upload successful

upload successful

将上述代码复制到sidebar.swig文件里。

生成如下图所示效果。

upload successful

添加博客编写功能

写博客时是不是很不方便?

我们安装hexo-admin插件吧。这个插件可以是写博客更快捷方便。

npm install hexo-admin –save

安装好后,启动调试博客 hexo s

输入 http://localhost:4000/admin/

是不是看到进入了博客管理菜单?

通过这个插件可以方便的管理和书写博客。

upload successful

压缩博客

博客里有一些图片或者css,js过大怎么办,这样会导致博客加载缓慢。

我们在发布博客时可以先对其进行压缩。

在blog目录下新建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
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');
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,
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'));
});
// 压缩 public/images 目录 images
gulp.task('images', function() {
return gulp.src(['./public/**/*.png', './public/**/*.jpg', './public/**/*.gif', './public/**/*.svg'])
.pipe(imagemin({
progressive: false
}))
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html', 'minify-css', 'minify-js', 'images'
]);

同时在package.json里添加这几个包。

"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.0",
"gulp-htmlmin": "^4.0.0",
"gulp-htmlclean": "^2.7.22",
"gulp": "^3.9.1",
"gulp-imagemin": "^4.1.0",

添加完后执行 npm install。

或者直接一个个的 npm install 包名 –save 也是可以的。

弄好后,在hexo g 指令后进行 压缩操作,执行 gulp 命令,可对public文件夹下的资源进行压缩。

结语

一个博客的基本搭建到这里基本就结束了,如果想提高性能及速度,可以自己申请个服务器,或者使用CDN进行加速,基本都涉及到一定的费用。

博客还有一些比较小的美化的地方就不一一说明,大家可以自己尝试,自己动手,把自己的博客搭建的更漂亮。

毕竟,搭建博客这件事我们应本着学习,兴趣,快乐的本质去出发,自己摸索自己研究一些比较好玩的东西,这样才是做这件事的意义。

附上我的博客地址:

https://www.sakuratears.top/

大家可以参考下,有什么问题可以随时联系我,一定会为大家解答。




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

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