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

相关文章

来自专栏一个会写诗的程序员的博客

Jenkins 自动化部署 持续集成

Help for feature: Source files Files to upload to a server.

791
来自专栏技术沉淀

Rails里应用Friendly Id

1063
来自专栏bboysoul

社会工程学信息收集工具(Userrecon)

这个工具最主要的功能就是可以让你在知道用户名的情况下批量去各个社交网站上查找这个用户名的主页,方便收集对象的主页

2384
来自专栏逢魔安全实验室

Some Linux Hacking Tricks

3545
来自专栏happyJared

Spring Boot几种启动问题的解决方案

  使用Spring Boot以来,遇到和解决过好几次不同的项目启动问题,大多数事故起于错误的配置和依赖。因此,本文用于汇总这些问题,以及提供相应的解决方案,帮...

2271
来自专栏cloudskyme

Could not find artifact com.sun:tools:jar:1.5.0

【maven package】,则依然报错,但报的是另外一个错误: [INFO] Scanning for projects…[INFO]           ...

3024
来自专栏CreateAMind

Gazebo 简介

These three steps will run Gazebo with a default world.

972
来自专栏一个会写诗的程序员的博客

《Spring Boot极简教程》第7章 Spring Boot集成模板引擎

其实,没有任何一个模板引擎(jsp,velocity,thymeleaf,freemarker,etc)可以完全实现MVC绝对的分层,只有“自由度”上的界定罢了...

863
来自专栏算法修养

ZOJ 3927 Programming Ability Test

Programming Ability Test (PAT) aims to evaluate objectively, through unified exa...

2464
来自专栏石奈子的Java之路

原 荐 SpringBoot 2.0 系列0

1584

扫码关注云+社区