Blog

Docker - Traefik - HugoBlog

Intro

as i’m playing with traefik & docker, why not duplicate this blog in container ? for fun and profit ? let’s give at try …

pre-condition

docker compose

cat << 'EOF' > docker-compose.yml
version: '3'

services:
  hugo:
    image: jakejarvis/hugo-extended:latest
    ports:
      - 1313:1313
    volumes:
      - ./src:/src
    command: server --buildDrafts --buildFuture --bind 0.0.0.0
    restart: always
    networks:
      - traefik
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.hugo.rule=Host(`testblog.norma.li`)"
      - "traefik.http.routers.hugo.tls=true"

networks:
  traefik:
    external: true
EOF

prepare hugo

which hugo || apt install hugo
hugo new site src
mkdir src/themes
git clone https://github.com/vimux/mainroad.git src/themes/mainroad

config.toml

cat << 'EOF' > src/config.toml
baseURL = "https://testblog.norma.li/"
languageCode = "en-us"
title = "My Brandnew Docker Traefik Hugo Blog ..."
theme = "mainroad"
EOF

docker up

docker compose up -d

Create Page

cd src
hugo new posts/hello.md
sed -i '/draft: true/d' content/posts/hello.md
echo -e "hello world :)\n" >> content/posts/hello.md

Access Page

https://testblog.norma.li

Hugo Copy Button

I like Websites with the Copy Button for certain Snippets. Why not integrate into the own Blog ?

Folder, Copy JS Stuff

Change to Hugo Root Folder

mkdir -p static/js/

cat << 'EOF' > static/js/copy-code.js
(function() {
  'use strict';

  if(!document.queryCommandSupported('copy')) {
    return;
  }

  function flashCopyMessage(el, msg) {
    el.textContent = msg;
    setTimeout(function() {
      el.textContent = "Copy";
    }, 1000);
  }

  function selectText(node) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(node);
    selection.removeAllRanges();
    selection.addRange(range);
    return selection;
  }

  function addCopyButton(containerEl) {
    var copyBtn = document.createElement("button");
    copyBtn.className = "highlight-copy-btn";
    copyBtn.textContent = "Copy";

    var codeEl = containerEl.firstElementChild;
    copyBtn.addEventListener('click', function() {
      try {
        var selection = selectText(codeEl);
        document.execCommand('copy');
        selection.removeAllRanges();

        flashCopyMessage(copyBtn, 'Copied!')
      } catch(e) {
        console && console.log(e);
        flashCopyMessage(copyBtn, 'Failed :\'(')
      }
    });

    containerEl.appendChild(copyBtn);
  }

  // Add copy button to code blocks
  var highlightBlocks = document.getElementsByClassName('highlight');
  Array.prototype.forEach.call(highlightBlocks, addCopyButton);
})();
EOF

Update Header

Open this File …

Blog renamed

… just renamed the blog from “puffy.nolink.ch” to “blog.stoege.net” !

hope all the links are still working. redirection from old location should be in place


Any Comments ?

sha256: 7b4e2517426b596dcba03360c7f9e01b19c8a13218ca3e0ee666ffa9cff824e6

Blog

sha256: 2b87a252a3d912530dd8c20df6bee7f6cbc4ede0074fdf217e318aab39d9736c