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


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)


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


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 This file contains the commands used for deployment.

(1st part of

The 1st part of 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

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

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 and copy whole file content. Add that deploy key to your repository at<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 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

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 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.


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.


Auto-deploying built products to gh-pages with Travis




0 条评论
登录 后参与评论



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

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


Q171 Excel Sheet Column Number

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



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



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




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

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





Leetcode Container With Most Water

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


破解Excel 密码保护

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


Python 学习之目录递归