专栏首页一个爱瞎折腾的程序猿使用travis-ci自动部署github上的项目

使用travis-ci自动部署github上的项目

travis-ci是什么?

一个使用yaml格式配置用于持续集成完成自动化测试部署的开源项目 官网:https://travis-ci.org/

使用travis-ci集成vue.js项目

首先,您需要一个github账号 and 一个vue.js项目~ 没有的话试试这个啊metools

1. 登录Github并拥有一个项目

登录github 然后Star,Fork metools 当然可以先去看看这个项目是啥..http://tools.yimo.link/

2. 前往travis-ci官网

使用Github账号登录

3. 登录成功回到用户中心

默认会同步一部分仓库,如果太多的话需要点击Sync account进行同步

4. 开启对 metools 项目的集成并进入设置页面

如下图所示,根据需要配置构建信息 添加github的Token到环境变量中,用户名,邮箱也可添加进去,这样配置文件中就可以使用了 生成Token见步骤5.注意:配置私密的环境变量时一定要加密,因为会显示在日志中且能够被他人看到

根据步骤6的配置,还需要添加一些环境变量使起更方便(地址别填错了)

图中配置依次为:

  1. GH_REF:仓库地址
  2. GH_TOKEN:生成的令牌
  3. P_BRANCH:推送的pages分支 //这里填的时候一定要注意,一般来讲就是 gh-pages 。别手抖写个master。血淋淋的教训~
  4. U_EMAIL:邮箱
  5. U_NAME:名称

5. Github生成访问令牌 (即添加授权)

访问令牌的作用就是授权仓库操作权限 https://github.com/settings/tokens Github>settings>Personal access tokens> Generate new token > Generate token> Copy Token

6. .travis.yml 文件的简单配置

.travis.yml文件的作用就是在代码提交的时候travis-ci会根据该配置文件执行配置的任务 在项目根目录中创建(或修改).travis.yml 文件,其中${环境变量}为环境变量在travis中配置即可

language: node_js
# nodejs版本
node_js: 
    - '6'

# Travis-CI Caching
cache:
  directories:
    - node_modules


# S: Build Lifecycle
install:
  - npm install

before_script:

# 无其他依赖项所以执行npm run build 构建就行了
script:
  - npm run build

after_script:
  - cd ./dist
  - git init
  - git config user.name "${U_NAME}"
  - git config user.email "${U_EMAIL}"
  - git add .
  - git commit -m "Update tools"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}
# E: Build LifeCycle

#指定分支,只有指定的分支提交时才会运行脚本
branches:
  only:
    - master
env:
 global:
   # 我将其添加到了travis-ci的环境变量中
   #- GH_REF: github.com/yimogit/metools.git 

7. 自动构建项目

修改完成,并推送到github后,就可以在travis-ci.org中看到项目开始构建了(以后每次推送代码到仓库后都将会自动构建项目)

构建完成日志

构建完成。在设置中可以看到默认已经将gh-pages分支部署到pages,访问https://用户名.github.io/metools/即可预览效果。

若构建失败,可以通过travis-ci中项目面板右上角的 Restart build 重新构建

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 三行脚本让 asp.net core 附加进程调试不再头痛

    在将项目升级到 asp.net core 2.2 后,很少使用 IIS Express 运行项目了,基本都是控制台运行或者写个脚本批量启动要运行的接口(多个输出...

    易墨
  • 一个简单的时间轴demo

    易墨
  • 在 ASP.NET Core 中使用 MySql 踩坑记录

    遇到的是在使用 CodeFirst 生成数据库的字符集编码问题 执行迁移命令:Add-Migration 版本 , Update-Database 生成数据库...

    易墨
  • Git合并不同url的项目

    摘要:为了让项目能实现Git+Gerrit+Jenkin的持续集成,我们把项目从Git上迁移到了Gerrit上,发现有的同事在老Git提交代码,因为Gerrit...

    机智的程序员小熊
  • 【学术】在C ++中使用TensorFlow训练深度神经网络

    你可能知道TensorFlow的核心是用C++构建的,然而只有python的API才能获得多种便利。 当我写上一篇文章时,目标是仅使用TensorFlow的C ...

    AiTechYun
  • swift将framework上传到Cocoapods

    .podspec文件的作用是为了让CocoaPods搜索引擎知道该代码的作者、版本号、概要、描述、源代码地址、部署版本、依赖的框架等描述信息。

    用户6094182
  • 作为TensorFlow的底层语言,你会用C++构建深度神经网络吗?

    机器之心
  • 技术角度聊聊刚才官宣这个事

    重庆喝茶呢,朋友圈又刷到这个消息,娱乐热点,成功转变为技术热点,这说明微博影响力巨大,对微博来说是好事。

    赵成
  • ElasticSearch权威指南:深入搜索(上)

    在 基础入门 中涵盖了基本工具并对它们有足够详细的描述,这让我们能够开始用 Elasticsearch 搜索数据。 用不了多长时间,就会发现我们想要的更多:希望...

    HLee
  • 【H5 音乐播放实例】第六节 其他

    剽悍一小兔

扫码关注云+社区

领取腾讯云代金券