10个月前 (12-25)  技术 |   抢沙发  459 
文章评分 3 次,平均分 1.7

文章推荐群体:前端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清单文件更新等)

 

 

运行 yarn build命令后,在build文件夹下将会生成上述构建产物,而使用nginx或者apache这样的HTTP服务器将该目录发布,就可以搭建一个静态网站。

通常情况下,我们常常将github repo的master分支根目录和docs目录作为github的发布目录。实际上github还支持将“gh-pages”分支作为github page发布分支。

这里推荐一个npm库 gh-pages,它可以将指定目录文件发布到 gh-pages分支的npm库,项目主页:https://github.com/tschaub/gh-pages

使用 yarn install gh-pages 后在 package.json添加发布脚本

运行  yarn release:web即可自动发布。

桌面端:基于Electron多平台Web APP

Electron是由Github开发,同时包含Chromium和Node.js运行时环境的跨平台桌面应用平台。它可以打包生成运行在Windows、Mac、Linux等多种操作系统的安装包。常用的Virtual Studio Code、Slack APP就是基于Electron开发。

实现自动构建多平台版本

建议采用electron-builder npm库打包electron应用

打包脚本 electron-builder.yml

electron-builder可以帮助我们完成electron应用的安装包打包,文件名加版本号,以及混淆加密。

Docker

Dockerhub除了是一个公用的docker镜像仓库,同时帮助我们在无需CI/CD的情况下免费、自动地构建docker镜像,具体可以参考https://wangbaiyuan.cn/using-dockerhub-continually-build-container-mirroring.html

  • 实现在Github Release时自动构建Docker镜像并推送到Dockerhub
  • 根据Release版本号给镜像打版本标签、Latest标签

利用Release-it自动化发布过程

release-it npm库可以实现发布的自动化,实现以下功能

  • 自动升级package.json版本号
  • 自动创建Github Release
  • 上传产出物(Electron APP)
  • 自动添加Release Note

 

开源项目

更多请参考示例作品:https://github.com/geekeren/Magpie-LuckyDraw

 
关注我的微信

关注我的微信,获取文章更新

如果你觉得这篇文章对你有用,可以点击下面的“赞助作者”打赏作者!

转载注明原文出处:王柏元的博客>>https://wangbaiyuan.cn/build-github-into-a-continuous-publishing-platform-for-personal-full-platform-works.html

关于
记录生活,镌刻心路;泼洒文墨,分享技术!王柏元的博客致力于IT经验交流,并原创翻译引进外文文章,打开IT国际化视野

发表评论

格式

暂无评论

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册