hexo部署到linux

分析

Hexo其实就是静态网页,只要将本地的Hexo编辑配置好

  • 通过Hexo的命令生成静态网页
  • 再通过Git上传部署到Linux即可

    可以不购买云服务器,只买域名,部署在GitHub一样可以访问(有利有弊,无法被百度收录)

开始配置

需在Linux上安装Git和Nginx

传送门:Linux安装Git
传送门:Linux安装Nginx

创建Git用户

创建用户,用户名为git

1
$ adduser git

设置密码,密码为git

1
$ passwd git

把Git用户添加到sudo用户组

输入以下命令,打开sudoers文件

1
$ sudo vi /etc/sudoers

输入:/root进行搜索,找到下图代码行

添加以下代码,按:wq!保存并退出

1
git ALL=(ALL) ALL

设置读写权限与执行权限

切换到Git用户

1
2
#root用户同理
$ su git

创建目录

1
$ mkdir ~/.ssh

新建文件

1
$ vim ~/.ssh/authorized_keys

复制客户端的SSH KEY到authorized_keys中,保存退出


设置客户端密钥(已有可跳过)

检测下自己之前有没有配置

1
$ git config user.name和git config user.email

设置Git的user name和email

1
2
$ git config --global user.name "xxx"
$ git config --global user.email "xxx@xxx.com"

生成密钥,连续按3次回车

1
$ ssh-keygen -t rsa -C "上面的邮箱"

在.ssh目录下有两个文件:id_rsa(私有秘钥)和id_rsa.pub(公有密钥)

如果想登陆远端,则需要将rsa.pub里的秘钥添加到远端


设置文件权限

把authorized_keys文件设置成只有属主有读写权限,把ssh目录设置为只有属主有读、写、执行权限

1
2
$ chmod 600 ~/.ssh/authorized_keys
$ chmod 700 ~/.ssh

设置完后,返回客户端,打开Git Bash,输入以下代码,测试是否能连接上服务器

1
$ ssh -v git@ServerIP   #ServerIP为你自己服务器的公网ip

创建Git裸库

回到服务器,新建blog文件夹

1
2
3
# 使用sudo指令,需要输入git用户的密码
$ sudo mkdir -p /usr/share/nginx/html/blog
$ sudo chown -R git:git /usr/share/nginx/html/blog

切换到git用户,然后进入到git用户目录,接着初始化裸库

1
2
3
$ su git
$ cd ~
$ git init --bare blog.git

接着新建一个post-receive文件

1
$ vim ~/blog.git/hooks/post-receive

然后在该文件中输入以下内容,保存退出

1
git --work-tree=/usr/share/nginx/html/blog --git-dir=/home/git/blog.git checkout -f

再输入以下命令,赋予该文件可执行权限

1
$ chmod +x ~/blog.git/hooks/post-receive

设置站点配置文件

返回客户端,设置博客根目录下的_config.yml文件

1
2
3
4
5
deploy:
type: git
repo: git@SERVER:/home/git/blog.git #此处的SERVER需改为你自己服务器的公网ip
branch: master
message:

如果你设置了自动推送到百度,多个type写法

1
2
3
4
5
deploy:
- type: git
repo: git@SERVER:/home/git/blog.git
branch: master
- type: baidu_url_submitter

保存后,在博客根目录打开Git Bash,输入以下命令

1
2
3
$ hexo clean    #清除public文件夹
$ hexo g #完整命令为hexo generate,生成静态文件(public文件夹)
$ hexo d #完整命令为hexo deploy,将本地文件上传到git

在浏览器输入你的域名或者公网IP即可看到漂亮的博客了~
以后发布了新文章或者更改了配置,只需执行上面3个命令即可


博客优化-压缩代码

像JS一样,去掉空格换行,将代码进行压缩,减小文件大小,减少请求时间

安装gulp

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成

1
2
#Git Bash Here
$ npm install -g gulp

新建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
61
62
63
64
65
66
67
68
69
70
71
var gulp = require('gulp');  
var clone = require('gulp-clone');
var htmlmin = require('gulp-htmlmin');
var gulpif = require('gulp-if');
var cssmin = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var useref = require('gulp-useref');
var clean = require('gulp-clean');
var imagemin = require('gulp-imagemin');

//压缩html
gulp.task('html', function () {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: false, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: false, //删除所有空格作属性值 <input /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
return gulp.src('dev-pages/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('pages/'));
});
//压缩js
gulp.task('jsmin', function() {
return gulp.src(['dev-source/js/ajax.js','dev-source/js/ajax_my.js'])
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest('source/js/'))
})

// 拷贝图片文件
gulp.task('image-copy', function () {
return gulp.src('source-dev/webslice/**/*')
.pipe(clone())
.pipe(gulp.dest('source/webslice'));
});

gulp.task('image-min', function () {
return gulp.src('dev-source/images/*.{png,jpg}')
.pipe(imagemin())
.pipe(gulp.dest('source/images/'));
});
//先复制图片到source,然后再执行压缩。
gulp.task('image-min2', ['image-copy'], function () {
return gulp.src('source/webslice/**/*')
.pipe(imagemin())
.pipe(gulp.dest('source/webslice/'));
});

gulp.task('image-min3', function () {
return gulp.src('dev-source/webview/img/*.{png,jpg}')
.pipe(imagemin())
.pipe(gulp.dest('source/webview/img/'));
});

//压缩图片
gulp.task('images-min',['image-min','image-min2','image-min3'],function() {})

//监听两个文件的文件变化
gulp.task('listenPages', function() {
gulp.watch('dev-pages/*.html',['html']);
gulp.watch('dev-source/js/*.js',['jsmin']);
});
// 构建任务流
// 执行 task build
gulp.task('build', ['html', 'image-min','jsmin']);

优化完成

优化之后,编译发布时需要多一个命令来压缩这些文件

1
2
3
4
$ hexo clean    
$ hexo g
$ gulp build #压缩js、css、img文件
$ hexo d

ps:如果一些yum命令无法使用,出错的话建议使用本博客教程以压缩包方式进行安装

参考文献:https://segmentfault.com/a/1190000012907499

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

本文标题:hexo部署到linux

文章作者:churuo

原始链接:https://www.xuchuruo.cn/Hexo部署到云服务器-Linux.html

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

0%