Nettailor.net

Lost and Found One‑Pager

5 Min. Lesezeit

Ausgangsidee

  • Es soll eine sehr einfache, minimalistische Lost+Found‑Seite unter lost.nettailor.net geben.
  • Diese URL ist auf Geräten, Stickern, QR‑Codes und NFC‑Tags hinterlegt und dient als zentrale Fundseite.
  • Die Seite wird aus einem Gitea‑Repo per CI (Drone) in ein Volume deployed, das von Caddy als statische Site ausgeliefert wird.
  • Ziel:
    • So wenig moving parts wie möglich (kein Hugo, kein Obsidian, kein JS).
    • Fokussiert auf Kontaktinformationen (Telefon, E‑Mail) und Link zur allgemeinen Fundbüroseite.
    • Möglichst barrierefrei und überall aufrufbar (keine Abhängigkeit von modernen Features).
    • So gut wie möglich vor Indexierung / Datenscraping durch Standard‑Crawler geschützt.

Schritt 1: Reduktion auf One‑Pager

Vorherige Situation

  • Drone‑Pipeline basierte noch auf Hugo:
    • Build mit hugomods/hugo:exts
    • git submodule update
    • hugo
    • Deployment von public/ ins Caddy‑Volume.

Zielbild

  • Keine statische Site Engine mehr.
  • Eine einfache, handgeschriebene index.html im Repo.
  • Drone soll nur noch diese Datei (und ggf. weitere statische Dateien) direkt ins Caddy‑Volume kopieren.

Schritt 2: Erste Version der One‑Pager‑Pipeline

Anpassung der Drone‑Konfiguration

  • Abschaffung der Hugo‑Steps.
  • Neue Pipeline mit:
    • optionalem test‑Step (Check: index.html vorhanden).
    • deploy‑Step, der Dateien ins Caddy‑Volume kopiert.

Beispiel (vereinfachte Fassung):

kind: pipeline
type: docker
name: default
 
steps:
- name: test
  image: alpine:3.20
  commands:
  - test -f index.html
  - echo "One-Pager files present."
  when:
    branch:
      exclude:
      - main
    event:
    - push
    - pull_request
 
- name: deploy
  image: alpine:3.20
  volumes:
  - name: lost_site
    path: /webroot/lostpage
  commands:
  - test -f index.html
  - rm -rf /webroot/lostpage/*
  - cp index.html /webroot/lostpage/
  - '[ -f styles.css ] && cp styles.css /webroot/lostpage/ || true'
  - '[ -d assets ] && cp -r assets /webroot/lostpage/ || true'
  - echo "Deployment done."
  when:
    branch:
      include:
      - main
    event:
    - push
 
volumes:
- name: lost_site
  host:
    path: /var/lib/docker/volumes/caddy_data/_data/site/lostpage
  • Repository‑Struktur im Zielmodell:
    • index.html
    • optional styles.css
    • optional assets/

Schritt 3: Inhalt & Layout der deutschen Lost‑Seite

Anforderungen

  • Minimalistischer Aufbau: nur Text, Links, leichtes CSS.
  • Keine Skripte, keine Cookies, kein Tracking.
  • Enthält:
    • Überschrift (Hinweis, dass ein Gerät gefunden wurde).
    • Dankestext.
    • Kontaktmöglichkeiten (Telefon, E‑Mail).
    • Link zur allgemeinen Fundbüroseite.
    • Kurzer Datenschutzhinweis.
  • Zusätzlich:
    • Metatags, um Indexierung durch Suchmaschinen zu minimieren.
    • Referrer‑Policy, um möglichst wenige Metadaten mitzusenden.

Wichtige Meta‑Tags

  • meta name="robots" mit noindex, nofollow, noarchive, nosnippet, noimageindex, notranslate.
  • Analog für googlebot, um Google‑Spezifika abzudecken.
  • meta name="referrer" content="no-referrer".

Kernelemente des HTML‑Layouts

  • <html lang="de"> für korrekte Sprachauszeichnung.
  • color-scheme: light dark; für native Light/Dark‑Mode‑Unterstützung.
  • System‑Fonts (keine externen Font‑CDNs).
  • Einfache, responsive Gestaltung durch max‑width und Padding.

Schritt 4: Schutz vor Crawlern

Maßnahmen auf HTML‑Ebene

  • Meta‑Robots:
    • noindex & noarchive: Seite soll weder indexiert noch archiviert werden.
    • nosnippet & noimageindex: verhindert Text‑Snippets und Bildindexierung.
    • nofollow: Links werden von Bots nicht verfolgt.

Maßnahmen auf Site‑Ebene

  • robots.txt im Webroot:
User-agent: *
Disallow: /
  • Effekt:
    • Seriöse Suchmaschinen respektieren die Anweisung und crawlen die Seite nicht.
    • Meta‑Robots in den HTML‑Dateien verstärken diese Intention.
  • Einschränkung:
    • Schutz nur gegen kooperative Crawler; böswillige Scraper ignorieren das ggf.

Schritt 5: Zweisprachigkeit (Deutsch/Englisch)

Designentscheidung

  • Statt komplexer Sprachumschalter auf einer Seite:
    • Zwei getrennte statische Seiten:
      • index.html → Deutsch (lang="de").
      • en.html → Englisch (lang="en").
  • Gründe:
    • Barrierefreier: Screenreader haben pro Dokument eine konsistente Sprache.
    • Kein JS nötig.
    • Sehr einfach zu pflegen.

Sprachverlinkung

  • Oben auf jeder Seite kleiner Sprachumschalter:

Auf index.html:

<nav aria-label="Sprachauswahl">
  Deutsch |
  <a href="/en.html" hreflang="en" lang="en" rel="alternate">English</a>
</nav>

Auf en.html:

<nav aria-label="Language selection">
  <a href="/index.html" hreflang="de" lang="de" rel="alternate">Deutsch</a> |
  English
</nav>

Schritt 6: Finales Set an Dateien

1. index.html (Deutsch)

  • Enthält:
    • Sprachumschalter (DE/EN).
    • Deutsche Texte für Fundhinweis, Kontakt, Fundbüro‑Link, Datenschutz.
    • Robots‑Meta‑Tags und Referrer‑Policy.
    • Minimal‑CSS, eingebettet im <style>‑Block.

2. en.html (Englisch)

  • Entspricht index.html strukturell, aber:
    • lang="en".
    • Englische Texte und Überschriften.
    • Sprachumschalter (EN/DE).
    • Gleiche CSS‑ und Meta‑Konfiguration.

3. robots.txt

User-agent: *
Disallow: /

4. drone.yml (finale Fassung für zweisprachige Site)

  • Testet auf das Vorhandensein von index.html, en.html und robots.txt.
  • Deployt alle drei Dateien ins Caddy‑Volume, plus optional styles.css und assets/.
kind: pipeline
type: docker
name: default
 
steps:
- name: test
  image: alpine:3.20
  commands:
  - test -f index.html
  - test -f en.html
  - test -f robots.txt
  - echo "Required files present."
  when:
    branch:
      exclude:
      - main
    event:
    - push
    - pull_request
 
- name: deploy
  image: alpine:3.20
  volumes:
  - name: lost_site
    path: /webroot/lostpage
  commands:
  - test -f index.html
  - test -f en.html
  - test -f robots.txt
  - rm -rf /webroot/lostpage/*
  - cp index.html /webroot/lostpage/
  - cp en.html /webroot/lostpage/
  - cp robots.txt /webroot/lostpage/
  - '[ -f styles.css ] && cp styles.css /webroot/lostpage/ || true'
  - '[ -d assets ] && cp -r assets /webroot/lostpage/ || true'
  - echo "Deployment done."
  when:
    branch:
      include:
      - main
    event:
    - push
 
volumes:
- name: lost_site
  host:
    path: /var/lib/docker/volumes/caddy_data/_data/site/lostpage

Essenz des Entstehungsprozesses

  1. Ausgangspunkt: Bestehende, komplexere Hugo‑basierte Pipeline für eine Fundseite sollte auf eine extrem einfache One‑Pager‑Lösung reduziert werden.
  2. Reduktion: Entfernung von Hugo‑Build‑Schritten, Hinführung zur direkten Bereitstellung einer statischen index.html über Drone und Caddy.
  3. Inhaltliche Definition: Gestaltung einer barrierearmen, minimalistischen Lost+Found‑Seite mit Fokus auf Kontaktinformationen und Link zur Fundbüro‑Hauptseite.
  4. Crawler‑Schutz: Ergänzung von Meta‑Robots‑Tags und robots.txt, um Indexierung und Snippets durch seriöse Suchmaschinen zu verhindern.
  5. Internationalisierung: Entscheidung für zwei separate statische Seiten (index.html und en.html) mit gegenseitigem Sprachlink.
  6. Finalisierung: Konsolidierung der finalen Dateien (index.html, en.html, robots.txt, drone.yml) als schlanke, wartungsarme Basis für lost.nettailor.net.

Graphansicht

Backlinks