Create a GitLab Pages website from scratch · Gitlab 中文文檔

# 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/).