Hexo快速搭建静态博客并实现远程VPS自动部署

这篇文章将如何搭建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 [email protected]: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 [email protected]: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运行在后台。

时间: 2024-08-09 06:21:44

Hexo快速搭建静态博客并实现远程VPS自动部署的相关文章

Git+Hexo搭建静态博客网站

Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 安装环境 安装Git 版本管理工具,可以将我们生成的静态网页托管到GitHub上 设置全局 git config --global user.name "name" 配置username git config --global user.email "邮箱" 配置邮箱 设置ssh ssh -keygen -t rsa -

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

windows上使用mkdocs搭建静态博客

windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdocs的环境搭建过程 项目地址:https://github.com/mkdocs/mkdocs 介绍:英文版----http://www.mkdocs.org/ 中文版----http://markdown-docs-zh.readthedocs.io/zh_CN/latest/ 使用环境:win8.

DigitalOcean上使用Tornado+MongoDB+Nginx+Supervisor+DnsPod快速搭建个人博客

DigitalOcean 之前买了个便宜的VPS并且在上面搭建了我自己写的博客程序,后来VPS里运行MongoDB经常自己挂掉就索性没理了.直到现在VPS已经过期,服务器被强制关掉了.周末在家索性想着把这个博客程序重新搭建起来. 选择Linode还是云主机(阿里云等等)?阿里云貌似有些贵,而且还有一堆备案的流程.Linode最近推出SSD服务,20刀/月的价格,加量不加价,很是吸引人.但无奈还是花的有些心疼.忽然另外一个VPS服务DigitalOcean(链接含refcode喔)被我无意发现.D

使用Node.js+Hexo+Github搭建个人博客(续)

一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍: 博客相关配置介绍 博客主题 Yilia 配置介绍 如何制作并配置网站缩略图 如何将博客同步到 Github.Coding 中 如何使用 Git 同步 Github 与 Coding 的代码 如何申请域名并作域名解析 如何将域名绑定至 Github.Codi

小内存VPS安装Caddy+PHP7+Sqlite3环境,并快速搭建Typecho博客

咱们普通搭建博客的方式就是使用lnmp.lamp等一键包,或者宝塔等面板来搭建Web环境,但是都只适合大点内存的云主机服务器,小点的譬如96M.128M服务器就不可了,这时候咱们便可以通过部署别的环境来搭建站点环境了,这里伏笔VPS就说下Caddy+PHP7+Sqlite3部署教程,3分钟便可以搭建一个Typecho博客,并成功执行在96M的云主机服务器上,至于96M以下的服务器就意外试了,究竟很少见了. 部署 教程只写Debian 8.9,提议挑选mini版.如果你是96M或者128M的KVM

巨杉Tech | 十分钟快速搭建 Wordpress 博客系统

介绍很多互联网应用程序开发人员第一个接触到的网站项目就是博客系统.而全球使用最广的Wordpress常常被用户用来快速搭建个人博客网站.默认情况下,Wordpress一般在后台使用MySQL关系型数据库存储所有的博文及回复.本文将展示如何使用 SequoiaDB 巨杉分布式数据库替换MySQL,成为Wordpress博客系统的后台关系型数据库. 通过阅读本文,用户可以了解到如何使用SequoiaDB巨杉数据库的MySQL实例无缝替换标准MySQL数据库.SequoiaDB巨杉数据库允许用户在不更

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

在编程路上,每天都在网上查看别人的博客,大牛的文章写得通俗易懂,同时博客网站也非常华丽.作为出入编程的一枚小白也想拥有这样一个自己的网站.那就立马去买一个域名了,在网上找教程来搭建. 搭建的过程还算比较顺利,没有遇到多大的问题,虽然这篇博客的内容也是从别人的博客东粘西补过来的,为什么要东粘西补呢,因为光照着一篇博客并不能顺利搭建,还需要其他博客来补充. 本博客的最大好处是只要阅读这一篇博客就能解决问题,这里找出了我踩过的雷坑,方便大家畅通无阻的搭建. 原材料 域名(自行购买) node.js(官

使用hexo+GitHub搭建个人博客的心得(含教程)

Author Email Yaoyao Liu [email protected] 前言 对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程.配置环境.阅读论文的心得体会是一个很常见的习惯.当然想搭建个人博客,就需要找个靠谱的平台,主要就是以下的两种方式: 使用网站提供的博客平台,例如国内的CSDN.博客园:国外的Blogger.Wordpress 自己建站,发布到自己的服务器上,或者发布到GitHub.GitLab.Bitbucket等支持静态网页发布的git平台 针对于第一种方式,