Create a GitLab Pages website from scratch

Create a GitLab Pages website from scratch

本教程向您展示如何从头开始创建 Pages 站点. 您将从一个空白项目开始，并创建自己的 CI 文件，该文件向提供指导. 当您的 CI / CD 管道运行时，将创建 Pages 站点.

本示例使用静态站点生成器（SSG）. 其他 SSG 遵循类似的步骤. 您无需熟悉 Jekyll 或 SSG 即可完成本教程.

要继续执行本示例，请从 GitLab 中的空白项目开始. 在根（顶级）目录中创建三个文件.

  • .gitlab-ci.yml一个 YAML 文件，其中包含要运行的命令. 现在，将文件内容保留为空白.

  • index.html您可以使用所需的 HTML 内容填充 HTML 文件，例如：

  • Gemfile一个描述 Ruby 程序依赖性的文件. 用以下内容填充它：

    1. source "https://rubygems.org"
    3. gem "jekyll"

Choose a Docker image

In this example, the Runner uses a Docker image to run scripts and deploy the site.

这个特定的 Ruby 映像在上维护 .

编辑您的.gitlab-ci.yml并将此文本添加为​​第一行.

  1. image: ruby:2.7

如果您的 SSG 需要构建 ，则必须指定一个包含 NodeJS 的映像作为其文件系统的一部分. 例如，对于Hexo网站，可以使用image: node:12.17.0 .

Install Jekyll

要在本地运行Jekyll ，您需要打开终端并执行以下操作：

  • 通过运行gem install bundler安装 .
  • 通过运行bundle install创建Gemfile.lock .
  • 通过运行bundle exec jekyll build安装 Jekyll.

在.gitlab-ci.yml文件中，其写为​​：

  1. script:
  2.   - gem install bundler
  3.   - bundle install
  4.   - bundle exec jekyll build
  1. job:
  2.   script:
  3.   - gem install bundler
  4.   - bundle install
  5.   - bundle exec jekyll build

对于 GitLab Pages，此job有一个特定的名称，称为pages . 此设置告诉 Runner 您希望工作通过 GitLab Pages 部署您的网站：

Jekyll 需要知道在何处生成其输出. GitLab Pages 仅考虑名为public的目录中的文件.

Jekyll 使用目标（ -d ）为构建的网站指定输出目录：

  1. pages:
  2.   script:
  3.     - gem install bundler
  4.     - bundle install
  5.     - bundle exec jekyll build -d public

Specify the public directory for artifacts

既然 Jekyll 已将文件输出到public目录，则 Runner 需要知道从何处获取文件. 工件存储在public目录中：

  1. pages:
  2.   script:
  3.     - gem install bundler
  4.     - bundle install
  5.     - bundle exec jekyll build -d public
  6.   artifacts:
  7.     paths:
  8.       - public

将其粘贴到.gitlab-ci.yml文件中，因此现在看起来像这样：

  1. image: ruby:2.7
  3. pages:
  4.   script:
  5.     - gem install bundler
  6.     - bundle install
  7.     - bundle exec jekyll build -d public
  8.   artifacts:
  9.     paths:

现在保存并提交.gitlab-ci.yml文件. 您可以转到CI / CD>管道来观看管道运行.

成功后，请转到“设置”>”页面”以查看您的网站现在可用的 URL.

如果您想执行更多高级任务，则可以使用更新.gitlab-ci.yml文件. 您可以使用GitLab CI / CD Lint Tool来检查 CI 语法.

以下主题显示了可以添加到 CI / CD 文件中的其他选项的其他示例.

Deploy specific branches to a Pages site

您可能只想从特定分支部署到 Pages 站点.

首先，添加workflow部分以强制管道仅在将更改推送到分支时才运行：

  1. image: ruby:2.7
  3. workflow:
  5.     - if: '$CI_COMMIT_BRANCH'
  7. pages:
  8.   script:
  9.     - gem install bundler
  10.     - bundle install
  11.     - bundle exec jekyll build -d public
  12.   artifacts:
  13.     paths:
  14.       - public

然后将管道配置为仅运行 master 分支的作业.

如果要测试脚本并在部署到生产环境之前检查构建的站点，则可以完全按按master来运行测试.

要为您的作业指定一个阶段，请在您的 CI 文件中添加一个stage行：

  1. image: ruby:2.7
  3. workflow:
  4.   rules:
  5.     - if: '$CI_COMMIT_BRANCH'
  7. pages:
  8.   stage: deploy
  9.   script:
  10.     - gem install bundler
  11.     - bundle install
  12.     - bundle exec jekyll build -d public
  13.   artifacts:
  14.     paths:
  15.       - public
  16.   rules:
  17.     - if: '$CI_COMMIT_BRANCH  ==  "master"'

现在，将另一个作业添加到 CI 文件，告诉它测试除 master分支以外的每个分支上的每次推送：

  1. image: ruby:2.7
  3. workflow:
  4.   rules:
  5.     - if: '$CI_COMMIT_BRANCH'
  7. pages:
  8.   stage: deploy
  9.   script:
  10.     - gem install bundler
  11.     - bundle install
  12.     - bundle exec jekyll build -d public
  13.   artifacts:
  14.     paths:
  15.       - public
  16.   rules:
  17.     - if: '$CI_COMMIT_BRANCH  ==  "master"'
  19. test:
  20.   stage: test
  21.   script:
  22.     - gem install bundler
  23.     - bundle install
  24.     - bundle exec jekyll build -d test
  25.   artifacts:
  26.     paths:
  27.       - test
  28.   rules:
  29.     - if: '$CI_COMMIT_BRANCH  !=  "master"'

当test作业在test阶段运行时，Jekyll 在名为test的目录中构建站点. 该工作影响除master之外的所有分支.

将阶段应用于不同的作业时，同一阶段中的每个作业都是并行构建的. 如果您的 Web 应用程序在部署之前需要多个测试，则可以同时运行所有测试.

Remove duplicate commands

为了避免在每个作业中重复相同的脚本，可以将它们添加到before_script部分.

在示例中， gem install bundler和bundle install对于作业， pages和test都在运行.

将这些命令移至部分：

  1. image: ruby:2.7
  3.   rules:
  4.     - if: '$CI_COMMIT_BRANCH'
  6. before_script:
  7.   - gem install bundler
  8.   - bundle install
  10. pages:
  11.   stage: deploy
  12.   script:
  13.     - bundle exec jekyll build -d public
  14.   artifacts:
  15.     paths:
  16.       - public
  17.   rules:
  18.     - if: '$CI_COMMIT_BRANCH  ==  "master"'
  20. test:
  21.   stage: test
  22.   script:
  23.     - bundle exec jekyll build -d test
  24.   artifacts:
  25.     paths:
  26.       - test
  27.   rules:
  28.     - if: '$CI_COMMIT_BRANCH  !=  "master"'

Build faster with cached dependencies

为了加快构建速度，您可以使用cache参数为项目的依赖项缓存安装文件.

此示例在运行bundle install时将 Jekyll 依赖项缓存在vendor目录中：

  1. image: ruby:2.7
  3. workflow:
  4.   rules:
  5.     - if: '$CI_COMMIT_BRANCH'
  7. cache:
  8.   paths:
  9.     - vendor/
  11. before_script:
  12.   - gem install bundler
  13.   - bundle install --path vendor
  15. pages:
  16.   stage: deploy
  17.   script:
  18.     - bundle exec jekyll build -d public
  19.   artifacts:
  20.     paths:
  21.       - public
  22.   rules:
  23.     - if: '$CI_COMMIT_BRANCH  ==  "master"'
  25. test:
  26.   stage: test
  27.   script:
  28.     - bundle exec jekyll build -d test
  29.   artifacts:
  30.     paths:
  31.       - test
  32.   rules:
  33.     - if: '$CI_COMMIT_BRANCH  !=  "master"'

在这种情况下，您需要从 Jekyll 构建的文件夹列表中排除/vendor目录. 否则，Jekyll 将尝试与站点一起构建目录内容.

在根目录中，创建一个名为_config.yml的文件并添加以下内容：

有关更多信息，请参见以下博客文章.