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

使用Github登陆

设置一个Github仓库名

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

第一步:自动部署

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



实时看到部署的日志:

第二步:自定义域名

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

第三步:开启Https

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

其他: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

效果图