Mid 2018 I switched my blog from Wordpress to Hugo . Main reason was performance and that I can use Asciidoctor to write the posts.

What happened the last 18 months? I stayed with the theme I selected 2018, but I tweaked it a little bit. So I added lunr to implement searching, changed all scripts and fonts from CDN to local (privacy and tracking), updated Bootstrap 3 to 4.

Working with Bootstrap was quite fun, I haven’t done a lot of HTML or CSS the last years, but the grid and css classes from Bootstrap are working without checking each change on all browsers and are responsive.

Daily journal

After reading The Unicorn Project I started writing a daily journal with things I learned or figured out during the day. I tried this several times the last years, but never was happy with the result. This time I just use the same setup as my blog (Hugo, Theme and Asciidoctor), but deploy it to a local Docker container, which is started with podman.

Gitlab CI/CD

Hugo generates static html pages from Asciidoctor or Markdown sources. The first months I just ran the hugo binary on my local machine and did a rsync of the generated html to my blog and the container.

Updating Hugo, or reinstall my Notebook sometimes delayed a blog post. So I decided to automated the process through Gitlab CI/CD.

.gitmodules

I added the theme (which is stored as a seperate git repository) as a submodule (git add submodule …​) to the blog content. .gitmodules can handle complete repository URL, or relative ones. The relative URL are easier to checkout in the pipeline, so I changed the file to

.gitmodules

[submodule "themes/stoeps-theme"]
    path: themes/stoeps-theme
    url: ../stoeps-theme.git 

• Edit Url and replace with the relative path (I have the theme in the same git group)

Creating .gitlab-ci.yml

variables:
  GIT_SUBMODULE_STRATEGY: recursive   

stages:                               
  - build
  - deploy

build:
  stage: build
  image: "node:alpine"
  before_script:
    - 'which curl || ( apk update && apk add curl)'  
    - 'which gem || (apk add ruby)'
    - curl -L https://github.com/gohugoio/hugo/releases/download/v0.61.0/hugo_0.61.0_Linux-64bit.tar.gz | tar -xz && mv hugo /usr/local/bin/hugo
    - npm install
    - gem install asciidoctor
  script:
    - npx gulp build                  
  only:                               
    refs:
      - master
    variables:
      - $BUILDHTML
    changes:
      - content/**/*
  artifacts:
    paths:
      - docs                          
    expire_in: 2 hours

deploy:
  image: "debian:buster"
  stage: deploy
  before_script:
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
    - 'which rsync || ( apt-get update -y && apt-get install rsync -y )'
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | base64 --decode | tr -d '\r' | ssh-add - > /dev/null  
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - ssh-keyscan -t rsa home26617100.1and1-data.host >> ~/.ssh/known_hosts
  script:
    - rsync -az docs/ p7594620@home26617100.1and1-data.host:/kunden/homepages/13/d26617100/htdocs/stoeps.de --delete
  only:
    refs:
      - master
    variables:
      - $DEPLOYBLOG
    changes:
      - content/**/*

• Clone submodules with the main repository

• Two stages, one builds html, one deploys the code

• Check if curl is included in the container, if not install it

• Run build with Gulp (see below)

• Stage runs only for master-Branch, if variable BUILDHTML is set and changed files are in the content-tree

• Keep directory docs as artifacts for the next stage

• I created a seperate SSH key just for the synchronisation, it is stored as a variable in the Gitlab project

Store SSH-Key as variable

Create Key

ssh-keygen

base64 encode the key and copy to clipboard

base64 -i ~/.ssh/id_gitlab |tr -d '\n' | xclip

Syntax is equal to Linux cron, so the setting of this image will run the pipeline at 23:55 UTC every day. Other option could be hourly at 5 minutes past the full hour: 5 * * * *

I added a scheduler which runs hourly and sets the variables BUILDHTML and DEPLYBLOG, so I can check-in code to gitlab multiple times and the posts will only be build on a scheduled basis.

Just set the variables to true.

Gulp

The article Continuously Deploy a Hugo Site with GitLab CI added Gulp to minify the built HTML. Cool idea and saves me some megabytes. I added css-minify and build the hugo page with:

npx gulp build

gulpfile.js

var gulp: require("gulp");
var htmlmin: require("gulp-htmlmin");
var cssmin: require("gulp-cssmin");
var shell: require("gulp-shell");

gulp.task("hugo-build", shell.task(["hugo"]));

gulp.task("minify-html", () => {
    return gulp.src(["docs/**/*.html"])
    .pipe(htmlmin({
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true,
        removeComments: true,
        useShortDoctype: true,
    }))
    .pipe(gulp.dest("./docs"));
});

gulp.task('minify-css', () => {
    return gulp.src(["docs/**/*.css"])
    .pipe(cssmin())
    .pipe(gulp.dest("./docs"));
});

gulp.task("build", gulp.series("hugo-build", "minify-html", "minify-css"));