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 条评论
登录 后参与评论

相关文章

来自专栏专知

【关关的刷题日记57】Leetcode 101. Symmetric Tree

关关的刷题日记57 – Leetcode 101. Symmetric Tree 题目 ? 题目的意思是判断一棵树是否是镜像的,此处镜像指的是中心对称的树。 思...

2864
来自专栏Bingo的深度学习杂货店

Q171 Excel Sheet Column Number

Related to question Excel Sheet Column Title Given a column title as appear in a...

3225
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–带变式价格的销售报价(663)-1业务概览

用途 Quotation processing is the first stage of this business process. In this s...

3244
来自专栏james大数据架构

JQuery实现仿sina新浪微博新鲜事滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

1727
来自专栏天天

框架设计续集(二)

613
来自专栏小樱的经验随笔

Codeforces 839D Winter is here【数学:容斥原理】

D. Winter is here time limit per test:3 seconds memory limit per test:256 megaby...

2536
来自专栏菩提树下的杨过

利用sharding-jdbc分库分表

sharding-jdbc是当当开源的一款分库分表的数据访问层框架,能对mysql很方便的分库、分表,基本不用修改原有代码,只要配置一下即可,完整的配置参考以下...

3787
来自专栏WD学习记录

Leetcode Container With Most Water

Given n non-negative integers a1, a2, ..., an , where each represents a point at...

493
来自专栏张善友的专栏

破解Excel 密码保护

Excel加密虽然不能防止能打开的人通过复制等操作外泄,但至少也是一防较好的防线。移除Excel 2013的密码保护方法如下: 点击“Office”按钮,再选择...

2486
来自专栏AzMark

Python 学习之目录递归

884

扫码关注云+社区