travis ci_如何使用Travis CI和GitHub进行Web开发工作流程

travis ci

by Vijayabharathi Balasubramanian

通过Vijayabharathi Balasubramanian

如何使用Travis CI和GitHub进行Web开发工作流程 (How to use Travis CI and GitHub for your web development workflow’s heavy lifting)

It’s common to hack together apps on CodePen when you are starting out. But there will be a time when you will want to publish your own web apps to the whole world. They could be side projects or projects for a client. A good development workflow will make a world of difference at this point.

刚开始时，通常会在CodePen上将应用程序黑客在一起。 但是有时您会希望将自己的Web应用发布到全世界。 它们可以是副项目，也可以是客户的项目。 一个好的开发工作流将在这一点上有所作为。

We are going to set up a development workflow using the following tools:

我们将使用以下工具来建立开发工作流程：

• create-react-app
  创建React应用
• npm scripts
  npm脚本
• Travis-CI
  特拉维斯

We’ll wire Travis CI and GitHub together. At the end, we’ll to get a nice and shiny badge Like the one below.

我们将Travis CI和GitHub连接在一起。 最后，我们将获得一个漂亮且有光泽的徽章，如下图所示。

But more than the look, the badge signifies a function. It’s a sign of Travis CI testing, building and publishing our commits to GitHub. Travis CI publishes only if the tests pass.

除了外观之外，徽章还象征着一种功能。 这是Travis CI测试，构建和发布对GitHub的提交的标志。 仅当测试通过时，Travis CI才会发布。

Get ready to place these badges on your repository:

准备将这些徽章放置在您的存储库中：

I have organized the whole workflow in stages. One sitting should do for each stage. That’s within about 50 minutes.

我已经分阶段组织了整个工作流程。 每个阶段都要坐一会儿。 大约需要50分钟。

阶段1：在本地运行create-react-app (Stage 1 : Run create-react-app locally)

准备好git仓库 (Get your git repository ready)

The first thing is to create a new repository on GitHub. If you don't already have an account, now is the time to register for one. Public repositories are free. When you create a new repository, GitHub lets you to create files for .gitignore, license and README.md.

首先是在GitHub上创建一个新的存储库。 如果您还没有帐户，现在该注册一个帐户了。 公共存储库是免费的。 创建新存储库时，GitHub允许您为.gitignore ， license和README.md创建文件。

If you are starting with Git for the first time, you can read this free book online. There is also a help section on GitHub.

如果您是初次使用Git，则可以在线阅读此免费书籍 。 GitHub上还有一个帮助部分。

Here is how our new repository will look:

这是我们的新存储库的外观：

All right, let’s get that on our terminal. Do you see that bright green button on the above image showing Clone or download. That’ll give us the URL to the repository. On your terminal, run this command:

好吧，让我们在终端上获取它。 您是否在上图中看到显示克隆或下载的亮绿色按钮。 这将为我们提供存储库的URL。 在您的终端上，运行以下命令：

git clone [email protected]:pineboat/react-continuous-deployment.git

That command will download the contents of the repository into a new directory. It names the directory the same as the repository. In our case, the directory name will be react-continuous-deployment.

该命令会将存储库的内容下载到新目录中。 该目录的名称与存储库相同。 在我们的例子中，目录名称将为react-continuous-deployment 。

If you want to make sure a link to original repository is ready, use the command:

如果要确保已准备好指向原始存储库的链接，请使用以下命令：

git remote -v

git remote -v

Now that we are set to push our changes to GitHub, let’s get React up and running.

现在我们准备将更改推送到GitHub，让我们启动并运行React。

使用create-react-app启动并运行 (Up and running with create-react-app)

Starting a fresh react project from scratch might take longer than you’d expect. Especially when you are not using any predefined scaffolds. There are several solutions out there that we can use to get started. I chose official Create React App because I’ve tried it first and stuck with it. When you don’t have to micromanage your configurations, it gives you a clean start so you can hit the ground coding.

从头开始一个新的React项目可能会花费比预期更长的时间。 特别是当您不使用任何预定义的脚手架时。 有几种解决方案可供我们入门。 我选择了官方的Create React App，因为我已经尝试过并坚持使用。 当您不必对配置进行微管理时，它为您提供了一个全新的起点，因此您可以进行基础编码。

As the repository README.md file shows, you only have to install it once globally. Then you can use it to scaffold as many project as you like.

如存储库README.md文件所示，您只需全局安装一次。 然后，您可以根据需要使用它来支撑尽可能多的项目。

To install it type:

要安装它，请输入：

npm install -g create-react-app

Once that’s installed, you can run it from any directory to create a new app. Let’s give it our repository’s name:

安装完成后，您可以从任何目录运行它来创建一个新应用。 让我们为其提供存储库名称：

create-react-app react-continuous-deployment

That will not create a new folder as we already have the folder created by Git. Instead it will start installing necessary node_modules and scaffold scripts within the existing folder.

由于我们已经拥有Git创建的文件夹，因此不会创建新文件夹。 相反，它将开始在现有文件夹中安装必要的node_modules和脚手架脚本。

If you want a fresh application, you can use:

如果您需要全新的应用程序，则可以使用：

create-react-app fancy-app-name

create-react-app fancy-app-name

Then you’ll need to create a Git repository and connect it to GitHub. That is not too difficult. You can use this help page from GitHub.

然后，您需要创建一个Git存储库并将其连接到GitHub。 那不是太困难。 您可以从GitHub使用此帮助页面。

Has that installation finished yet? It shouldn’t take more than 5 minutes. It took me about 15 minutes. Don’t let that scare you. Unless you’re like me, and you are using a 150 mb/s 4G data card that gives you about 512kbps of download speed on its best day.

安装完成了吗？ 不应超过5分钟。 我花了大约15分钟。 不要让那吓到你。 除非您像我一样，否则您将使用150 mb / s的4G数据卡，该卡在最佳状态下的下载速度约为512kbps。

The nice thing is, the installation moved our old README.md file aside. The terminal shows this sweet message:

不错的是，安装程序将旧的README.md文件移到了一边。 终端显示以下消息：

You had a `README.md` file, we renamed it to `README.old.md`

The terminal should also have shown you the enormous list of packages in a tree structure. This can look scary. But most of these are dependencies between packages. They are there to help you develop your app. The final product will only have necessary JavaScript files such as react.js and react-dom.js. We’ll go there in a while.

终端还应该以树形结构向您展示了庞大的软件包列表。 这看起来很可怕。 但是其中大多数是包之间的依赖关系。 他们在那里可以帮助您开发应用程序。 最终产品将仅具有必要JavaScript文件，例如react.js和react-dom.js 。 我们待会儿再去。

For now, let’s wake up our application. Once the installation is over, create-react-app will give us a list of commands which will be handy.

现在，让我们唤醒我们的应用程序。 安装结束后， create-react-app将为我们提供方便使用的命令列表。

Here is a catalog for reference:

这是供参考的目录：

• npm start

  npm start

  Starts the development server

  启动开发服务器

• npm run build

  npm run build

  Bundles the app into static files for production

  将应用程序捆绑到静态文件中以进行生产

• npm test

  npm test

  Starts the test runner

  启动测试运行程序

• npm run eject

  npm run eject

  Removes the single dependency build from your project See

  从项目中删除单个依赖项构建请参阅

  here

  这里

• npm run deploy

  npm run deploy

  To deploy the build to gh-pages branch

  将构建部署到gh-pages分支

npm start and npm test built-in node commands are recognized by default. You need to run other scripts such as build, eject and deploy using an extra run flag: npm run script_name

默认情况下会识别npm start和npm test内置节点命令。 您需要使用额外的运行标志来运行其他脚本，例如构建，弹出和部署： npm run script_name

We’d add a few more in the process as we go. Now it’s time to load our site on a browser. Get inside the application directory and run:

我们将在此过程中添加更多内容。 现在是时候在浏览器上加载我们的网站了。 进入应用程序目录并运行：

npm start

Like magic, a new browser tab opens and you see a nice React wheel turning. The view must be challenging you to build the next best app the internet is about to witness.

就像魔术一样，将打开一个新的浏览器选项卡，您会看到一个不错的React轮转动。 视图必须挑战您构建互联网将要见证的下一个最佳应用程序。

So this is what we get:

这就是我们得到的：

That is a pretty neat GIF (Graphics Interchange Format) isn’t it? Except for my cursor coming in. I captured this GIF with a tool called Peek. Check it out when you need it.

那是一个非常整洁的GIF(图形交换格式)，不是吗？ 除了我的光标进入之外，我还使用一个名为Peek的工具捕获了此GIF 。 在需要时检查一下。

Well done! I hope that didn’t take more than 45 minutes. If you are running into issues, pay attention to the error messages and try to fix them.

做得好！ 我希望不要超过45分钟。 如果您遇到问题，请注意错误消息并尝试解决它们。

When you are close to the point of frustration, head over to Stack Overflow for help. Or leave your questions in the comments below.

当您快要沮丧时，请前往Stack Overflow寻求帮助。 或在下面的评论中留下您的问题。

Before we hack into any of the files, let’s get the code committed and pushed to GitHub repository. These commands will do:

在入侵任何文件之前，让我们提交代码并将其推送到GitHub存储库。 这些命令将执行以下操作：

git status git add --all git commit -m "Initial Scaffold, this is your own message"

• git status

  git status

  Shows a list of changes we’ve made

  显示我们所做的更改的列表

• git add

  git add

  Adds those changes to a temporary place called

  将这些更改添加到名为

  stage before we push it to the cloud

  我们将其推向云端之前的stage

If you run git status again, it will report that

如果再次运行git status ，它将报告

Your branch is ahead of 'origin/master' by 1 commit. (use "git push" to publish your local commits) nothing to commit, working directory clean

That’s right, we have made and committed changes locally. There are no uncommitted changes. But we are ahead of the cloud version of our repository. It’s time to publish them to a safe house, which is GitHub.

没错，我们已经在本地进行更改并提交了更改。 没有未提交的更改。 但是我们领先于存储库的云版本。 现在是时候将它们发布到GitHub的安全屋了。

All you need to run is:git push origin master

您只需要运行： git push origin master

You’ll get a nice report showing a hash like fb74259..045ec7a, which is a reference for our commit. Of course, your hash will be different.

您会得到一个不错的报告，其中显示了像fb74259..045ec7a这样的哈希，这是我们提交的参考。 当然，您的哈希将有所不同。

Check your GitHub repository. Are you surprised to see a long README.md?Remember that create-react-app has replaced our tiny README.md with its own. It’s huge and helpful, so we’ll keep it for now before we write our own.

检查您的GitHub存储库。 您是否对看到很长的README.md感到惊讶？请记住， create-react-app已用我们自己的README.md代替了它。 它既巨大又有用，因此在编写自己的代码之前，请先保留它。

阶段2：将网站移植到GitHub Pages (Stage 2: Porting site over to GitHub Pages)

建立静态网站 (Build the static site)

Let’s take a look at the final build.

让我们看一下最终版本。

You only have to run:

您只需要运行：

npm run build

npm run build

Make sure that you are within the application directory for all the commands. We’ll get this nice text showing us what has happened and what else can we do:

确保所有命令都在应用程序目录中。 我们将获得以下优美的文字，向我们展示发生了什么以及我们还能做些什么：

$ npm run build > [email protected] build /home/weebee/Projects/blog_projects/react-continuous-deployment> react-scripts buildCreating an optimized production build...Compiled successfully.File sizes after gzip:  48.12 KB  build/static/js/main.9fdf0e48.js  288 B     build/static/css/main.cacbacc7.cssThe project was built assuming it is hosted at the server root.To override this, specify the homepage in your package.json.For example, add this to build it for GitHub Pages:  "homepage" : "http://myname.github.io/myapp",The build folder is ready to be deployed.You may serve it with a static server:  npm install -g serve  serve -s build

The npm run build command does what we asked for. It builds our app, and optimizes and minifies our assets. And it places everything in a folder called build.

npm run build命令执行了我们要求的操作。 它构建了我们的应用程序，并优化和缩小了我们的资产。 并将所有内容放置在名为build的文件夹中。

Towards the bottom, the suggestion is to install the serve npm package to start a local server. Most of the time, if you are on Linux, you’ll already have Python installed. It’s quite easy to start a local server if you have Python.

对于底部，建议是安装serve npm软件包以启动本地服务器。 大多数情况下，如果您使用的是Linux，则已经安装了Python。 如果您拥有Python，则启动本地服务器非常容易。

Step into the build directory and start a server, see following commands:

进入build目录并启动服务器，请参阅以下命令：

cd buildpython -m SimpleHTTPServer

Python command by default starts the server on port 8000. So, http://localhost:8000 will serve the production version of the website. It uses assets from your local build directory that we just created.

默认情况下，Python命令在端口8000上启动服务器。因此， http://localhost:8000将提供网站的正式版。 它使用我们刚刚创建的本地构建目录中的资产。

If that looks good, we are going to send it over to GitHub pages.

如果看起来不错，我们将其发送到GitHub页面。

GitHub页面上的入门 (Primer on GitHub pages)

GitHub pages are hosting solution provided by GitHub for repositories. There are few places where you can host your site, all within a repository:

GitHub页面是GitHub为存储库提供的托管解决方案。 在存储库中，几乎没有什么地方可以托管站点：

• You can use master branch (the default one) to host your website

  您可以使用master分支(默认分支)来托管您的网站

  If you have an

  如果您有

  index.html, it’ll show up. Otherwise, your README.md will show up.

  index.html ，它将显示出来。 否则，将显示您的README.md 。

• You can also use docs folder in a master branch to host your site

  您还可以在master分支中使用docs文件夹来托管您的网站

  The use case would be when you have a software or library developed on GitHub. You might want to host the documentation along in the same repository.

  用例是在GitHub上开发了软件或库时。 您可能希望将文档托管在同一存储库中。

• You can use the gh-pages branch to host your site

  您可以使用gh-pages分支来托管您的网站

There is an exception. Your repository name should not be .github.io or t;.github.io

有一个例外。 您的存储库名称不应为.git您的用户名.git hub。 io or t; .github.io

These are special names and they limit you to using the master branch.

这些是特殊名称，它们限制您使用master分支。

Once you host your website, you can load it in the following URLs. It depends on whether your repository is under your account or an organization account:

托管网站后，您可以将其加载到以下URL中。 这取决于您的存储库是在您的帐户下还是在组织帐户下：

https://.github.io//

https://.github.io//

With that understanding, let’s equip our repository to go live.

有了这种了解，让我们使我们的存储库投入使用。

发布到GitHub页面 (Publish to GitHub pages)

The new README.md given to us by the create-react-app has a separate section on GitHub pages. There are few things we need to do.

create-react-app提供给我们的新README.md在GitHub页面上有单独的部分。 我们需要做的事情很少。

检查package.json文件中的附加内容 (Check additions to package.json file)

"homepage": "http://.github.io/

Note: Usually, the last section or entry in a JSON doesn’t need a comma, all others should have one.

注意 ：通常，JSON的最后一个部分或条目不需要逗号，所有其他部分或条目都应有一个逗号。

安装gh-pages软件包 (Install gh-pages package)

This one is easy. Just run the following command while you are inside the project directory:

这很容易。 在项目目录中时，只需运行以下命令：

npm install --save gh-pages

npm install --save gh-pages

The --save flag will add gh-pages as a dependency to package.json. This is to ensure anyone else who clones your project can also get it when they run npm install.

--save标志会将gh-pages添加为package.json的依赖项。 这是为了确保克隆您的项目的其他任何人在运行npm install时也能获得它。

Here is a snapshot of git diff command showing all we have added since package.json was created.

这是git diff命令的快照，显示了自package.json创建以来我们添加的所有内容。

部署到gh-pages分支 (Deploy to gh-pages branch)

Let’s run npm run deploy. It will automatically run predeploy, to generate the production build we’ve seen earlier. It will then deploy the build to our repository under a new branch named gh-pages.

让我们运行npm run deploy 。 它将自动运行predeploy ，以生成我们之前看到的生产版本。 然后，它将在内部名为gh-pages的新分支下将构建部署到我们的存储库中。

Check if you get a Published status as the last statement. If so, you’ve successfully deployed the production build to GitHub. Here is the output:

检查您是否以Published状态作为最后一条语句。 如果是这样，则您已成功将生产版本部署到GitHub。 这是输出：

选择要发布的gh-pages分支 (Select gh-pages branch to be published)

Let’s head over to the GitHub repository and publish our site. Open up the repository and go to settings tab at the top. It looks like this image below, wait a minute! GitHub has automatically published the gh-pages branch. There is nothing more to do. It also shows the URL in which we can access the site.

让我们转到GitHub存储库并发布我们的网站。 打开存储库，然后转到顶部的“设置”选项卡。 如下图所示，请稍等！ GitHub自动发布了gh-pages分支。 没什么可做的了。 它还显示了我们可以访问该站点的URL。

The sub-title above should actually say Do nothing. It’s all done and ready for us to consume.

上面的副标题实际上应该说什么也不做 。 所有这些都已准备就绪，可供我们使用。

Note: The URL shown for my repository may be misleading you. That’s because I have created this repository under an organization named PineBoat, which is my blog. GitHub places this under my custom domain which isn’t something I expected when I tried this. Yours will differ.

注意 ：为我的存储库显示的URL可能会误导您。 那是因为我是在我的博客名为PineBoat的组织下创建此存储库的。 GitHub将其放在我的自定义域下，这在我尝试此域时不会出现。 您的会有所不同。

So far, so good. If you have you had prior experience in Git and Node packages, you should have had no trouble reaching this far. In fact, the default README.md was enough to help me this far. If you have had no experience, I hope you enjoyed the journey.

到目前为止，一切都很好。 如果您曾经有过Git和Node软件包的经验，那么到目前为止您应该没有问题。 实际上， README.md ，默认的README.md足以帮助我。 如果您没有经验，希望您旅途愉快。

But we are aspiring for a continuous deployment workflow. We are starting to navigate some uncharted waters. One would argue nothing is uncharted in the Internet. I would agree, yet create my own map.

但是我们渴望有一个连续的部署工作流。 我们开始在一些未知的水域中航行。 有人会说互联网上没有什么是未知的。 我同意，但创建自己的地图。

阶段3：持续部署 (Stage 3: Continuous Deployment)

This is where we bring in bots to do most of the deployment that we did in stage 2.

这是我们引入机器人来执行我们在第二阶段所做的大部分部署的地方。

连接Travis CI以进行自动构建 (Wire in Travis CI for automatic build)

Let’s get Travis CI to do the deploying for us. There is no harm in building and deploying your site on your own. As we have seen, all it takes is a few more minutes of our valuable time.

让我们让Travis CI为我们完成部署。 自行构建和部署网站没有任何危害。 正如我们所看到的，所需要的只是宝贵时间的几分钟。

However, when you run into larger projects of scale it’s better to let trusted bots do some of the jobs. Travis CI is one such service.

但是，当您遇到规模较大的项目时，最好让受信任的机器人执行某些工作。 Travis CI就是这样一种服务。

We can take advantage of Travis CI to build and deploy whenever we commit our code to the repository.

每当我们将代码提交到存储库时，我们就可以利用Travis CI进行构建和部署。

注册Travis CI (Sign Up to Travis CI)

It would be annoying if I start with “if you have a GitHub account” now. I’m sure you have one by now and we can use that to sign up to Travis CI.

如果我现在从“如果您有GitHub帐户”开始，那将很烦人。 我确定您现在已经拥有一个，我们可以用它来注册Travis CI。

连接到GitHub存储库 (Connect to GitHub Repository)

Watch out for the permissions. If your repository does not get listed, click on the sync button and refresh the page. I had to grant permission to the “PineBoat” organization before I could see the repository.

注意权限。 如果您的存储库未列出，请单击“ 同步”按钮并刷新页面。 在查看存储库之前，我必须向“ PineBoat”组织授予权限。

Travis CI shows you the steps. Flick that switch against your repository to connect it.

Travis CI向您显示了步骤。 在您的存储库上滑动该开关以连接它。

Click on the repository name to open it up. It’ll show a build status as unknown and a larger note saying No builds for this repository.

单击存储库名称以将其打开。 它将显示生成状态为“ 未知”，并在较大的注释中显示“此存储库无生成” 。

Not for long. Let’s change it.

不是很长。 让我们改变它。

将.travis.yml添加到存储库 (Add .travis.yml to the repository)

Here is the .travis.yml that needs to be added. Have a look, and stay with me while I clear up some of the questions you might have.

这是需要添加的.travis.yml 。 看一看，在我清理您可能遇到的一些问题时，与我在一起。

language: node_js

node_js: - "node"

after_success: - git config --global user.name "vijayabharathi" - git config --global user.email "[email protected]" - git remote rm origin - git remote add origin https://vijayabharathib:${GH_TOKEN}@github.com/pineboat/react-continuous-deployment.git - npm run deploy

Be careful with the git remote add origin, it’s one long line. The YAML syntax is slightly different from JSON. This page might help. Now it’s time to break it down. You may have figured out most of those messages.

小心git remote add origin ，这是一长行。 YAML语法与JSON略有不同。 此页面可能会有所帮助。 现在是时候分解它了。 您可能已经弄清楚了大多数这些消息。

Here it is in plain English:

这是简单的英语：

• This is a node project. Get the latest node version
  这是一个节点项目。 获取最新的节点版本

• Since Travis runs npm test by default, we are asking it to do things after the test is successful

  由于Travis默认运行npm test ，因此我们要求它在测试成功后执行操作

• Add your Git username and email
  添加您的Git用户名和电子邮件

• Then add git remote origin for the repository

  然后为存储库添加git remote origin

  Use your user name and the GH_TOKEN generated as credentials

  使用您的用户名和生成的GH_TOKEN作为凭据

• Finally, run the npm run deploy command

  最后，运行npm run deploy命令

  If you recall, this will run

  如果您还记得，它将运行

  npm run predeploy before running npm run deploy

  在运行npm run deploy之前先运行npm run deploy npm run predeploy

提交并观看Travis CI的构建 (Commit and watch Travis CI build)

Keep your Travis CI repository page open. On your terminal add changes, commit and push them to GitHub.

保持您的Travis CI存储库页面处于打开状态。 在终端上添加更改，提交并推送到GitHub。

In case you need a reminder, here is the list of commands:

如果需要提醒，请参见以下命令列表：

git add --all git commit -m "add .travis.yml configuration for automatic build" git push origin master

If you switch to the Travis CI page, you’ll see the page coming alive once git push is over or within a few seconds. The build starts automatically and you’ll know if it is successful.

如果切换到Travis CI页面，一旦git push结束或几秒钟后，您就会看到该页面活跃起来。 构建会自动开始，您将知道构建是否成功。

Here is my Travis CI page showing nice green status.

这是我的Travis CI页面，显示良好的绿色状态。

The log shown is no less than 2500 lines. I’m glad Travis-CI shows only what we need to see.

显示的日志不少于2500行。 我很高兴Travis-CI仅显示了我们需要看到的内容。

A clear indication of steps followed as shown below in the image:

清晰地指示了步骤，如下图所示：

抽查，我们真的成功了吗？ (Spot check, did we really succeed?)

This is where automated tests that run on production may come in handy.

这是在生产中运行自动化测试的地方。

But that’s for another day. The Selenium WebDriver can wait until we finish this wiring. Let’s manually check if Travis CI really did publish to GitHub pages.

但这是另一天。 Selenium WebDriver可以等到完成此接线。 让我们手动检查Travis CI是否确实已发布到GitHub页面。

再次试用，这次是对代码的更改 (Another trial, this time with changes to code)

Last time, we couldn’t see any difference in our application after deployment. That’s because we didn’t make any. So there was no way to tell if the build was successful. You can load gh-pages branch and look into the commits, but I digress.

上一次，部署后我们的应用程序没有任何区别。 那是因为我们什么也没做。 因此，无法确定构建是否成功。 您可以加载gh-pages分支并查看提交，但我离题了。

Now, let’s make some small changes. It’s time to take the React wheel back in time.

现在，让我们进行一些小的更改。 现在是时候让React轮回到过去了。

We’ll only make two changes.

我们将只做两个更改。

Within src/App.css file, there is a section for animation named @keyframes App-logo-spin. Change that 360deg to -360deg. This is to spin the wheel counter clockwise.

在src/App.css文件中，有一个名为@keyframes App-logo-spin动画部分。 将该360deg更改为-360deg 。 这是使车轮逆时针旋转。

Load the src/logo.svg file and change the fill color from #61DAFB to #DA61FB. If your server is running via npm start, you can already see a purple wheel running counter clockwise. If not, add the changes to the stash, commit and push them to the repository. Watch if the build is successful in Travis-CI and then head over to your Github page.

加载src/logo.svg文件，并将填充颜色从#61DAFB为#DA61FB 。 如果您的服务器通过npm start运行，您已经可以看到一个紫色的轮子逆时针方向运行。 如果不是，请将更改添加到存储中，提交并推送到存储库。 观察在Travis-CI中构建是否成功，然后转到Github页面。

Load your_user_name.github.io/repository_name. You should see the purple wheel instead of the blue one.

加载your_user_name.github.io/repository_name 。 您应该看到紫色的轮子，而不是蓝色的轮子。

Alas, I don’t see that purple wheel. I still see the default blue one.

，我看不到那个紫色的轮子。 我仍然看到默认的蓝色。

修复丢失的GH_​​TOKEN (Fix the missing GH_TOKEN)

Though Travis CI reported that all is well, it’s not. If you open up the gh-pages branch, you’ll see the original commit we made from local terminal. No other commits. That means, the after_success commands were not so successful.

尽管Travis CI报告说一切都很好，但事实并非如此。 如果打开gh-pages分支，您将看到我们从本地终端进行的原始提交。 没有其他提交。 这意味着after_success命令不是很成功。

If you expand the npm run deploy section in the Travis build log, you’ll see some authentication errors. That’s because we haven't given Travis CI permission to write to our repository.

如果在Travis构建日志中展开npm run deploy部分，则会看到一些身份验证错误。 这是因为我们没有授予Travis CI写入存储库的权限。

You can create a new token from Personal access tokens page from GitHub.com. Remember to give access to public repository alone. Just one tickmark against public_repo will do. Don’t miss this. Once you generate a token, copy it. GitHub rightly warns that you will not be able to see it again.

您可以从GitHub.com的“ 个人访问令牌”页面创建新令牌。 请记住，仅授予对公共存储库的访问权限。 对public_repo只需打勾public_repo 。 不要错过 生成令牌后，将其复制。 GitHub正确地警告您将无法再次看到它。

Head over to Travis CI, click on More Options for your repository and choose settings. It’ll show several sections, but Environment Variables is the one to look for.

转到Travis CI，单击存储库的更多选项 ，然后选择设置 。 它会显示几个部分，但环境变量是要查找的部分。

Name the token as GH_TOKEN and past the token under value field. Click add. Do not switch on the Display value in logs as it might be visible to people if you send the logs out. The token is equivalent to your password.

将令牌命名为GH_TOKEN并在值字段下经过令牌。 单击添加。 不要打开日志中的“ 显示”值，因为如果您将日志发送出去，它可能会被人们看到。 该令牌等同于您的密码。

That’s it, now Travis-CI can write to our repository.

就是这样，现在Travis-CI可以写入我们的存储库了。

Go back to the Current tab of the repository and click on Restart build. Once the build is over, you can check the logs and check the gh-pages branch on GitHub. You should see a new commit.

返回存储库的“ 当前”选项卡，然后单击“ 重新启动构建” 。 构建结束后，您可以检查日志并检查GitHub上的gh-pages分支。 您应该看到一个新的提交。

Congrats! That’s our first automated deployment. How about the github.io website itself? No amount of refresh would bring the much needed purple wheel. Don’t loose hope yet.

恭喜！ 这是我们的第一个自动化部署。 github.io网站本身怎么样？ 没有任何刷新将带来急需的紫色轮子。 不要放弃希望。

要求服务人员休息一下 (Ask service worker to take a break)

Still the wheel is bleeding blue. But gh-pages branch in the repository shows a second commit. Let’s compare the index.html on the repository and on the web page source. They are pointing at different CSS and JavaScript files. The hash suffix is our clue.

车轮仍然渗出蓝色。 但是存储库中的gh-pages分支显示了第二个提交。 让我们比较存储库和网页源上的index.html 。 他们指向不同CSS和JavaScript文件。 哈希后缀是我们的线索。

This seems to be the result of energetic JavaScript service worker. It has cached the page for offline use. But this conclusion needs more research. In the mean time, let’s just stop the service worker and clear the storage.

这似乎是精力充沛JavaScript服务工作者的结果。 它已缓存页面供脱机使用。 但是这个结论需要更多的研究。 同时，让我们停止服务人员并清除存储。

If you are on Chrome, Developer Tools can be accessed from menu or by pressing F12. The Application tab on Chrome DevTools has Clear Storage section. Check all entries and finally click on that Clear site data.

如果您使用的是Chrome，则可以通过菜单或按F12来访问开发人员工具 。 Chrome DevTools上的“ 应用程序”标签具有“ 清除存储”部分。 检查所有条目，最后单击“ 清除站点数据” 。

Refresh and boom! Here is our reverse wheel in bright purple. Now it’s time for celebration.

刷新和繁荣！ 这是我们的后轮，亮紫色。 现在该庆祝了。

Note: there must be a better way to do this storage clean up automatically. Would be a pain if we have to stop and clean service worker and storage each time to get the changes online. That’s a topic for more research.

注意 ：必须有更好的方法来自动清理此存储。 如果我们每次必须停止并清理服务人员和存储区以使更改联机，将是一件痛苦的事情。 这是更多研究的主题。

阶段4：Travis CI的荣誉徽章 (Stage 4: Badge of honor from Travis CI)

There is one final task in front of us. That is to get a shiny Travis CI build status badge over to our repository’s README.md file.

我们面前还有最后一项任务。 那就是将一个闪亮的Travis CI构建状态README.md移到我们存储库的README.md文件中。

Open up Travis CI and click on the build:passing badge. It’ll show a dialog with options to port the image. Leave the branch as master. Select Markdown instead of Image URL. Copy the text you are given.

打开Travis CI，然后单击build：pass徽章。 它将显示一个对话框，其中包含用于移植图像的选项。 将分支保留为主 。 选择Markdown而不是Image URL 。 复制给出的文本。

Paste it into the README.old.md, which was left to us by create-react-app previously. Write your own content.

将其粘贴到README.old.md ，该文件先前由create-react-app留给了我们。 编写您自己的内容。

You can delete the default README.md from the repository and rename the README.old.md to README.md.

您可以从存储库中删除默认的README.md并将README.old.md重命名为README.md 。

Add the changes to Git staging, commit and push to the cloud. Now the repository should show the batch you always wanted. Here is the URL shown for our pet project.

将更改添加到Git暂存，提交并推送到云。 现在，存储库应显示您一直想要的批次。 这是我们的宠物项目显示的URL。

https://travis-ci.org/pineboat/react-continuous-deployment.svg?branch=master

You can add that url to the README.md at the top. Here is the image:

您可以将该网址添加到顶部的README.md中。 这是图像：

I’d like to leave you with a question. If you are working in a large teams using similar workflow, what are the challenges you face and how would you solve them? Write a comment and let me know.

我想问你一个问题。 如果您使用类似的工作流程在大型团队中工作，那么您将面临哪些挑战以及如何解决这些挑战？ 发表评论，让我知道。

Thank you so much for reading. I hope you found it useful.

非常感谢您的阅读。 希望你觉得它有用。

This was originally published at pineboat.in.

这最初发布于pineboat.in 。

Clapping shows how much you appreciated this article.

鼓掌表明您对本文的赞赏。

翻译自: https://www.freecodecamp.org/news/how-to-wire-travis-ci-to-do-the-heavy-lifting-in-your-workflow-72693c855696/

travis ci