A canonical URL is the URL of the best representative page from a group of duplicate pages, according to Google. For example, if you have two URLs for the same page (such as example.com?dress=1234 and example.com/dresses/1234), Google chooses one as canonical. Similarly, if you have multiple pages that are nearly identical, Google can group them together (for example, pages that differ only by the sorting or filtering of the contents, such as by price or item color) and choose one as canonical. Google can only index the canonical URL from a set of duplicate pages.

How to add a Table to Hugo

Create Table Shortcode

cat <<'EOF'> layouts/shortcodes/table.html    
{{ $htmlTable := .Inner | markdownify }} {{ $class := .Get 0 }} {{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }} {{ $htmlTable :=
  replace $htmlTable $old $new }} {{ $htmlTable | safeHTML }}
</table>
EOF

Build Table

add this to your Markdown File …

| a | b | c |
| - | - | - |
| bli | bla | blu |
| green | blue | red |

Result

Align Left

| a | b | c |
| :- | :- | :- |
| bli | bla | blu |
| green | blue | red |

Result

Align Right

| a | b | c |
| -: | -: | -: |
| bli | bla | blu |
| green | blue | red |

Result

sha256: b0f3682d811304f9d60e0eb42ce92d7f28de15d6dbc0a9c35d1ce7937b442a60

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

• you have traefik running and a wildcard certificate for a domain. see the previous posts …

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

GoHugo from Scratch

• https://gohugo.io/

Take a fresh VM with OpenBSD ;) otherwise, you have to adapt appropriate …

install pkg

Login as User which is part of the “wheel group”. Doas should allow all Users of the Wheel Group to get root.

doas pkg_add hugo-- nginx--

adduser webmaster

create a user “webmaster” and prepare virtual directories

doas adduser webmaster
doas mkdir /var/www/virtual
doas chown webmaster /var/www/virtual/

Update Nginx

we need to modify nginx, prepare a site folder and a basic config for the webserver. do some stuff as root

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 …

just trying a new feature for leaving comments … it’s selfhosted, done with isso and quite painfull to install :(

some people may like to provide feedback, ask questions, …

sha256: fed502f0a96744470fa42b910138efed8d462ce13a2f5329c61ad23fc133281e

Wanna add some simple forms and process the Content with PHP ?

Add RawHTML Template

if not yet done

mkdir layouts/shortcodes/
cat << 'EOF' > layouts/shortcodes/rawhtml.html
<!-- raw html -->
{{.Inner}}
EOF

Create Script

cat << 'EOF' > static/welcome.php
<html>
<body>

Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>

</body>
</html>
EOF

Create new Post and add rawhtml

without " " between { and {

hugo new content/post/rawtest.md

vim content/post/rawtest.md

{ {<rawhtml>} }
<form action="/welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
{ {</rawhtml>} }

Example

Just a small Form Example

Custom Template Stuff

mkdir -p layouts/shortcodes

cat << 'EOF' > layouts/shortcodes/date.html
{{ now.Format "2006-01-02 03:04:05" }}
EOF

Insert Code in Template

current date ? { {< date >} }

Result ?

current date ?? 2024-11-18 07:00:18

Add RawHTML

Create Template

cat << 'EOF' > layouts/shortcodes/rawhtml.html
<!-- raw html -->
{{.Inner}}
EOF

Add Code

{ {< rawhtml >} }
  <p class="speshal-fancy-custom">
    This is <strong>raw HTML</strong>, inside Markdown.
  </p>
{ {< /rawhtml >} }

Result ?

This is raw HTML, inside Markdown.

how to update hugo

you can use ports (pkg_add hugo) and get the lastest stable hugo package based on OpenBSD release cycles (2 x year), or grab the latest binary from github and put it on your machine.

Releases: https://github.com/gohugoio/hugo/releases

cd /tmp
ftp https://github.com/gohugoio/hugo/releases/download/v0.62.0/hugo_0.62.0_OpenBSD-64bit.tar.gz
tar xfz hugo_0.62.0_OpenBSD-64bit.tar.gz
doas mv hugo /usr/local/bin/

or find latest automatically

doas su -
cd /tmp/
u=$(lynx -dump -listonly https://github.com/gohugoio/hugo/releases/latest |grep "OpenBSD-64bit" |sed 's/.*https/https/')
f=$(echo $u |sed 's/.*\///')
ftp $u
tar xfz $f
doas mv hugo /usr/local/bin/
rm $f

or extract automatically