专栏首页李成熙heyliDeploy Using Travis-CI And Github Webhook — webpack doc as an example

Deploy Using Travis-CI And Github Webhook — webpack doc as an example

Overview

Some friends and I have been running webpack-china for a few months. After a few months effort, most doc translation job have also been done. We keep tracking the master and you will see Chinese version does not lag behind too much.

(pretty much the same and http2 is also applied)

However it has been a while that we need to manually deploy the site. With the help of Travis-Ci and Github webhook, we finally make it an auto process.

Travis-CI is used for building your code that you need to publish and push them to your gh-pages branch. Github webhook then takes over the job and sends a request to your hosting server. When your server gets the request, it would run a script to pull the latest code from gh-page. The site then finish all the updating steps.

(Sample process)

Travis-CI

Here I will use webpack-china/webpack.js.org as an example. The repository is forked from webpack/webpack.js.org. But we have to modify it a bit.

(.travis.yml)

This file is the configuration for Travis-CI. Not much difference from other project, branches means which branches will be watched by Travis-Ci. Node.js is used as the major programing language. Node 6.0 environment will be set up. The most important file should be deploy.sh. This file contains the commands used for deployment.

(1st part of deploy.sh)

The 1st part of deploy.sh script is used for building the site. Ready releasing code will be put under build folder when you run

npm run build

(2nd part of deploy.sh)

The 2nd part of the script is aiming for pushing code to gh-pages branch. But how does Travis-CI know get the permission to access your repo? SSH Key does the trick for you. Please follow this guide, Generating a new SSH key to generate SSH Key. (Please do it under your local repository folder)

example code:

ssh-keygen -t rsa -b 4096 -C ci@travis-ci.org

Enter file in which to save the key (/var/root/.ssh/id_rsa): deploy_key

When you are asked to enter passphrase, please type enter to skip.

Enter passphrase (empty for no passphrase):

Then open deploy_key.pub and copy whole file content. Add that deploy key to your repository at https://github.com/<your name>/<your repo>/settings/keys.

(deploy keys in github)

Next, install travis client tool to upload SSH Key information to the Travis-CI.

After installation, run

travis encrypt-file deploy_key

(travis encrypt-file result)

Add the script to deploy.sh under scripts folder and also add deploy_key.enc to scripts folder. Append scripts/ to delopy_key and deploy_key in this script as follows,

openssl aes-256-cbc -K $encrypted_7562052d3e34_key -iv $encrypted_7562052d3e34_iv -in scripts/deploy_key.enc -out scripts/deploy_key -d

Please do not to upload deploy_key.pub.

If it prompts login info, try

travis login

Then you can push everything to the repository and Travis-CI will build and push things for you. One more thing to note is that npm run deploy in deploy.sh is used here which use gh-pages library to push code to gh-pages.

GitHub Webhook

(1st part Github Webhook)

(2nd part of Github Webhook)

Add a webhook in your project (1st part of Github Webhook) and you can specify when Github will send the request (2nd part of Github Webhook).

(app to receive Github Webhook Request)

Then you need to deploy a small app (pm2 is recommended to persist the app process) to respond to Github Webhook.

codePath is the path where accommodate production code from gh-pages branch.

updateCommand,

cd ${codePath};sudo git fetch — all;sudo git reset — hard origin/gh-pages;

is to fetch all stuff from gh-pages branch and only show the latest record. Don’t forget to configure your nginx/apache to serve your static files in codePath.

Reference

Auto-deploying built products to gh-pages with Travis

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • dingdang-robot:一个开源的中文智能音箱项目

    本文介绍我在业余时间开发的一个开源的智能音箱项目 dingdang-robot ,分享一下我在开发这个项目过程中的心得。

    潘伟洲
  • 开源项目无人问津?不妨拆读腾讯开源大神的“锦囊妙计”!

    WeFlow是WeChat团队为web开发人员提供跨平台支持和环境准备的前端工作流开发工具,目前已支持微信游戏、微信·朋友圈广告、微信·城市服务等第三方合作团队...

    腾讯开源
  • Github 开源项目贡献指南:如何给开源项目做贡献 (下)

    给开源项目做贡献可以说是在你能想象的领域上学习,传授,累计经验的最有效的方式!为什么人们要给开源项目做贡献,原因太多了!本文将为大家讲述如何为Github 开源...

    腾讯开源
  • Github 开源项目贡献指南:从开源工作中获取报酬

    经济上的支持会给你多多少少增加一份责任感。在这个我们生活的万物互联,快节奏的世界里,能够拒绝别人说:“我现在不想做这个,我想做点不一样的。”对我们而言很重要。

    腾讯开源
  • 放弃 Dubbo,选择最流行的 Spring Cloud 微服务架构实践与经验总结

    在使用 Spring Cloud 之前,我们对微服务实践是没有太多的体会和经验的。从最初的开源软件云收藏来熟悉 Spring Boot,到项目中的慢慢使用,再到...

    51CTO技术栈
  • Github 开源项目贡献指南:开源的法律问题

    向世界分享你们具有创造性的工作,这是一个多么令人激动和有价值的经历。这也意味着你们必须担心一堆你们不清楚的法律问题。幸运的是,你们不必从头开始。我们已经涵盖了你...

    腾讯开源
  • Github 开源项目贡献指南:如何给开源项目做贡献 (上)

    给开源项目做贡献可以说是在你能想象的领域上学习,传授,累计经验的最有效的方式!为什么人们要给开源项目做贡献,原因太多了!本文将为大家讲述如何为Github 开源...

    腾讯开源
  • 读《代码不朽:编写可维护软件的10大要则》C# 版

    这本书特别针对没有接受过计算机科学或软件工程专业学习的软件开发人员,这类人员除了熟悉所用语言语法和语义之外,很少接受其他专业培训,对软件工程中的一些概念理解欠缺...

    张善友
  • Github 开源项目贡献指南:领导和管理社区

    你们的项目正在成长,也有人参与进来,你们承诺保持这样的状态。在这个阶段,你们可能想知道如何将常规项目贡献者纳入你们的工作流程,无论是否给他们提交权限或者解决社区...

    腾讯开源
  • 使用 Github 和 Hexo 快速搭建个人博客

    最近因为微信普通公众号不支持页面内插入多个链接(想做个集合贴链接到自己的不同作品),就又想着还是自己搭个网站吧。改变策略使用 Github + Hexo 倒是很...

    李科慧

扫码关注云+社区

领取腾讯云代金券