使用GitLab Pages托管静态网站

---

前言

在我们日常的程序员养成过程中，会产生一些产物，自己做的一些小网站，小页面之类，一般都是在本地调试访问，一旦我们想让其他朋友也可以随时访问，就需要单独在公有云上买一个服务器去部署，一是需要付费，二是我们调试页面访问量不多，单独搞个服务器部署有点浪费。这样看来，使用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使用相关教程进行学习。