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

Question

更新：这是可行的，但需要微调（见下文）

回购链接： https://github.com/oneezy/sweet-element
Travis CI 链接： 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 时，用于将演示和文档自动部署到 Github 页面on_success: 的脚本。我想创建我的.travis.yml，使其永远不必手动编辑，以便它智能足以根据已经存在的信息生成GH_REF所需的值（更多详情如下）。

我关注了 2 篇博客文章，这些文章让我达到了现在的水平：

教程一： How to build Polymer components with Github and Travis CI
教程2： Automatic github pages deployment for Polymer elements with Travis CI

---

当前工作设置✔

✔ 从 Github 创建 “个人访问令牌”
✔ 使用travis encrypt 命令将GH_TOKEN 环境变量添加到.travis.yml
✔ 添加GH_REF: github.com/oneezy/sweet-element环境变量
✔ 使用 .travis.yml 设置其他所有内容
✔ 使用gpages_build.sh 自动部署到 Github Pages
✔ 使用 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.json 或package.json 中提取信息以生成GH_REF 值吗？
？ 我可以从git config 中提取信息以生成GH_REF 值吗？
? Travis CI 是否提供任何可以用来代替GH_REF 的变量？
? 如何使gpages_build.sh 脚本对所有项目都可执行？
？ 我可以从一个完全不同的 repo 执行 gpages_build.sh 脚本吗？
？ 我可以让gpages_build.sh 脚本从.travis.yml 执行吗？

---

代码...

.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=$1
repo=$2
name=$3
email=$4
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

Answer 1

我正在尝试使用存储在.travis.yml 中的 2 个环境变量 GH_TOKEN + GH_REF 来简化我的 Github + Travis CI 工作流程......供

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

您的脚本可以使用the documentation 中引用的TRAVIS_REPO_SLUG 环境变量

Answer 2

我设法做到了一切我想做的事情。

---

我的目标

• 使用TRAVIS_REPO_SLUG 自动化gpages_build.sh 脚本中的GH_REF 值（感谢@osowskit 的提示！）
• 编写一次 git update-index --chmod=+x gpages_build.sh 并将其存储到它自己的存储库中...当需要它时，只需 bower install 它！

---

✔ 过程

这是我创建和测试 <custom-elements> 的确切方法，其中包含 Travis CI 并在成功构建后自动部署到 Github Pages。

gpages_build.sh（脚本）：

1. 为了避免使用git update-index --chmod=+x gpages_build.sh 命令使我的脚本在每个项目中可执行，我需要将此过程集中在一个方便的 Github 存储库中(oneezy/build-tools)。这样做的好处是：
   • 只需使脚本可执行一次
   • 能够根据需要在一个地方更新脚本（不是每个 repo）
   • 确保当其他人克隆项目时，他们将始终拥有 executable 文件
2. 为了使GH_REF 变量自动运行，而不必每次都写出来，Travis CI 为我们提供了TRAVIS_REPO_SLUG 变量，对于您正在使用的任何 Github 存储库，它基本上是 username/repo。您像这样写出来：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. 让我失望的一个 GOTCHA 是 GH_TOKEN 变量，这是您需要从 Github 获得读/写能力的 Personal Access Token到您的存储库。由于此令牌具有强大的功能，我需要使用 Travis CLI （Travis 命令行工具） 对其进行加密。 travis encrypt GH_TOKEN=********* --add，它将自动将加密变量添加到您的.travis.yml 文件中。我的印象是我可以为每个 repo 使用相同的 加密 GH_TOKEN，但我发现并非如此。当您使用 Travis 加密任何内容时，您似乎实际上是将该加密与您所在的存储库联系起来，例如：您必须在每个存储库中使用 travis encrypt GH_TOKEN=********* --add。一种可能的解决方法是在 config 文件中配置 alias/ 命令，并在其中存储此信息，但我尚未探索该理论。

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

```

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=

```

瞧！