一、引言

嘿，各位开发者朋友们！今天咱就来聊聊怎么用 Gitlab Pages 搭建静态网站。不管你是刚入门的新手，还是经验丰富的老鸟，都能跟着这篇文章，从啥都不懂到把网站部署上线。静态网站就是那种内容比较固定，不需要实时更新数据库的网站，像个人博客、产品展示页啥的，用 Gitlab Pages 来搭建再合适不过啦。

二、前期准备

1. 注册 Gitlab 账号

首先，你得去 Gitlab 的官网（https://gitlab.com）注册一个账号。就跟注册其他网站账号一样，填填邮箱、用户名、密码啥的，按照提示操作就行。注册好之后登录进去，你就有自己的“地盘”啦。

2. 安装 Git

Git 是个版本控制工具，咱得用它来管理代码。如果你用的是 Windows 系统，可以去 Git 的官网（https://git-scm.com/downloads）下载安装包，然后一路下一步就行。要是用的 Linux 系统，在终端里输入相应的命令就能安装，比如在 Ubuntu 里输入 sudo apt-get install git。

3. 了解基本的 HTML、CSS 和 JavaScript 知识

虽然咱搭建的是静态网站，但多少得懂点基础的前端知识。HTML 就像是网站的骨架，用来构建页面的结构；CSS 是给网站穿衣服，让它变得好看；JavaScript 能让网站动起来，实现一些交互效果。

举个简单的 HTML 示例（HTML 技术栈）：

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="en"> <!-- 定义 HTML 文档，语言为英语 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置页面的视口 -->
    <title>My First Static Website</title> <!-- 设置页面标题 -->
</head>
<body>
    <h1>Hello, World!</h1> <!-- 显示一级标题 -->
    <p>This is my first static website.</p> <!-- 显示段落内容 -->
</body>
</html>

三、创建静态网站项目

1. 在 Gitlab 上创建项目

登录 Gitlab 后，点击右上角的“+”号，选择“New project”。在创建项目的页面，填好项目名称、描述啥的，然后选择项目的可见性，一般选“Public”就行，这样大家都能看到你的网站。最后点击“Create project”，项目就创建好啦。

2. 本地初始化项目

打开终端，进入你想存放项目的文件夹，然后输入以下命令来初始化 Git 仓库：

git init  # 初始化一个新的 Git 仓库

接着把之前创建的 HTML 文件复制到这个文件夹里。

3. 添加并提交代码

在终端里输入以下命令，把文件添加到 Git 仓库并提交：

git add .  # 将当前目录下的所有文件添加到暂存区
git commit -m "Initial commit"  # 提交暂存区的文件到本地仓库，并添加提交信息

4. 关联远程仓库

在 Gitlab 项目页面，找到“Clone”按钮，复制项目的 URL。然后在终端里输入以下命令，把本地仓库和远程仓库关联起来：

git remote add origin <项目 URL>  # 将本地仓库与远程仓库关联

再把本地代码推送到远程仓库：

git push -u origin master  # 将本地仓库的代码推送到远程仓库的 master 分支

四、配置 Gitlab Pages

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

在项目的根目录下创建一个名为 .gitlab-ci.yml 的文件，这个文件是用来配置 Gitlab CI/CD 流水线的。以下是一个简单的配置示例（YAML 技术栈）：

image: alpine:latest  # 使用 alpine 镜像作为基础环境

pages:
  stage: deploy  # 定义部署阶段
  script:
    - mkdir .public  # 创建一个名为 .public 的目录
    - cp -r * .public  # 将当前目录下的所有文件复制到 .public 目录
    - mv .public public  # 将 .public 目录重命名为 public
  artifacts:
    paths:
      - public  # 指定要部署的文件路径
  only:
    - master  # 只在 master 分支触发部署

这个配置文件的意思是，当你把代码推送到 master 分支时，Gitlab 会自动执行这些脚本，把项目文件复制到 public 目录，然后部署到 Gitlab Pages 上。

2. 提交 .gitlab-ci.yml 文件

在终端里输入以下命令，把 .gitlab-ci.yml 文件添加到 Git 仓库并提交：

git add .gitlab-ci.yml  # 将 .gitlab-ci.yml 文件添加到暂存区
git commit -m "Add .gitlab-ci.yml"  # 提交暂存区的文件到本地仓库，并添加提交信息
git push origin master  # 将本地仓库的代码推送到远程仓库的 master 分支

五、部署上线

1. 查看流水线状态

提交代码后，回到 Gitlab 项目页面，点击左侧的“CI/CD” -> “Pipelines”，就能看到流水线的运行状态。如果一切正常，流水线会显示为绿色的“passed”。

2. 访问网站

当流水线运行成功后，点击左侧的“Settings” -> “Pages”，在“Your site is published at”下面就能看到网站的访问地址。点击这个地址，就能看到你搭建的静态网站啦。

六、应用场景

1. 个人博客

很多开发者喜欢用静态网站来搭建个人博客，分享自己的技术经验、生活感悟啥的。用 Gitlab Pages 搭建的博客，不仅免费，还能利用 Git 来管理文章的版本，方便又实用。

2. 产品展示页

企业可以用静态网站来展示自己的产品，介绍产品的特点、功能、优势等。静态网站加载速度快，能给用户带来更好的浏览体验。

3. 开源项目文档

对于开源项目来说，文档是非常重要的。用 Gitlab Pages 搭建静态文档网站，能让用户更方便地查看项目的使用说明、API 文档等。

七、技术优缺点

优点

  • 免费：Gitlab Pages 是免费的，不需要你花一分钱就能搭建和部署静态网站。
  • 简单易用：只要你懂点基础的前端知识和 Git 操作，就能轻松搭建和部署网站。
  • 集成度高：Gitlab 本身就是一个强大的代码管理平台，和 Gitlab Pages 无缝集成，能让你更方便地管理代码和部署网站。

缺点

  • 功能有限：静态网站的功能相对有限，不能实现复杂的动态交互和数据库操作。
  • 依赖网络：网站的访问依赖网络，如果网络不好，可能会影响用户的浏览体验。

八、注意事项

1. 代码规范

在编写代码时，要遵循一定的规范，这样不仅能提高代码的可读性，还能避免一些潜在的问题。比如，HTML 标签要正确嵌套，CSS 代码要合理布局。

2. 版本控制

使用 Git 进行版本控制时，要养成良好的习惯，及时提交代码并添加详细的提交信息。这样在出现问题时，你可以方便地回滚到之前的版本。

3. 安全问题

虽然静态网站相对安全，但也要注意一些安全问题，比如防止 XSS 攻击、SQL 注入等。在处理用户输入时，要进行严格的验证和过滤。

九、文章总结

通过这篇文章，我们从注册 Gitlab 账号开始，一步步地完成了静态网站的搭建和部署。首先，我们做了前期准备，包括注册账号、安装 Git 和了解前端知识；然后创建了静态网站项目，并将代码推送到 Gitlab 仓库；接着配置了 Gitlab Pages，通过 .gitlab-ci.yml 文件实现了自动化部署；最后成功将网站部署上线。

Gitlab Pages 是一个非常实用的工具，适合各种类型的静态网站搭建。它简单易用、免费且集成度高，但也有一些功能上的限制。在使用过程中，我们要注意代码规范、版本控制和安全问题。希望这篇文章能帮助你顺利搭建自己的静态网站。