將Github打形成我的全平臺做品的持續發佈平臺

文章推薦羣體：前端Dev、桌面端Dev、DevOps與Github羊毛黨

2016年6月，Github發佈了GitHub Pages功能，它容許將靜態網頁文件存放在github倉庫上，並將其發佈成web網站。藉助Hexo博客框架及其周邊豐富、優美的博客主題，可讓程序員使用markdown語法搭建出精美、簡潔的博客網站。隨後，Github page還支持自定義域名、https...

無需服務器、免費https證書，無需操心運維，一時間，很多博客主紛紛放棄wordpress，轉戰Github Page。

私覺得這可謂廣大博客主們「薅github羊毛」的邁出的第一步。

爲何說「薅github羊毛」，是由於我發現愈來愈多的項目在極致地開發出github的潛能，好比將github gist做爲前端應用的存儲後端、homebrew還將github做爲包發佈和審覈平臺

Github Page已成歷史，而今天我這裏介紹的除了Github Page，還將介紹如何在Github上持續發佈我的全平臺應用做品。

• 其中，「持續發佈」意味着我將介紹：

  • 如何實現做品的多平臺自動打包
  • 如何實現自動發佈到github release與github page
  • 如何自動生成Release Note

• 而「全平臺」包括：

  • Web端
  • 桌面端（Linux/Windows/Mac）
  • Docker鏡像

這意味你開發的我的做品將支持同時發佈在以上各操做系統或運行平臺上，想起來是否是有點些小激動呢？

Web端：發佈到Github Page

鑑於「怎麼在Github上部署本身的網站？怎麼綁定自定義域名」能夠在Google上搜到成千上萬條結果，本博客便不贅述相關細節。在這裏主要介紹如何將Github Page的發佈過程自動化。

在這以前，咱們應該有這樣一個基本的共識，Github Page只支持純前端項目。因此咱們這裏不妨以React.js項目爲例： React.js 採用以下腳本完成打包（包括JS/CSS構建、JS混淆minify、HTML模板渲染、manifest清單文件更新等）

"build": "react-scripts build",
複製代碼

運行yarn build命令後，在build文件夾下將會生成上述構建產物，而使用nginx或者apache這樣的HTTP服務器將該目錄發佈，就能夠搭建一個靜態網站。

一般狀況下，咱們經常將github repo的master分支根目錄和docs目錄做爲github的發佈目錄。實際上github還支持將「gh-pages」分支做爲github page發佈分支。

這裏推薦一個npm庫gh-pages，它能夠將指定目錄文件發佈到gh-pages分支的npm庫，項目主頁：github.com/tschaub/gh-…

使用yarn install gh-pages 後在package.json添加發布腳本

"release:web": "gh-pages -d build",
複製代碼

運行 yarn release:web便可自動發佈。

桌面端：基於Electron多平臺Web APP

Electron是由Github開發，同時包含Chromium和Node.js運行時環境的跨平臺桌面應用平臺。它能夠打包生成運行在Windows、Mac、Linux等多種操做系統的安裝包。經常使用的Virtual Studio Code、Slack APP就是基於Electron開發。

實現自動構建多平臺版本

建議採用electron-builder npm庫打包electron應用。

yarn add -D  electron-builder
複製代碼

打包腳本electron-builder.yml

appId: cn.wangbaiyuan.magpie
files:
- build/**/*
- node_modules/**/*
productName: Magpie幸運抽獎
artifactName: '${name}-${version}-for-${os}-${arch}.${ext}'
icon: build/icon.png
nsis:
  runAfterFinish: false
  deleteAppDataOnUninstall: true
  allowToChangeInstallationDirectory: true
  oneClick: false
  installerLanguages: zh_CN
  language: '2052'
  perMachine: true
  createDesktopShortcut: true
win:
  target: nsis
mac:
  target: dmg
linux:
  target: deb

複製代碼

electron-builder能夠幫助咱們完成electron應用的安裝包打包，文件名加版本號，以及混淆加密。

Docker

Dockerhub除了是一個公用的docker鏡像倉庫，同時幫助咱們在無需CI/CD的狀況下免費、自動地構建docker鏡像，具體能夠參考wangbaiyuan.cn/using-docke…

• 實如今Github Release時自動構建Docker鏡像並推送到Dockerhub
• 根據Release版本號給鏡像打版本標籤、Latest標籤

利用Release-it自動化發佈過程

release-it npm庫能夠實現發佈的自動化，實現如下功能

• 自動升級package.json版本號
• 自動建立Github Release
• 上傳產出物（Electron APP）
• 自動添加Release Note

hooks:
  after:bump: yarn dist
  after:git:release: yarn release:web

git:
  tagName: v${version}
github:
  release: true
  assets:
  - dist/*-mac.zip
  - dist/*-win.exe
  - dist/*-linux.deb

複製代碼

開源項目

更多請參考示例做品：github.com/geekeren/Ma…