Was ist Look Scanned?

Look Scanned ist eine schlanke, browserbasierte Anwendung zur Simulation von PDF-Scan-Effekten. Die Anwendung wurde mit besonderem Fokus auf Datenschutz entwickelt und ermöglicht es Entwicklern, Designern und anderen Nutzern, authentische Scan-Effekte zu PDFs hinzuzufügen – ganz ohne Scanner oder Drucker.

Warum Hugo?

Nach sorgfältiger Prüfung verschiedener Static Site Generators für den Look Scanned Blog haben wir uns aus folgenden Gründen für Hugo entschieden:

  1. Blitzschnell - Dank der Go-Implementierung bietet Hugo beeindruckende Build-Geschwindigkeiten
  2. Entwicklerfreundlich - Unkomplizierte Konfiguration mit flacher Lernkurve
  3. Vielfältige Themes - Große Auswahl an ansprechenden, anpassbaren Themes
  4. Aktive Community - Hilfreiche Community und ausführliche Dokumentation
  5. Erstklassiges I18n - Hervorragende Unterstützung für Mehrsprachigkeit

Schritt-für-Schritt Anleitung

Hugo installieren

Für macOS-Nutzer (über Homebrew):

brew install hugo

Für Windows-Nutzer (über Chocolatey):

choco install hugo-extended

Für Linux-Nutzer finden Sie die Installationsanleitung hier.

Neue Website erstellen

Erstellen Sie Ihre Hugo-Website mit diesen Befehlen:

hugo new site lookscanned-blog
cd lookscanned-blog

Theme einrichten

Installieren Sie das PaperMod-Theme als Git-Submodul:

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Passen Sie Ihre config.toml an:

theme = "PaperMod"

Mehrsprachigkeit konfigurieren

Fügen Sie die Sprachunterstützung in Ihrer config.toml hinzu:

defaultContentLanguage = 'en'
defaultContentLanguageInSubdir = false

[params]
  displayFullLangName = true

[languages]
  [languages.en]
    languageCode = 'en'
    languageName = 'English'
    title = 'Look Scanned Blog'
  [languages.zh]
    languageName = '简体中文'
    title = 'Look Scanned 博客'
  [languages.zh-tw]
    languageCode = 'zh-TW'
    languageName = '繁體中文'
    title = 'Look Scanned 部落格'
  # Weitere Sprachen...

Inhalte erstellen

Erstellen Sie Ihren ersten Blogbeitrag:

hugo new posts/build-blog-using-hugo/index.de.md

Entwicklungsserver starten

Starten Sie den lokalen Entwicklungsserver:

hugo server -D

Öffnen Sie http://localhost:1313 im Browser, um Ihre Website zu prüfen.

Deployment-Optionen

Veröffentlichen Sie Ihren Hugo-Blog einfach mit GitHub Actions:

  1. GitHub Pages

    • GitHub-Repository anlegen
    • Hugo-Website hochladen
    • GitHub Pages in den Repository-Einstellungen aktivieren
    • GitHub Actions für automatisches Deployment einrichten

  2. Cloudflare Pages

    • GitHub-Repository verknüpfen
    • Build-Befehl auf hugo setzen
    • Veröffentlichungsverzeichnis auf public festlegen

Theme-Anpassungen

Zur Optimierung der Benutzeroberfläche haben wir den Sprachumschalter aus der Kopfzeile entfernt. Die angepassten Theme-Dateien finden Sie hier.

Fazit

Hugo bietet eine ausgezeichnete Grundlage für einen persönlichen Blog. Die Kombination aus Geschwindigkeit, Flexibilität und umfassender Dokumentation macht es zur idealen Wahl für Entwickler aller Erfahrungsstufen. Mit zunehmender Hugo-Erfahrung werden Sie weitere leistungsstarke Funktionen entdecken, um Ihren Blog einzigartig zu gestalten.

Ressourcen