首先,Gitlab pages是很简单的,至少比起github pages要简单很多。

  Gitlab Pages的原理这是样的:首先,当你新建一个Gitlab项目的时候,你同时也建了一个存储库。

  只要你的工程目录的根目录下有.gitlab-ci.yml文件,注意必须严格起这个名字。gitlab runner就会执行这个脚本文件。

  脚本的最终目的很简单:把静态文件放入名为public目录下的文件夹内。Gitlab pages会一直去这个存储库的public目录找。注意:这个public是指存储库的public,与项目结构无关。换言之,这个public目录不可见。

  也就是说:当你在项目的根目录下添加了.gitlab-ci.yml,且在脚本中将静态文件正确地放入了public文件夹,gitlab page就会自动打开并部署,部署的域名将会默认分配。

  当然,如果你不想使用默认的配置,而是想部署到特定的域名和服务器,则需要在yml文件中进行一些docker的配置。

  开发者提交代码后,runner检索项目根目录下名为.gitlab-ci.yml的文件,并执行文件中的脚本,脚本内容包括项目的运行,打包,缓存打包文件,转移文件到public目录以供gitlab pages使用。而gitlab pages会到public目录中解析静态文件成页面。

  好,现在就来看一下我写的一份CI脚本,首先说一下,CI的代码风格类似于python这种,纯靠缩进来区分层级关系的,所以书写时,缩进是严格的

  

  下面是代码注释版版的:

  

building: //自己随便命名的
image: node:latest //node镜像为最新版的,最好指定版本号
stage: build //当前stage阶段为build
script: //build阶段运行的脚本
- npm install --progress=false --no-optional //根据package.json来安装依赖 progress设为false是为了不打印安装的具体进度,no optional是为了跳过npm推荐的但不是编译必须的,也没有写在package.json里一些依赖,比如说查看源代码等
- npm run build //打包
artifacts: //工件,可以缓存在gitlab的流水线记录中,供直接下载
expire_in: 3 days //工件缓存的有效时间
paths: //路径
- dist //工件指向的目录,这里指整个dist目录 cache: //缓存
paths: //路径
- node_modules/ //缓存node_mudules将大大提高ci运行的速度 pages: //随便起的名字
stage: deploy //当前阶段为deploy
script: //deploy阶段运行的命令
- rm -rf public/* //linux命令,递归无询问删除public目录下所有文件- mv dist/* public //将dist目录下的所有文件都移动到public目录下
artifacts: //工件缓存
expire_in: 3 days //时效为3天
paths: //路径
- public //缓存整个public目录的文件
only:
- dev //ceate pages下的所有操作只在dev分支上进行

  下载一个工件下来看看:

  

  可以发现我所言非虚。这时候我们把这个提交推到远程。

  等待这个流水线跑完,在 项目 --> 设置 --> pages 中,可以看到线上页面已经生成了。

  

手撸GitLab CI(阉割版)的更多相关文章

  1. C#基于Mongo的官方驱动手撸一个Super简易版MongoDB-ORM框架

    C#基于Mongo的官方驱动手撸一个简易版MongoDB-ORM框架 如题,在GitHub上找了一圈想找一个MongoDB的的ORM框架,未偿所愿,就去翻了翻官网(https://docs.mongo ...

  2. 第二篇-用Flutter手撸一个抖音国内版,看看有多炫

    前言 继上一篇使用Flutter开发的抖音国际版 后再次撸一个国内版抖音,大部分功能已完成,主要是Flutter开发APP速度很爽,  先看下图 项目主要结构介绍 这次主要的改动在api.dart 及 ...

  3. php手撸轻量级开发(一)

    聊聊本文内容 之前讲过php简单的内容,但是原生永远是不够看的,这次用框架做一些功能性的事情. 但是公司用自己的框架不能拿出来,用了用一些流行的框架比如tp,larveral之类的感觉太重,CI也不顺 ...

  4. .NET手撸2048小游戏

    .NET手撸2048小游戏 2048是一款益智小游戏,得益于其规则简单,又和2的倍数有关,因此广为人知,特别是广受程序员的喜爱. 本文将再次使用我自制的"准游戏引擎"FlysEng ...

  5. GitLab CI持续集成配置方案

    目录 1. 持续集成介绍 1.1 概念 1.2 持续集成的好处 2. GitLab持续集成(CI) 2.1 简介 2.2 GitLab简单原理图 2.3 GitLab持续集成所需环境 2.4 需要了解 ...

  6. GitLab CI

    GitLab CI持续集成配置方案   目录 1. 持续集成介绍 1.1 概念 1.2 持续集成的好处 2. GitLab持续集成(CI) 2.1 简介 2.2 GitLab简单原理图 2.3 Git ...

  7. GitLab CI/CD的官译【原】

    CI / CD方法简介 软件开发的持续集成基于自动执行脚本,以最大限度地减少在开发应用程序时引入错误的可能性.从新代码的开发到部署,它们需要较少的人为干预甚至根本不需要干预. 它涉及在每次小迭代中不断 ...

  8. 基于GitLab CI搭建Golang自动构建环境

    基于GitLab CI搭建Golang自动构建环境 Golang发布遇到的问题 对于golang的发布,之前一直没有一套规范的发布流程,来看看之前发布流程: 方案一 开发者本地环境需要将环境变量文件改 ...

  9. 纯手撸web框架

    纯手撸web框架 一.Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返 ...

随机推荐

  1. .net core使用Apollo做统一配置管理

    做开发这么多年,经常因配置的问题引发生产环境的bug.有些年久的项目,几百个密密麻麻的配置项,经常容易搞混,有时好几个项目有好多同样的配置项,配置工作也不厌其烦.所幸,携程开源了新一代配置中心 - A ...

  2. BZOJ_3132_上帝造题的七分钟_树状数组

    BZOJ_3132_上帝造题的七分钟_树状数组 Description “第一分钟,X说,要有矩阵,于是便有了一个里面写满了0的n×m矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为(a,b), ...

  3. 【Canal源码分析】Canal Instance启动和停止

    一.序列图 1.1 启动 1.2 停止 二.源码分析 2.1 启动 这部分代码其实在ServerRunningMonitor的start()方法中.针对不同的destination,启动不同的Cana ...

  4. Twitter分布式自增ID算法snowflake原理解析

    以JAVA为例 Twitter分布式自增ID算法snowflake,生成的是Long类型的id,一个Long类型占8个字节,每个字节占8比特,也就是说一个Long类型占64个比特(0和1). 那么一个 ...

  5. mysql中利用group by过滤删除重复行

    DELETEFROM peopleWHERE peopleId IN (SELECT peopleId FROM people GROUP BY peopleId HAVING count(peopl ...

  6. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  7. 玩转PHP中的正则表达式

    玩转PHP中的正则表达式 检验用户输入.解析用户输入和文件内容,以及重新格式化字符串 级别: 中级 正则表达式提供了一种处理文本的强大方法.使用正则表达式,您可以对用户输入进行复杂的检验.解析用户输入 ...

  8. Jmeter利用正则表达式提取器提取登录cookie供下一步使用

    最近在学Jmeter,遇到需要登录之后才能进行下一步操作的场景,网上查了各位大神的资料,东拼西凑总算是做好满足需求了,写一下经过和步骤吧. 一.正常调用 按正常流程添加线程组.HTTP请求(登录和添加 ...

  9. Android开发:文本控件详解——EditText(一)基本属性

    一.简单实例: EditText输入的文字样式部分的属性,基本都是和TextView中的属性一样. 除此之外,EditText还有自己独有的属性. 二.基本属性: hint  输入框显示的提示文本  ...

  10. Vue.js-10:第十章 - 组件间的数据通信

    一.前言 在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data.prop 选项.在之前的学习中有提到过,组件是 Vue 中的一个非常重要的概念,我们 ...