↓Skip to main content

GitLab CI Pipeline - Publish HTML Website with GitLab Pages

349 words·
GitLab GitLab CI CI Pipeline GitLab Pages
Table of Contents

GitLab Pages
#

GitLab Pages Configuration
#

The GitLab Pages domain name is defined in the config/gitlab.rb configuration file or directly in the Docker Compose manifest with pages_external_url:

# GitLab Pages
pages_external_url 'https://gitlab-pages.jklug.work'  # Define GitLab Page domain name
gitlab_pages['enable'] = true
pages_nginx['redirect_http_to_https'] = true
pages_nginx['ssl_certificate'] = "/etc/gitlab/ssl/fullchain.pem"
pages_nginx['ssl_certificate_key'] = "/etc/gitlab/ssl/privkey.pem"
## GitLab Pages: Storage Configuration
gitlab_rails['pages_local_store_enabled'] = true
gitlab_rails['pages_local_store_path'] = "/var/opt/gitlab/gitlab-rails/shared/pages"

Create New Group
#

Create a new group, the name of the group will be prepended to the GitLab Pages domain name:

In this example the name of the deployed GitLab Pages will be: https:\\wiki.gitlab-pages.jklug.work\example-pages


DNS
#

  • Make sure the hosts can resolve the GitLab Pages domain name to the server where GitLab is running.

  • If no DNS server is used make sure to create a hosts entry for the subdomain:

# Hosts entry
192.168.70.4 wiki.gitlab-pages.jklug.work

Create Project
#

  • Create a new project in the previously created group

  • Select “Create from template”

  • Use the “Pages/Plain HTML” template

  • Define a project name like example-site

GitLab Repository
#

File and Folder Structure
#

The file and folder structure of the new project should look like this:

GitLap-Repository
├── .gitlab-ci.yml
├── public
│   ├── index.html
│   └── style.css
└── README.md

GitLab CI Pipeline
#

  • .gitlab-ci.yml
image: busybox

pages:
  stage: deploy
  script:
    - echo "The site will be deployed to $CI_PAGES_URL"
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Deploy Website as GitLab Page
#

Trigger Pipeline
#

Adopt the index.html file located in the public folder

  • public/index.html
<!DOCTYPE html>
<html>

<head>
	<title>jklug.work</title>
</head>

<body>
	<h1>Hi there</h1>
</body>

</html>

  • Push the changes into the GitLab repository
# Add changes
git add -u

# Commit changes
git commit -m "Adapted html site"

# Push changes
git push

Open GitLab Pages
#

  • Wait till the pipeline stages have completed

  • Go to: (Project) “Deploy” > “Pages”

  • Uncheck “Use unique domain” and click “Save changes”

  • Or test it via curl
# Curl the example site:
curl https://wiki.gitlab-pages.jklug.work/example-site/

# Shell output:
StatusCode        : 200
StatusDescription : OK
Content           : <!DOCTYPE html>
                    <html>

                    <head>
                        <title>jklug.work</title>
                    </head>

                    <body>
                        <h1>Hi there</h1>
                    </body>

                    </html>