Hexo持續部署最佳實踐::Netlify+IDEA+Github

Hexo被稱爲是最佳的靜態博客程序之一，然而其繁瑣的環境搭建、構建，發佈過程，讓不少人望之卻步，轉而使用了傳統的WordPress等博客程序，拋開維護成本不說，本着折騰一切的心態，最終研究出了一套完善的自動部署方案。

Hexo特點

• 超快速度: Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染。
• 支持 Markdown: Hexo 支持 GitHub Flavored Markdown 的全部功能，甚至能夠整合 Octopress 的大多數插件。
• 一鍵部署: 只需一條指令便可部署到 GitHub Pages, Heroku 或其餘網站。
• 豐富的插件: Hexo 擁有強大的插件系統，安裝插件可讓 Hexo 支持 Jade, CoffeeScript。

目前市面上還存在不少相似的靜態網站生成器，詳情請查看： https://www.staticgen.com/
<!--- more --->

如何實現優雅發佈

就目前而言，Hexo發佈的方式有如下幾種：

• 原始方式，即在本地搭建相關環境，編寫md文件後，手動hexo g生成靜態文件，而後經過hexo deploy發佈到Github Pages；
• 利用Github + Webhook來實現自動發佈（這個須要一臺本身服務器）詳見：http://www.swiftyper.com/2016...
• 使用第三方的Hexo-Client、Hexo-Admin等程序，詳見：https://github.com/search?q=h...
• 使用Travis CI持續部署Hexo，詳見：https://www.jianshu.com/p/569...
• 使用Netlify進行優雅地持續部署。詳見：https://www.netlify.com

簡要流程

1. 使用Github登錄Netlify。
2. 使用StaticGen一鍵初始化Hexo倉庫。
3. 將Hexo源碼倉庫Clone到本地，調整網站配置，編寫文章。
4. 本地無需Nodejs、NPM、Hexo環境，修改完成後Push到Github，Netlify檢測到倉庫變動後實現自動部署。

在Netlify整個部署過程當中, 你只須要提交代碼, 其他的master部署預覽(包括MR的預覽), HTTPS證書, 靜態資源的優化與CDN加速, 部署消息通知, 等等都不用再操心. 真的是太優雅了!

建立項目

在StaticGen上選擇Hexo

使用Github登錄

設置一個Github倉庫名

輕點3步，輕鬆實現網站上線

第一步：自動部署

不用作任何設置, 每次master分支有更新代碼, Netlify就會幫你自動部署代碼. 圖爲部署記錄

實時看到部署的日誌:

第二步：自定義域名

默認狀況下，Netlify爲咱們分配了一個隨機域名（能夠自定義二級域名、獨立域名）

第三步：開啓Https

自動生成Let’s Encrypt的證書, 也支持上傳本身的證書，詳見：https://www.netlify.com/docs/...

其餘：Netlify的優缺點

優勢：

• 提供webhook的形式觸發部署
• 提供Html代碼注入
• 自動優化
• 自動部署通知

缺點：不能檢測到git submodule的變動

關於Markdown編輯器

如今咱們已經完成了Hexo的持續部署，將Hexo源碼項目Clone到本地後，可使用IDEA導入，IDEA內置的Markdown編輯器正好用來寫文章，而IDEA內置的Git版本管理工具也不賴，哈哈，如此一來，書寫博客就如同寫代碼通常，寫完提交到Git便可。

此外、IDEA內置的Markdown編輯器不支持插入圖片，我這裏寫了個輕量級的Markdown編輯器擴展程序, 支持粘貼圖片文件而後上傳到七牛雲存儲, 而後生成Markdown圖片標記插入到文章中。

詳見 https://gitee.com/wuwenze/mar...

效果圖

附個人博客：https://wuwenze.com/