如何使用 Travis CI 环境变量 + .sh 脚本自动部署到 Github 页面?

How to use Travis CI environment variables + .sh script for auto deployment to Github Pages?

更新:这是有效的,但需要微调(见下文)

Repo Link: https://github.com/oneezy/sweet-element
Travis CI Link: https://travis-ci.org/oneezy/sweet-element

自动化:Travis CI + Github 页

为了更详细地解释我的目标是什么,我正在尝试简化我的 Github + Travis CI 工作流程,其中包含 2 个环境变量 GH_TOKEN + GH_REF 存储在 .travis.yml 和一个可执行文件 gpages_build.sh shell 脚本中,当我 git push 从命令行。我想以这样一种方式创建我的 .travis.yml,它永远不必手动编辑,因此它 智能 足以生成 GH_REF 所需的值,具体取决于基于已经存在的信息(下面有更多详细信息)。


我关注了 2 篇博客文章,它们让我走到了现在的地步:

教程 1: How to build Polymer components with Github and Travis CI
教程二:Automatic github pages deployment for Polymer elements with Travis CI


当前工作设置✔

从 Github 创建 "Personal Access Token"
使用travis encrypt命令添加GH_TOKEN环境变量到.travis.yml
添加GH_REF: github.com/oneezy/sweet-element环境变量
使用 .travis.yml 设置其他所有内容
使用 gpages_build.sh 自动部署到 Github 页面
使用 git update-index --chmod=+x gpages_build.sh 使 gpages_build.sh 可执行
git push 看着这一切走到一起


问题✖

.travis.yml 中手动写入 GH_REF 值是重复/乏味的
手动写 git update-index --chmod=+x gpages_build.sh 是重复/乏味的


可能的解决方案和问题?

? 我可以使用已经存在的信息动态生成 GH_REF 值吗?
? 我可以从 bower.jsonpackage.json 中提取信息以生成 GH_REF 值吗?
? 我可以从 git config 中提取信息以生成 GH_REF 值吗?
? Travis CI 是否提供任何可以用来代替 GH_REF 的变量?
? 如何让 gpages_build.sh 脚本对所有项目都可执行?
? 我可以从完全不同的存储库执行 gpages_build.sh 脚本吗?
? 我可以从 .travis.yml?

使 gpages_build.sh 脚本可执行吗

代码...

.travis.yml (Github Link)

language: node_js
node_js: stable
sudo: required
dist: trusty
addons:
  firefox: latest
  apt:
    sources:
    - google-chrome
    packages:
    - google-chrome-stable

install:
- npm install -g bower polymer-cli
- npm install
- bower install

script:
- xvfb-run polymer test

after_success:
- if [ "$TRAVIS_BRANCH" = "master" ]; then 
  ./gpages_build.sh oneezy sweet-element "Justin O'Neill'" justin@oneezy.com; fi

env:
  global:
    - GH_REF: github.com/oneezy/sweet-element
    - secure: p1OHpnsMIpMjQ4yiFAZJoDZBr/5VHXel+HHC9s8O+MvIqyv5IdxNexkmQKYJneDfYG8XZ/8aNoP4Bsiycysw5POCX1Z9BAwkEBIQ8rdgslzNoWronbtAZUBQAUFxQoVaKt1hBLXNpfyrfRGIfNtAKgA8pekurvIcgjnPmzsNGWr1ztj2y7/5mR7VZZQy3bcM9cZNZLUymyr+RENOXufJnPG2ve/yha/VynUz2mPWEIQPPhg17ar2ICWZL0EZjG6lajR5g83TtSrDxRN2tTGpVWlKVi6udDB/JU+RLt744qhblXwRpFqh1E7r2xUxJWvibQt+UtuRwi6iNJxAy40/XW6Ss/unkwjmRZgU+G98Z3ojJj8Nrp9xah0H2S6M2CH8ySYHnBO6FhunQ3oeXYUn7mYyRiWRz1sjBn0rhWorD67pBFRKIRKFjPPlD9BuI/l/mD8ulgLa7IJFnkt5ZHJx3cWU/BGQ8xLcfor4SgkE4sxlZQWkkn2m2gwvw33JJP6Vv97cs/mgEYORVlBGdG5eAQc1+k18sbGTbbZZojJr5wp4c9VrnDKA7Ztt70ygSHn4etQRogngKPsrKHWnK2q1zBlWoTDq5zjdYZFQt+VC8fET87VUH5Rl7Cn9Chjg8ybY1a4Dq4zKM4uJVKsAYtL+GYNS/kQ/Vgpsd+UTVGx/lDA=


gpages_build.sh (Github Link)

#
# Modified to work with Travis CI automated builds
# Original license follows
#
# @license
# Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
# This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
# The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
# The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
# Code distributed by Google as part of the polymer project is also
# subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
#

# This script pushes a demo-friendly version of your element and its
# dependencies to gh-pages.

# usage gp Polymer core-item [branch]
# Run in a clean directory passing in a GitHub org and repo name
org=
repo=
name=
email=
branch=${5:-"master"} # default to master when branch isn't specified

mkdir temp && cd temp

# make folder (same as input, no checking!)
mkdir $repo
git clone "https://${GH_TOKEN}@${GH_REF}" --single-branch

# switch to gh-pages branch
pushd $repo >/dev/null
git checkout --orphan gh-pages

# remove all content
git rm -rf -q .

# use bower to install runtime deployment
bower cache clean $repo # ensure we're getting the latest from the desired branch.
git show ${branch}:bower.json > bower.json
echo "{
  \"directory\": \"components\"
}
" > .bowerrc
bower install
bower install $org/$repo#$branch
git checkout ${branch} -- demo
rm -rf components/$repo/demo
mv demo components/$repo/

# redirect by default to the component folder
echo "<META http-equiv="refresh" content=\"0;URL=components/$repo/\">" >index.html

git config user.name $name
git config user.email $email

# send it all to github
git add -A .
git commit -am 'Deploy to GitHub Pages'
git push --force --quiet -u "https://${GH_TOKEN}@${GH_REF}" gh-pages > /dev/null 2>&1

popd >/dev/null

I'm trying to simplify my Github + Travis CI workflow w/ 2 environment variables GH_TOKEN + GH_REF stored in .travis.yml ... used by

git clone "https://${GH_TOKEN}@${GH_REF}" --single-branch

您的脚本可以使用 the documentation

中引用的 TRAVIS_REPO_SLUG 环境变量

我设法做到了我想做的一切


我的目标

  • 使用 TRAVIS_REPO_SLUG 自动执行 gpages_build.sh 脚本中的 GH_REF 值(感谢提示@osowskit!)
  • 编写 git update-index --chmod=+x gpages_build.sh 一次并将其存储到自己的存储库中...需要时,只需 bower install 即可!

✔ 过程

这是我使用 Travis CI 创建和测试 <custom-elements> 并自动部署到 [=120] 的确切方法=] 页 成功构建后。


gpages_build.sh(脚本):

  1. 为了避免使用 git update-index --chmod=+x gpages_build.sh 命令使我的脚本在每个项目中都可执行,我需要将这个过程集中在一个方便的 Github 存储库 中(oneezy/build-tools)。这样做的好处是:
    • 只需使脚本可执行一次
    • 能够根据需要在一个地方(不是每个 repo)更新脚本
    • 确保当其他人克隆该项目时,他们将始终拥有 可执行文件 文件
  2. 为了使 GH_REF 变量自动生成,而不必每次都写出来,Travis CI 给了我们 TRAVIS_REPO_SLUG 变量,它基本上是 username/repo 对于你正在使用的任何 Github 存储库。你可以这样写:GH_REF="github.com/${TRAVIS_REPO_SLUG}"

```

# This script pushes a demo-friendly version of your element and its
# dependencies to gh-pages.

# usage gp Polymer core-item [branch]
# Run in a clean directory passing in a GitHub org and repo name

GH_REF="github.com/${TRAVIS_REPO_SLUG}"

org=`echo ${TRAVIS_REPO_SLUG} | cut -f 1 -d /`
repo=`echo ${TRAVIS_REPO_SLUG} | cut -f 2 -d /`

name="Travis CI"
email="builds@oneezy.com"
branch=${3:-"master"} # default to master when branch isn't specified

mkdir temp && cd temp

# make folder (same as input, no checking!)
mkdir $repo
git clone "https://${GH_TOKEN}@${GH_REF}" --single-branch

# switch to gh-pages branch
pushd $repo >/dev/null
git checkout --orphan gh-pages

# remove all content
git rm -rf -q .

# use bower to install runtime deployment
bower cache clean $repo # ensure we're getting the latest from the desired branch.
git show ${branch}:bower.json > bower.json
echo "{
  \"directory\": \"components\"
}
" > .bowerrc
bower install
bower install $org/$repo#$branch
git checkout ${branch} -- demo
rm -rf components/$repo/demo
mv demo components/$repo/

# redirect by default to the component folder
echo "<META http-equiv="refresh" content=\"0;URL=components/$repo/\">" >index.html

git config user.name $name
git config user.email $email

# send it all to github
git add -A .
git commit -am 'Deploy to GitHub Pages'
git push --force --quiet -u "https://${GH_TOKEN}@${GH_REF}" gh-pages > /dev/null 2>&1

popd >/dev/null

```

Travis.yml配置:

  1. 一个让我失望的 GOTCHAGH_TOKEN 变量,即 Personal Access Token you need from Github for read/write ability to your repositories. Due to the power this token has, I needed to encrypt it w/ the Travis CLI (Travis 命令行工具)travis encrypt GH_TOKEN=********* --add,它会自动将加密变量添加到您的 .travis.yml 文件中。我的印象是我可以为每个 repo 使用相同的 encrypted GH_TOKEN,但我发现事实并非如此。当您使用 Travis 加密任何内容时,您似乎实际上是将该加密与您所在的存储库相关联,例如:您必须 travis encrypt GH_TOKEN=********* --add 在每个存储库中。一种可能的解决方法是在 config 文件中配置一个别名/命令,其中存储了这些信息,但我还没有探索这个理论。

  2. 接下来要做的是 bower install -s gpages_build.sh 脚本和 运行 它来自 .travis.yml w/ ./bower_components/build-tools/gpages_build.sh。这将自动从我们的 build-tools 回购中提取脚本并 运行 它。

```

language: node_js
node_js: stable
sudo: required
dist: trusty

addons:
  firefox: latest
  apt:
    sources:
    - google-chrome
    packages:
    - google-chrome-stable

cache:
  directories:
  - node_modules
  - "$HOME/.cache/bower"

install:
- npm install -g bower polymer-cli
- npm install
- bower install

script:
- xvfb-run polymer test

after_success:
- if [ ${TRAVIS_PULL_REQUEST} = "false" ] && [ "$TRAVIS_BRANCH" = "master" ]; then
  bower install -s oneezy/build-tools && ./bower_components/build-tools/gpages_build.sh;
  fi

# DO EVERY TIME: 
# travis encrypt GH_TOKEN=**************** --add  
# env:
#   global:
#     secure: ZwNuFN1cryC5dff4c3a1qePkoRZoug+HDiN55dFATTt7Opk20C8SgO+RGEWqYWelFkUN2jhAyoJ91GFMxOyYqbqZP+mQfBaFWgBZoKIcGcDur5in4z6ZaWfw65X03K0HIaaKaunpO4C1d/d++zMhqvudhaJ4JgXJXts5cUdmXGxCIEhKE+mH5d76VK4fbpyrtpewllqHeaiIE88oFZ0L8xQP8K7SUXukvVmE1Re0Kl0UjXjsdSUftcj+gnOcBxqGjVlSjQ9Bk0zmP+2nHYo8Gx=

```

瞧!