极狐 GitLab 静态网站部署完整流程

人工智能 2026-06-29 17:24:08

第一步：登录极狐 GitLab

打开浏览器，访问 极狐 GitLab：https://gitlab.cn/
点击右上角 “登录”，输入账号和密码完成登录。

第二步：创建新项目

点击页面左上角的 “+” 号，选择 “新建项目”。
选择 “创建空白项目”。
填写项目信息：
- 项目名称：输入项目名，例如 my-website
- 项目URL：选择你的个人或群组命名空间
- 可见性级别：选择 “公开”（否则网站无法被外界访问）
取消勾选 “使用 README 初始化仓库”
点击 “新建项目”

第三步：上传网站文件到仓库

进入新创建的项目页面
点击 “Web IDE” 按钮（或通过 Git 命令行推送）
在 Web IDE 中，点击 “上传” 图标，将你本地的所有网站文件（index.html、about.html、css/、js/、images/ 等）上传到项目根目录
点击左下角的 “提交”，填写提交信息（如“添加网站文件”），提交到 main 分支

第四步：在 CI/CD 配置中编辑 `.gitlab-ci.yml`

在项目左侧菜单，点击 “构建” > “CI/CD 配置”
页面会显示一个编辑器，里面可能已有默认模板内容
删除编辑器里的所有内容，完整复制粘贴下面的脚本：

yaml

pages:
  stage: deploy
  script:
    # 1. 创建目标目录
    - mkdir -p public
    
    # 2. 查找所有 HTML 文件并复制，保留目录结构
    - find . -name "*.html" -not -path "./public/*" -exec cp --parents {} public/ \;
    
    # 3. 查找所有 CSS 文件并复制，保留目录结构
    - find . -name "*.css" -not -path "./public/*" -exec cp --parents {} public/ \;
    
    # 4. 查找所有 JS 文件并复制，保留目录结构
    - find . -name "*.js" -not -path "./public/*" -exec cp --parents {} public/ \;
    
    # 5. 查找图片文件并复制（包含常见图片格式）
    - find . \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.gif" -o -name "*.svg" -o -name "*.ico" \) -not -path "./public/*" -exec cp --parents {} public/ \;
    
    # 6. 查找字体文件并复制（包含常见字体格式）
    - find . \( -name "*.woff" -o -name "*.woff2" -o -name "*.ttf" -o -name "*.eot" -o -name "*.otf" \) -not -path "./public/*" -exec cp --parents {} public/ \;
    
    # 7. 查找其他常见前端资源文件并复制
    - find . \( -name "*.json" -o -name "*.xml" -o -name "*.webp" -o -name "*.pdf" \) -not -path "./public/*" -exec cp --parents {} public/ \;
    
  artifacts:
    paths:
      - public
  only:
    - main

点击页面底部的 “提交变更” 或 “保存” 按钮
在弹窗中填写提交信息（如“添加 Pages 部署配置”），确认提交到 main 分支

第五步：触发并查看流水线运行

提交配置后，GitLab 会自动触发 CI/CD 流水线：

在项目左侧菜单点击 “构建” > “流水线”
你会看到一条新的流水线正在运行，状态为“运行中”
等待约 1-3 分钟，状态变为 “已通过”（绿色勾号表示成功）
如果状态变为“失败”，点击该流水线查看具体报错日志

第六步：查看网站地址

回到项目首页（点击左侧菜单的“项目”或左上角项目名称）
在页面左上角，项目名称的下方或旁边，你会看到一个 “GitLab Pages” 的链接标识
点击该链接，即可访问你部署的静态网站
备用路径：如果左上角没有显示，点击左侧菜单 “部署” > “Pages”，同样可以找到网站地址

网站地址的格式通常是：

个人项目：https://用户名.gitlab.io/项目名/
群组项目：https://群组名.gitlab.io/项目名/

📋 流程速查表

步骤	操作位置	关键动作
1	`gitlab.cn`	登录极狐 GitLab
2	首页 → “+” → 新建项目	创建空白公开项目
3	Web IDE	上传所有网站文件到根目录
4	构建 > CI/CD 配置	删除默认内容，粘贴完整 `pages` 脚本，提交
5	构建 > 流水线	等待流水线状态变为“已通过”
6	项目首页左上角	点击 “GitLab Pages” 链接访问网站

⚠️ 常见问题排查

问题	可能原因	解决办法
流水线失败	`pages` 脚本缩进错误	确保 YAML 缩进正确（2个空格）
网站 404	根目录没有 `index.html`	确认 `index.html` 已上传
页面无样式	CSS 路径不含项目名	用 `./css/style.css` 或绝对路径加项目名
左上角无 Pages 链接	流水线未完成或失败	先去“流水线”确认状态
访问网站显示 403	项目为私有且未开放 Pages	改为公开项目或在设置中开放 Pages