这篇文章将如何搭建hexo,以及如何通过git webhooks实现远程vps的自动部署

这篇文件适合的条件:

  1. 简单的用于个人博客、公司博客展示,hexo的定位是静态博客,要实现动态服务器的功能并不适合
  2. 有自己私有的服务器、vps、域名
  3. 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自动化部署的推荐条件:

  1. 服务器端配置ssh认证
  2. 服务器端配置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自动部署的更多相关文章

  1. 使用 Github 和 Hexo 快速搭建个人博客

    导语 个人兴趣爱好特别广泛,喜欢捣鼓各种小东西自娱自乐.虽然都没能深入研究,但是自己的“孩子”还是很想拿出来遛遛得人一句夸奖的.所以刚学 Markdown 的时候很是有想过要搭个个人博客来玩玩,一来激 ...

  2. 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  3. 使用Hexo快速搭建一个博客,并部署到github

    本文旨在记录一下我在通过hexo搭建一个博客,并将其部署在github上面的过程,也供我自己在以后的使用过程中能够快速学习和参考.需要看更详细或者官方文档的可以点击Hexo官方文档进行查看. 安装前提 ...

  4. github+Hexo快速搭建个人博客

    注意 本文主要针对Windows平台和Hexo 3.x 准备工作 下载Git [下载地址] [Git官网](https://git-scm.com/download/) 下载Node.js [下载地址 ...

  5. 像黑客一样写博客–Pelican快速搭建静态博客

    "像黑客一样写博客",通过文本编辑器(Markdown编辑器)即可实现写博客,而且是静态的,很神奇吧,这里的方案是Pelican. 为啥叫 Pelican 这么奇怪的名字 &quo ...

  6. Hexo搭建静态博客踩坑日记(二)

    前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...

  7. Hexo搭建静态博客踩坑日记(一)

    前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...

  8. Hexo&Github-Pages搭建个人博客

    some基础知识 hexo hexo是一款基于Node.js的静态博客框架 github-pages说明 github有两种主页,一种是github-page(个人主页),一种是项目主页,本教程针对个 ...

  9. Hexo+Git一个小时快速搭建个人博客

    搭建本地环境:Hexo框架 Hexo为何物 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用Markdown解析文章,并瞬间利用靓丽的主题生成静态网页.其中,Markdown是一个用于将普通 ...

随机推荐

  1. Spring通过Gmail SMTP服务器MailSender发送电子邮件

    Spring提供了一个有用的“org.springframework.mail.javamail.JavaMailSenderImpl”类,通过JavaMail API 简化邮件发送过程.这里有一个项 ...

  2. 添加引用方式抛出和捕获干净的WebService异常

    转载:http://www.cnblogs.com/ahdung/p/3953431.html 说明:[干净]指的是客户端在捕获WebService(下称WS)抛出的异常时,得到的ex.Message ...

  3. 阻止picker.js插件弹出键盘

    <input id="focus" type="text" value="" placeholder="手机号" ...

  4. jquery empty()方法

    empty() 方法从被选元素移除所有内容,包括所有文本和子节点. $(selector).empty() <html> <head> <script type=&quo ...

  5. JAVA单例MongoDB工具类

    我经常对MongoDB进行一些基础操作,将这些常用操作合并到一个工具类中,方便自己开发使用. 没用Spring Data.Morphia等框架是为了减少学习.维护成本,另外自己直接JDBC方式的话可以 ...

  6. 基于cookie或session的登陆验证之安全性问题

    因为session是关了浏览器就没了.所以可以通过cookie结合session方法来做验证! 第一次登陆,生成一个cookie,保存一些加密的帐号信息,然后再生成一个session 这样去其他需要验 ...

  7. SVG 可伸缩矢量图形 简介 Path路径

    w3school:http://www.w3school.com.cn/svg/svg_intro.asp  SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG ...

  8. SQL IN

    here are some additional clause in the SQL language that can be used to simplify queries by decrease ...

  9. (LeetCode 72)Edit Distance

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  10. [置顶] ArcGIS Runtime SDKs 10.2 for iOS & Android& OS X发布

    我们高兴的宣布:ArcGISRuntime SDKs 10.2 for iOS & Android & OS X正式发布!在10.2版本中,你可以在iOS.Android和Mac设备上 ...