前言

在我们日常的程序员养成过程中,会产生一些产物,自己做的一些小网站,小页面之类,一般都是在本地调试访问,一旦我们想让其他朋友也可以随时访问,就需要单独在公有云上买一个服务器去部署,一是需要付费,二是我们调试页面访问量不多,单独搞个服务器部署有点浪费。这样看来,使用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,这样后续就可以直接通过这个地址访问到项目了。
在这里插入图片描述
接下来使用打开刚刚创建好的项目,拿到仓库的地址,在电脑本地使用Git将项目Clone本地,这里是使用的Visual Studio Code中的的Git克隆功能,需要先配置好你的Git环境和账号,之后在本地进行项目的修改和提交。
在这里插入图片描述

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

启用之前需要在项目中添加.gitlab-ci.yml文件,来配置项目的所在位置目录,在项目设置的CI/CD中编辑器下添加对应脚本代码,根据项目类型不同,添加的脚本也不同,主要是设置编译方式和输出目录,可以点击浏览模板查找对应示例。
在这里插入图片描述
纯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

3.部署成功之后访问项目

在添加.gitlab-ci.yml文件之后,GitLab识别之后会依据脚本自动执行,在每次更新项目时都会重新执行脚本,在流水线下可以查看详细部署情况,部署成功之后,就可以通过我们设置的项目路径:[注册账户名].gitlab.io来进行访问了。


总结

以上就是使用GitLab Pages托管静态网站的全部内容了,本文仅仅简单介绍了GitLab Pages的使用,对于在过程中使用到的Git相关的操作没有做过多讲解,不了解Git使用方法的同学可以查找Git使用相关教程进行学习。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐