Create a GitLab Pages website from scratch

原文:https://docs.gitlab.com/ee/user/project/pages/getting_started/pages_from_scratch.html

Create a GitLab Pages website from scratch

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

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

Prerequisites

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

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

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

    1. <html>
    2. <head>
    3. <title>Home</title>
    4. </head>
    5. <body>
    6. <h1>Hello World!</h1>
    7. </body>
    8. </html>
  • Gemfile一个描述 Ruby 程序依赖性的文件. 用以下内容填充它:

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

Choose a Docker image

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

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

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

  1. image: ruby:2.7

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

Install Jekyll

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

  • 通过运行gem install bundler安装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

此外,在.gitlab-ci.yml文件中,每个script均由job组织. job包括您要应用于该特定任务的脚本和设置.

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

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

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

Specify the public directory for output

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
  2. pages:
  3. script:
  4. - gem install bundler
  5. - bundle install
  6. - bundle exec jekyll build -d public
  7. artifacts:
  8. paths:
  9. - public

现在保存并提交.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
  2. workflow:
  3. rules:
  4. - if: '$CI_COMMIT_BRANCH'
  5. pages:
  6. script:
  7. - gem install bundler
  8. - bundle install
  9. - bundle exec jekyll build -d public
  10. artifacts:
  11. paths:
  12. - public

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

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

Specify a stage to deploy

GitLab CI / CD 有三个默认阶段:构建,测试和部署.

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

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

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

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

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

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

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

Remove duplicate commands

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

在示例中, gem install bundlerbundle install对于作业, pagestest都在运行.

将这些命令移至before_script部分:

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

Build faster with cached dependencies

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

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

  1. image: ruby:2.7
  2. workflow:
  3. rules:
  4. - if: '$CI_COMMIT_BRANCH'
  5. cache:
  6. paths:
  7. - vendor/
  8. before_script:
  9. - gem install bundler
  10. - bundle install --path vendor
  11. pages:
  12. stage: deploy
  13. script:
  14. - bundle exec jekyll build -d public
  15. artifacts:
  16. paths:
  17. - public
  18. rules:
  19. - 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"'

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

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

  1. exclude:
  2. - vendor

现在,GitLab CI / CD 不仅可以构建网站,还可以通过对功能分支的连续测试进行推送, 缓存与 Bundler 一起安装的依赖项,并将每次推送持续部署master分支.

Related topics

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