目录

Netlify+Hexo实现持续部署最佳实践

Hexo被称为是最佳的静态博客程序之一,然而其繁琐的环境搭建、构建,发布过程,让很多人望之却步,转而使用了传统的WordPress等博客程序,抛开维护成本不说,本着折腾一切的心态,最终研究出了一套完善的自动部署方案。

Hexo特色

  • 超快速度: Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  • 支持 Markdown: Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一键部署: 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
  • 丰富的插件: Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

目前市面上还存在很多类似的静态网站生成器,详情请查看:https://www.staticgen.com/

如何实现优雅发布

就目前而言,Hexo发布的方式有以下几种:

简要流程

  1. 使用Github登陆Netlify
  2. 使用StaticGen一键初始化Hexo仓库。
  3. 将Hexo源码仓库Clone到本地,调整网站配置,编写文章。
  4. 本地无需NodejsNPMHexo环境,修改完成后Push到GithubNetlify检测到仓库变更后实现自动部署

Netlify整个部署过程中, 你只需要提交代码, 其余的master部署预览(包括MR的预览), HTTPS证书, 静态资源的优化与CDN加速, 部署消息通知, 等等都不用再操心. 真的是太优雅了!

创建项目

在StaticGen上选择Hexo

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/36aabd38-f45b-48db-9a00-58cbaa554611.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

使用Github登陆

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/3d4a66e2-5a1a-47e0-930e-cc5d84bd3a90.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

设置一个Github仓库名

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/d8175852-6d21-472c-9e89-8170e0261d75.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

轻点3步,轻松实现网站上线

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/906e5096-f4fb-42d7-b76b-2152ddf9fa34.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

第一步:自动部署

不用做任何设置, 每次master分支有更新代码, Netlify就会帮你自动部署代码. 图为部署记录

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/9a942e08-dbbf-46c0-b402-2c24aa700820.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

实时看到部署的日志:

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/99848415-3c09-483a-ae40-9f3acfa1476b.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

第二步:自定义域名

默认情况下,Netlify为我们分配了一个随机域名(可以自定义二级域名、独立域名)

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/ee0bf0d2-8370-417f-af68-d20abc7a0ac3.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

第三步:开启Https

自动生成Let’s Encrypt的证书, 也支持上传自己的证书,详见:https://www.netlify.com/docs/ssl/

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/4232829e-7d2f-42a2-9189-c3d5bff89ac5.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

其他:Netlify的优缺点

优点:

  • 提供webhook的形式触发部署
  • 提供Html代码注入
  • 自动优化
  • 自动部署通知

缺点:不能检测到git submodule的变更

关于Markdown编辑器

现在我们已经完成了Hexo的持续部署,将Hexo源码项目Clone到本地后,可以使用IDEA导入,IDEA内置的Markdown编辑器正好用来写文章,而IDEA内置的Git版本管理工具也不赖,哈哈,如此一来,书写博客就如同写代码一般,写完提交到Git即可。

此外、IDEA内置的Markdown编辑器不支持插入图片,我这里写了个轻量级的Markdown编辑器扩展程序, 支持粘贴图片文件然后上传到七牛云存储, 然后生成Markdown图片标记插入到文章中。

详见https://gitee.com/wuwenze/markdown-support-qiniu

效果图

https://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/d8dfdcb0-fa4e-4f25-aa38-da90873a8678.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpghttps://wenzewoo-cdn.oss-cn-chengdu.aliyuncs.com/images/20181221/f5becb7a-347b-4f34-b217-e02736236af4.png?x-oss-process=image/auto-orient,1/interlace,1/quality,q_70/format,jpg

评论