一、引言

嘿，朋友们！在当今数字化的时代，拥有一个属于自己的静态网站是一件超酷的事儿。它可以用来展示个人作品、分享技术经验，甚至是运营小型的商业项目。而Gitlab Pages 就是一个强大的工具，能帮助我们轻松地搭建和发布静态网站。接下来，我就带着大家一步一步地从配置到发布，完成一个静态网站的搭建。

二、Gitlab Pages 简介

Gitlab Pages 是 GitLab 提供的一个免费的静态网站托管服务。它允许我们将静态网站直接部署到 GitLab 平台上，而且还能通过自定义的域名来访问。简单来说，只要你有一个 GitLab 账号，就可以利用它来搭建属于自己的网站啦。

三、Gitlab Pages 的应用场景

1. 个人博客

很多开发者都喜欢用静态网站来搭建个人博客，分享自己的技术见解、学习心得。通过 Gitlab Pages，我们可以轻松地把自己的博客部署到网上，让更多的人能够看到。

2. 项目文档

如果你正在开发一个开源项目，那么一个清晰、易访问的项目文档是必不可少的。使用 Gitlab Pages 可以快速搭建项目文档网站，方便其他开发者查看和使用。

3. 产品展示

对于一些小型的创业公司或者个人开发者来说，展示自己的产品是很重要的。通过静态网站，可以直观地展示产品的特点、功能和优势。

四、Gitlab Pages 的技术优缺点

优点

  • 免费使用：GitLab 为用户提供了免费的静态网站托管服务，对于个人开发者和小型团队来说，这是一个非常友好的福利。
  • 集成性强：Gitlab Pages 与 GitLab 的版本控制系统无缝集成，我们可以通过 Git 来管理网站的代码，方便进行版本控制和团队协作。
  • 自定义域名：支持自定义域名，我们可以使用自己的域名来访问网站，提升网站的专业性。

缺点

  • 仅支持静态网站：Gitlab Pages 只能托管静态网站，如果你需要搭建一个动态网站，比如需要数据库交互的网站，那么它就不太适合了。
  • 性能依赖网络：网站的性能可能会受到 GitLab 服务器网络的影响，如果服务器网络不稳定，可能会导致网站访问速度变慢。

五、准备工作

1. 注册 GitLab 账号

首先，我们需要在 GitLab 上注册一个账号。注册过程非常简单，只需要提供一些基本信息，如用户名、邮箱和密码，然后按照提示完成注册即可。

2. 安装 Git

Git 是一个分布式版本控制系统，我们需要使用它来管理网站的代码。你可以从 Git 官方网站 下载并安装适合你操作系统的版本。

3. 选择技术栈

这里我们选择使用 HTML、CSS 和 JavaScript 作为示例技术栈。这是最基础也是最常用的前端技术栈，适合初学者。

六、创建静态网站项目

1. 创建项目目录

打开命令行工具，创建一个新的项目目录，例如：

mkdir my-static-website  # 创建项目目录
cd my-static-website    # 进入项目目录

2. 初始化 Git 仓库

在项目目录下初始化 Git 仓库：

git init  # 初始化 Git 仓库

3. 创建 HTML 文件

使用文本编辑器创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        main {
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to My Static Website</h1>
    </header>
    <main>
        <p>This is a simple static website created using HTML, CSS and JavaScript.</p>
    </main>
</body>
</html>

这段代码创建了一个简单的 HTML 页面，包含一个标题和一段正文内容。同时，使用 CSS 对页面进行了简单的样式设置。

4. 添加文件到 Git 仓库

将 index.html 文件添加到 Git 仓库，并进行提交：

git add index.html  # 添加文件到暂存区
git commit -m "Initial commit"  # 提交到本地仓库

七、配置 Gitlab Pages

1. 创建 GitLab 项目

登录 GitLab 账号，点击右上角的“New project”按钮，填写项目名称，选择公开或私有项目，然后点击“Create project”创建项目。

2. 将本地项目推送到 GitLab

在命令行中，将本地项目与 GitLab 项目关联，并推送到远程仓库：

git remote add origin <your-gitlab-repo-url>  # 关联远程仓库
git push -u origin master  # 推送本地仓库到远程仓库

注意：<your-gitlab-repo-url> 需要替换为你在 GitLab 上创建的项目的仓库地址。

3. 创建 .gitlab-ci.yml 文件

在项目根目录下创建一个名为 .gitlab-ci.yml 的文件，这是 GitLab CI/CD 的配置文件，用于自动部署网站。添加以下内容：

pages:
  stage: deploy
  script:
    - mkdir .public
    - cp -r * .public
    - mv .public public
  artifacts:
    paths:
      - public
  only:
    - master

这段代码的作用是在每次将代码推送到 master 分支时，自动将项目中的所有文件复制到 public 目录下，并将其作为网站的根目录进行部署。

4. 提交并推送 .gitlab-ci.yml 文件

将 .gitlab-ci.yml 文件添加到 Git 仓库，并推送到远程仓库：

git add .gitlab-ci.yml  # 添加文件到暂存区
git commit -m "Add GitLab CI/CD configuration"  # 提交到本地仓库
git push origin master  # 推送本地仓库到远程仓库

八、发布静态网站

当我们将 .gitlab-ci.yml 文件推送到远程仓库后，GitLab 会自动触发 CI/CD 流程。我们可以在 GitLab 项目的“CI/CD > Pipelines”页面查看部署的状态。

当部署成功后，我们可以在项目的“Settings > Pages”页面找到网站的访问地址。点击链接，就可以访问我们刚刚搭建的静态网站啦！

九、注意事项

1. 路径问题

在编写 HTML、CSS 和 JavaScript 文件时，要注意文件路径的问题。因为网站是部署在 public 目录下的，所以所有的相对路径都要以 public 目录为基准。

2. 域名配置

如果需要使用自定义域名，需要在 GitLab 项目的“Settings > Pages”页面进行配置。同时，还需要在域名注册商处配置 DNS 解析，将域名指向 GitLab 的服务器。

3. 安全问题

虽然静态网站相对安全，但也要注意保护网站的代码和数据。建议设置合适的仓库权限，避免敏感信息泄露。

十、文章总结

通过以上的步骤，我们成功地使用 Gitlab Pages 搭建并发布了一个静态网站。Gitlab Pages 为我们提供了一个简单、免费的静态网站托管方案，非常适合个人开发者和小型团队。在使用过程中，我们只需要注意路径问题、域名配置和安全问题，就可以轻松地管理和维护自己的网站。

当然，如果你想进一步提升网站的功能和性能，还可以结合其他技术，如前端框架（React、Vue 等）、静态网站生成器（Jekyll、Hugo 等）来进行开发。希望这篇文章能帮助你快速上手 Gitlab Pages，搭建出属于自己的精彩静态网站！