247.md

# Create a GitLab Pages website from scratch

> 原文：[https://docs.gitlab.com/ee/user/project/pages/getting_started/pages_from_scratch.html](https://docs.gitlab.com/ee/user/project/pages/getting_started/pages_from_scratch.html)

*   [Prerequisites](#prerequisites)
*   [Choose a Docker image](#choose-a-docker-image)
*   [Install Jekyll](#install-jekyll)
*   [Specify the `public` directory for output](#specify-the-public-directory-for-output)
*   [Specify the `public` directory for artifacts](#specify-the-public-directory-for-artifacts)
*   [Deploy specific branches to a Pages site](#deploy-specific-branches-to-a-pages-site)
*   [Specify a stage to deploy](#specify-a-stage-to-deploy)
*   [Remove duplicate commands](#remove-duplicate-commands)
*   [Build faster with cached dependencies](#build-faster-with-cached-dependencies)
*   [Related topics](#related-topics)

# Create a GitLab Pages website from scratch[](#create-a-gitlab-pages-website-from-scratch "Permalink")

本教程向您展示如何从头开始创建 Pages 站点. 您将从一个空白项目开始，并创建自己的 CI 文件，该文件向[GitLab Runner](https://docs.gitlab.com/runner/)提供指导. 当您的 CI / CD [管道](../../../../ci/pipelines/index.html)运行时，将创建 Pages 站点.

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

## Prerequisites[](#prerequisites "Permalink")

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

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

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

    ```
    <html>
    <head>
      <title>Home</title>
    </head>
    <body>
      <h1>Hello World!</h1>
    </body>
    </html> 
    ```

*   [`Gemfile`](https://bundler.io/gemfile.html)一个描述 Ruby 程序依赖性的文件. 用以下内容填充它：

    ```
    source "https://rubygems.org"

    gem "jekyll" 
    ```

## Choose a Docker image[](#choose-a-docker-image "Permalink")

In this example, the Runner uses a [Docker image](../../../../ci/docker/using_docker_images.html) to run scripts and deploy the site.

这个特定的 Ruby 映像在[DockerHub](https://hub.docker.com/_/ruby)上[维护](https://hub.docker.com/_/ruby) .

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

```
image: ruby:2.7 
```

如果您的 SSG 需要构建[NodeJS](https://s0nodejs0org.icopy.site/) ，则必须指定一个包含 NodeJS 的映像作为其文件系统的一部分. 例如，对于[Hexo](https://gitlab.com/pages/hexo)网站，可以使用`image: node:12.17.0` .

## Install Jekyll[](#install-jekyll "Permalink")

要在本地运行[Jekyll](https://jekyllrb.com/) ，您需要打开终端并执行以下操作：

*   通过运行`gem install bundler`安装[Bundler](https://bundler.io/) .
*   通过运行`bundle install`创建`Gemfile.lock` .
*   通过运行`bundle exec jekyll build`安装 Jekyll.

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

```
script:
  - gem install bundler
  - bundle install
  - bundle exec jekyll build 
```

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

```
job:
  script:
  - gem install bundler
  - bundle install
  - bundle exec jekyll build 
```

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

```
pages:
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build 
```

## Specify the `public` directory for output[](#specify-the-public-directory-for-output "Permalink")

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

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

```
pages:
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public 
```

## Specify the `public` directory for artifacts[](#specify-the-public-directory-for-artifacts "Permalink")

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

```
pages:
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public 
```

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

```
image: ruby:2.7

pages:
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public 
```

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

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

如果您想执行更多高级任务，则可以使用[任何可用设置](../../../../ci/yaml/README.html)更新`.gitlab-ci.yml`文件. 您可以使用[GitLab CI / CD Lint Tool](../../../../ci/yaml/README.html#validate-the-gitlab-ciyml)来检查 CI 语法.

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

## Deploy specific branches to a Pages site[](#deploy-specific-branches-to-a-pages-site "Permalink")

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

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

```
image: ruby:2.7

workflow:
  rules:
    - if: '$CI_COMMIT_BRANCH'

pages:
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public 
```

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

```
image: ruby:2.7

workflow:
  rules:
    - if: '$CI_COMMIT_BRANCH'

pages:
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public
  rules:
    - if: '$CI_COMMIT_BRANCH  ==  "master"' 
```

## Specify a stage to deploy[](#specify-a-stage-to-deploy "Permalink")

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

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

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

```
image: ruby:2.7

workflow:
  rules:
    - if: '$CI_COMMIT_BRANCH'

pages:
  stage: deploy
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public
  rules:
    - if: '$CI_COMMIT_BRANCH  ==  "master"' 
```

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

```
image: ruby:2.7

workflow:
  rules:
    - if: '$CI_COMMIT_BRANCH'

pages:
  stage: deploy
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public
  rules:
    - if: '$CI_COMMIT_BRANCH  ==  "master"'

test:
  stage: test
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d test
  artifacts:
    paths:
      - test
  rules:
    - if: '$CI_COMMIT_BRANCH  !=  "master"' 
```

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

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

## Remove duplicate commands[](#remove-duplicate-commands "Permalink")

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

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

将这些命令移至`before_script`部分：

```
image: ruby:2.7

workflow:
  rules:
    - if: '$CI_COMMIT_BRANCH'

before_script:
  - gem install bundler
  - bundle install

pages:
  stage: deploy
  script:
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public
  rules:
    - if: '$CI_COMMIT_BRANCH  ==  "master"'

test:
  stage: test
  script:
    - bundle exec jekyll build -d test
  artifacts:
    paths:
      - test
  rules:
    - if: '$CI_COMMIT_BRANCH  !=  "master"' 
```

## Build faster with cached dependencies[](#build-faster-with-cached-dependencies "Permalink")

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

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

```
image: ruby:2.7

workflow:
  rules:
    - if: '$CI_COMMIT_BRANCH'

cache:
  paths:
    - vendor/

before_script:
  - gem install bundler
  - bundle install --path vendor

pages:
  stage: deploy
  script:
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public
  rules:
    - if: '$CI_COMMIT_BRANCH  ==  "master"'

test:
  stage: test
  script:
    - bundle exec jekyll build -d test
  artifacts:
    paths:
      - test
  rules:
    - if: '$CI_COMMIT_BRANCH  !=  "master"' 
```

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

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

```
exclude:
  - vendor 
```

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

## Related topics[](#related-topics "Permalink")

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

*   [Use GitLab CI/CD `environments` to deploy your web app to staging and production](https://about.gitlab.com/blog/2016/08/26/ci-deployment-and-environments/).
*   Learn [how to run jobs sequentially, in parallel, or build a custom pipeline](https://about.gitlab.com/blog/2016/07/29/the-basics-of-gitlab-ci/).
*   了解[如何从不同项目中提取特定目录](https://about.gitlab.com/blog/2016/12/07/building-a-new-gitlab-docs-site-with-nanoc-gitlab-ci-and-gitlab-pages/)以部署此网站[https://docs.gitlab.com](https://s0docs0gitlab0com.icopy.site) .
*   Learn [how to use GitLab Pages to produce a code coverage report](https://about.gitlab.com/blog/2016/11/03/publish-code-coverage-report-with-gitlab-pages/).