gitlab部署静态界面 gitlab部署网站

转载

架构思维大师 2024-03-28 11:43:02

文章标签 gitlab部署静态界面运维 devops git ci 文章分类 运维

文章目录

前言
一、GitLab Pages是什么？
二、使用步骤

1.开通账号，创建Git仓库同步项目
2.添加.gitlab-ci.yml文件，开启GitLab Pages
3.部署成功之后访问项目

总结

前言

在我们日常的程序员养成过程中，会产生一些产物，自己做的一些小网站，小页面之类，一般都是在本地调试访问，一旦我们想让其他朋友也可以随时访问，就需要单独在公有云上买一个服务器去部署，一是需要付费，二是我们调试页面访问量不多，单独搞个服务器部署有点浪费。这样看来，使用Git网站的Pages服务进行静态网页托管就是一个不错的选择。

一、GitLab Pages是什么？

使用 GitLab Pages，可以直接从 GitLab 的存储库中发布静态网站。

用于任何个人或商业网站。
使用任何静态站点生成器 (SSG) 或纯 HTML。
为您的项目、组或用户帐户创建网站。
在您自己的 GitLab 实例或 GitLab.com 上免费托管您的网站。
连接您的自定义域和 TLS 证书。
将任何许可归于您的内容。
Pages 支持的 SSG 示例

要使用 Pages 发布网站，您可以使用任何静态网站生成器，例如 Gatsby、Jekyll、Hugo、Middleman、Harp、Hexo 或 Brunch。您还可以发布任何直接用纯 HTML、CSS 和 JavaScript 编写的网站。
Pages 不支持动态服务器端处理，例如，根据.php需要.asp。与动态网站相比，了解更多关于静态网站的信息。

二、使用步骤

1.开通账号，创建Git仓库同步项目

首先注册一个GitLab账号，登录首页之后新建项目，项目标识串可以命名为：[注册账户名].gitlab.io，这样后续就可以直接通过这个地址访问到项目了。

gitlab部署静态界面 gitlab部署网站_devops

接下来使用打开刚刚创建好的项目，拿到仓库的地址，在电脑本地使用Git将项目Clone本地，这里是使用的Visual Studio Code中的的Git克隆功能，需要先配置好你的Git环境和账号，之后在本地进行项目的修改和提交。

gitlab部署静态界面 gitlab部署网站_devops_02

2.添加.gitlab-ci.yml文件，开启GitLab Pages

启用之前需要在项目中添加.gitlab-ci.yml文件，来配置项目的所在位置目录，在项目设置的CI/CD中编辑器下添加对应脚本代码，根据项目类型不同，添加的脚本也不同，主要是设置编译方式和输出目录，可以点击浏览模板查找对应示例。

gitlab部署静态界面 gitlab部署网站_git_03

纯html项目的脚本示例：

pages:
  stage: deploy
  script:
    - mkdir .public
    - cp -r ./* .public
    - rm -rf public
    - mv .public public
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH