Hexo快速搭建静态博客并实现远程VPS自动部署
这篇文章将如何搭建hexo,以及如何通过git webhooks实现远程vps的自动部署
这篇文件适合的条件:
- 简单的用于个人博客、公司博客展示,hexo的定位是静态博客,要实现动态服务器的功能并不适合
- 有自己私有的服务器、vps、域名
- git仓库,Github或国内的Coding.net

hexo本地部署
流程:先在本机搭建好hexo环境,push到git仓库,再部署到服务器上。
第一步,安装hexo命令行工具,这个工具在服务器端也需要执行安装
|
1
|
npm install hexo-cli -g
|
第二部,生成一个本地hexo项目
|
1
2
3
4
5
6
7
|
# 创建blog目录,并初始化hexo项目
hexo init blog
cd blog
# 安装hexo依赖,hexo是基于nodejs开发的,npm是nodejs的包管理工具
npm install
# 启动本地服务,打开localhost:4000测试是否成功
hexo server
|
第三部,新建一篇文章
|
1
2
3
|
hexo new "My First Post"
# 启动本地服务,查看效果
hexo server
|
这样,在/source/_posts目录下就生成了了my-first-post.md这样一个文件,.md是markdown文件的扩展名,我们可以使用自己喜欢的工具去编辑markdown,比如Sublime Text。
这里推荐一个Sublime Text插件,给人家免费推广了,OmniMarkupPreviewer。
提交到远程仓库
你得需要一个远程仓库托管代码,可以使用Github或国内的Coding.net,因为我有些项目属于私有项目,Github开私有项目是需要收费的,所以我选择的是国内的Coding.net,速度也比较理想。
先在coding上新建一个项目名为hexo,并拷贝仓库ssh地址(使用ssh需要配置ssh公钥和私钥,如果不会配可以google或使用http地址)。
提示,如果需要通过webhooks实现服务器自动化部署,推荐使用ssh会更方便一些

然后在hexo目录初始化本地仓库并提交到coding
|
1
2
3
4
5
|
git init
git remote add origin git@git.coding.net:lianer/hexo-blog.git
git add .
git commit -m 'publish'
git push origin master
|
这时候coding上已经有我提交的代码了。
服务器环境配置
登录你自己的vps服务器,安装好nodejs,git,nginx,个人服务器还是推荐使用ubuntu,安装这些工具很容易,具体百度或谷歌。
我在公司搭的hexo,公司服务器使用的是centos,git我是请运维同学帮我安装的,比较麻烦。
将代码从远程仓库拉下来
同样的服务器也需要配置ssh才能使用ssh地址,否则还是使用http地址吧。
在这里,我直接把项目放在root目录下了。
|
1
2
3
4
|
mkdir hexo
git init
git remote add origin git@git.coding.net:lianer/hexo-blog.git
git pull origin master
|
安装hexo模块
|
1
2
3
|
cd ~/hexo
npm install hexo-cli -g
npm install
|
hexo静态编译
|
1
|
hexo g
|
这一步会在hexo目录下生成一个public目录,这里面就是编译后的静态文件目录,
其实这时候直接访问里面的html文件即可看到完整的效果了,只不过还需要一个服务来运行它。
配置nginx
进入nginx服务配置文件目录,该目录下应该已经有一个default.conf,不去管它,另外新建一个配置文件
|
1
2
|
cd /etc/nginx/conf.d/
vi hexo.conf
|
在hexo.conf中输入以下内容并保存,注意细节,不要少分号。
|
1
2
3
4
5
6
7
8
|
server {
listen 80; # 监听端口
server_name imlianer.com www.imlianer.com; # 你的域名
location / {
root ~/hexo;
index index.html;
}
}
|
重载nginx,使配置生效。
|
1
|
nginx -s reload
|
然后就可以通过 http://imlianer.com 访问hexo了。
Git WebHooks 自动化部署
是不是觉得每次写完文章还要登录服务器去执行一次git pull很麻烦?
ok,git有很多钩子,可以在仓库发生变化的时候触发,类似js中的事件。
WebHooks就是在你本地执行git push的时候,
远程仓库(coding)会检测到仓库的变化,并发送一个请求到我们配置好的WebHooks。
实现WebHooks自动化部署的推荐条件:
- 服务器端配置ssh认证
- 服务器端配置nodejs服务,接收Coding发来的请求
远程仓库配置WebHooks

Coding WebHooks 配置界面
这张图的配置的意思是:当仓库发生push的时候,会发送一个请求到http://imlianer.com/webhooks/push/123456。
为了服务端的简易处理,这里没有使用token,而是将url地址当做token,123456就充当了token的角色。
到这,仓库这边的配置就完成了,接下来的问题就是服务器如何接收这个请求并重新部署hexo了。
服务器配置响应WebHooks的服务
我使用的是nodejs,其它语言也可以。
在本地hexo目录中新建一个webhooks.js文件,内容如下:
|
1
2
3
4
5
6
7
8
9
10
11
|
var http = require('http')
var exec = require('child_process').exec
http.createServer(function (req, res) {
// 该路径与WebHooks中的路径部分需要完全匹配,实现简易的授权认证。
if(req.url === '/webhooks/push/123456'){
// 如果url匹配,表示认证通过,则执行 sh ./deploy.sh
exec('sh ./deploy.sh')
}
res.end()
}).listen(4002)
|
这段代码就能启动一个nodejs服务,监听4002端口。
当请求过来的url完全匹配的时候,执行deploy.sh。
再新建一个文件deploy.sh处理部署相关脚本,内容如下:
|
1
2
|
git pull origin master
hexo g
|
将新增的webhooks.js与deploy.sh两个文件push到服务器。
然后在服务器中启动nodejs服务监听webhooks
|
1
|
node ./webhooks.js
|
这样,当你本地提交文章的时候,服务器就会自动部署啦。
如果你使用上面的命令运行nodejs服务,nodejs服务会在前台运行,
可以使用pm2使nodejs运行在后台。
Hexo快速搭建静态博客并实现远程VPS自动部署的更多相关文章
- 使用 Github 和 Hexo 快速搭建个人博客
导语 个人兴趣爱好特别广泛,喜欢捣鼓各种小东西自娱自乐.虽然都没能深入研究,但是自己的“孩子”还是很想拿出来遛遛得人一句夸奖的.所以刚学 Markdown 的时候很是有想过要搭个个人博客来玩玩,一来激 ...
- 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈
本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...
- 使用Hexo快速搭建一个博客,并部署到github
本文旨在记录一下我在通过hexo搭建一个博客,并将其部署在github上面的过程,也供我自己在以后的使用过程中能够快速学习和参考.需要看更详细或者官方文档的可以点击Hexo官方文档进行查看. 安装前提 ...
- github+Hexo快速搭建个人博客
注意 本文主要针对Windows平台和Hexo 3.x 准备工作 下载Git [下载地址] [Git官网](https://git-scm.com/download/) 下载Node.js [下载地址 ...
- 像黑客一样写博客–Pelican快速搭建静态博客
"像黑客一样写博客",通过文本编辑器(Markdown编辑器)即可实现写博客,而且是静态的,很神奇吧,这里的方案是Pelican. 为啥叫 Pelican 这么奇怪的名字 &quo ...
- Hexo搭建静态博客踩坑日记(二)
前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...
- Hexo搭建静态博客踩坑日记(一)
前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...
- Hexo&Github-Pages搭建个人博客
some基础知识 hexo hexo是一款基于Node.js的静态博客框架 github-pages说明 github有两种主页,一种是github-page(个人主页),一种是项目主页,本教程针对个 ...
- Hexo+Git一个小时快速搭建个人博客
搭建本地环境:Hexo框架 Hexo为何物 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用Markdown解析文章,并瞬间利用靓丽的主题生成静态网页.其中,Markdown是一个用于将普通 ...
随机推荐
- JavaScript的最大函数參数长度和最大栈深度检測
一般代码也许不会涉及最大參数长度和最大栈深度,但某些特殊场合,检測这两个參数还是有必要的.比如:用递归计算斐波那契数列的第n个值,不了解最大栈深度,难免显得肤浅.又比如:将一串charCode转成St ...
- 嵌入式linux内核和根目录制作
系统组成:Bootloader, Boot parameters, Kernel, Root filesystem嵌入式linux系统有linux内核与根文件系统两部分构成,两者缺一不可. 内核制作: ...
- 使用富文本OHAttributedLabel
OHAttributedLabel 富文本标签 https://github.com/AliSoftware/OHAttributedLabel 以下是我渲染出来的效果 OHAttributedLab ...
- OpenCV学习(10) 图像的腐蚀与膨胀(1)
建议大家看看网络视频教程:http://www.opencvchina.com/thread-886-1-1.html 腐蚀与膨胀都是针对灰度图的形态学操作,比如下面的一副16*16的灰度图. ...
- M1卡说明及使用proxmark3破解方法
看了网上写的一些关于M1卡的文章,多数有些误导之嫌.首先谈谈M1卡的规格,M1卡的容量为1KB,好多网上写8KB,这里其实是有个误区,应该是8K位.1Byte=1B=8位.其实也就是说8k位想到于1K ...
- 使用javascript比较任意两个日期相差天数(代码)
avascript比较两个日期相差天数,可返回负值,表示后者大于前者. 该函数在IE,firefox下均通过测试. /** 比较两个日期相差的天数,可为负值 **/ function DateDiff ...
- SWFUpload 已上传成功数量控制 插件(用于解决队列满问题)
当我们在使用 SWFUpload 做文件上传时,我们需要把已经上传的文件列表做一个删除, 但在我们把已上传列表删除后,再重新上传时,会发现提示 上传队列满 的问题,原因就是有一个状态对象中的一个 成功 ...
- Android -- 压缩与解压文件
我在做一个项目中,工程文件中有一个功能需要很多图片,图片与app一起打包下来的话有30+M,那么我们就考虑另外下载压缩包,我们将图片取出,工程就只有4+M了,哈哈哈哈,呵呵,真恐怖.那么这样就涉及到另 ...
- KVM&Libvirt基本概念及开发杂谈
导读 大家好,本次肖力分享的主题是KVM&Libvirt基本概念及开发杂谈,内容有些凌乱松散,主要基于自己早期整理的笔记内容和实践感悟,有些内容难免有失偏颇,望见谅.前面先介绍下需要了解的基本 ...
- JAVA:连接池技术说明以及MVC设计模式理解
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjgzMDgwNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...