Einleitung

In diesem Artikel werden wir einen einfachen Blog erstellen, indem wir den Jekyll Static Site Generator verwenden und die Webseite auf GitLab Pages veröffentlichen.

Wir benutzen den vorbereiteten Jekyll Container der Pazdzewicz IT.

Erstellung der Anwendung

Wir benötigen ein leeres Gitlab Repository mit folgender Dateistruktur:

.
├── app/
|   ├── _posts/
|   ├── _drafts/
|   ├── assets/
|   ├── _config.yml
|   └── about.markdown
├── .gitlab-ci.yml
├── docker-compose.yml
└── Dockerfile

Im Verzeichnis app sind alle relevanten Dateien für den Blog gespeichert. Diese werden während des Build-Vorgangs in den Docker-Container übertragen.

  • app/_posts/ enthält alle Beiträge
  • app/assets/ enthält alle Mediendateien, wie Bilder oder Videos
  • app/_config.yml ist die Konfigurationsdatei für diesen Jekyll Blog
  • about.markdown ist die “Über Uns” Seite im Blog
  • .gitlab-ci.yml enthält alle notwendingen Informationen über die Build Pipeline und release zu Gitlab Pages
  • docker-compose.yml wird nur während der Entwicklung benötigt, damit kann der Blog lokal gestartet werden
  • Dockerfile das Dockerfile beschreibt unseren Container

Vorbereiten des Dockerfile

Im Dockerfile kopieren wir alle unsere notwendigen Dateien hinein und führen den Build aus.

FROM registry.gitlab.com/pazdzewicz_docker/jekyll:latest

# Clean all Posts from upstream image

RUN rm -rf /data/_posts/

COPY ./app/_config.yml /data/_config.yml
COPY ./app/about.markdown /data/about.markdown
COPY ./app/_posts/ /data/_posts/
COPY ./app/assets/ /data/assets/

RUN bundle install && \
    bundle update && \
    bundle exec jekyll build

Vorbereiten der docker-compose.yml

Für die lokale Entwicklung benötigen wir eine docker-compose.yml Datei. Darin mounten wir alle notwendigen Dateien und Ordner.

version: '3'

services:
  jekyll:
    image: registry.gitlab.com/pazdzewicz_docker/jekyll:latest
    build: .
    volumes:
      - ./app/_config.yml:/data/_config.yml
      - ./app/about.markdown:/data/about.markdown
      - ./app/_posts:/data/_posts
      - ./app/_drafts:/data/_drafts
      - ./app/assets:/data/assets
    ports:
      - 4000:4000
      - 35729:35729

Vorbereiten der .gitlab-ci.yml

In der Gitlab CI/CD Konfigurationsdatei werden wir nun den Docker Build Vorgang definieren und das Deployment zu Gitlab Pages

variables:
  DOCKER_HOST: tcp://docker:2375
  DOCKER_DRIVER: overlay2
  DOCKER_BUILDKIT: 1
  CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}/app

image: docker:latest

stages:
  - build
  - build_latest
  - deploy

 ####
# Build Dockerfile
####

application_build_and_push:
  stage: build
  services:
    - docker:dind
  script:
    - docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
    - echo Tag Image with ${CONTAINER_IMAGE}:${CI_COMMIT_SHA}
    - docker build -t ${CONTAINER_IMAGE}:${CI_COMMIT_SHA} ./
    - echo Push Image with ${CONTAINER_IMAGE}:${CI_COMMIT_SHA}
    - docker push ${CONTAINER_IMAGE}:${CI_COMMIT_SHA}
  needs:
    - application_lint

####
# retag to LATEST (only if master)
####

application_build_and_push_latest:
  stage: build_latest
  services:
    - docker:dind
  script:
    - docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
    - docker pull ${CONTAINER_IMAGE}:${CI_COMMIT_SHA}
    - docker tag ${CONTAINER_IMAGE}:${CI_COMMIT_SHA} ${CONTAINER_IMAGE}:master
    - docker push ${CONTAINER_IMAGE}:master
    - docker tag ${CONTAINER_IMAGE}:${CI_COMMIT_SHA} ${CONTAINER_IMAGE}:latest
    - docker push ${CONTAINER_IMAGE}:latest
  only:
    - master
    - main
  needs:
    - application_build_and_push

pages:
  stage: deploy
  image:
    name: ${CONTAINER_IMAGE}:${CI_COMMIT_SHA}
    entrypoint: [""]
  script:
    - /release.bash
  artifacts:
    paths:
      - public
  publish: public
  only:
    - master
    - main
  needs:
    - application_build_and_push
  environment:
    name: $CI_COMMIT_REF_NAME
    url: $CI_PAGES_URL

Vorbereiten des Ordners app/_posts/

In diesem Ordner werden Beiträge gespeichert. Mehr dazu in der offiziellen Jekyll Dokumentation

Vorbereiten des Ordners app/assets/

In diesem Ordner werden Mediendateien gespeichert. Mehr dazu in der offiziellen Jekyll Dokumentation

Vorbereiten der Datei about.markdown

Um eine benutzerdefinierte “Über uns”-Seite zu erstellen, erstellen wir die Datei:

---
layout: page
title: Über
permalink: /about/
---

Diese Seite beinhaltet allerlei Inhalt

Dies ist ein Beispiel für Seiten. Mehr dazu in Jekyll Dokumentation

Commit und Deploy

Nun können wir unseren Blog schon mal in das Gitlab Repository hochladen und der Build Pipeline zusehen:

screen-1-pipelines

Interessant ist dier application_build_and_push Schritt, dort wird unser Dockerfile zu einem Image gebaut und unsere Seite erstellt:

screen-2-docker

Ist dies erfolgt so wird der pages Schritt das Deployment vornehmen. Dieser führt im das /release.bash Skript aus, welches im Endeffekt nur die statisch generierten Seiten aus dem Docker Container in die Gitlab CI/CD kopiert.

screen-3-release

Nun wurde unsere Seite erfolgreich hochgeladen!

borat-success

Wir können nun unter Operate -> Environments unsere Seite öffnen!

screen-4-environments

Einstellungen in Gitlab CI/CD vornehmen.

Nun wollen wir noch eine Domain hinterlegen und HTTPS aktivieren. Dies funktioniert unter Deploy -> Pages