前言

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

创建Github账户

我们把博客发布到Github上。

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

新建一个Repository

红框内为项目名称，应写成 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的项目。

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

正常的发布流程：

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

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

添加域名

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

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

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

找到域名与网站（万网）菜单。

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

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

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

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

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

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

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

其他优化

添加音乐播放功能

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

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

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

生成如下图所示效果。

添加博客编写功能

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

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

npm install hexo-admin –save

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

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

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

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

压缩博客

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

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

在blog目录下新建gulpfile.js

有如下内容：

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的博客

搭建自己的Hexo博客（2）

前言