[Memorandum] Architekturentscheidungen und Überlegungen bei der Erstellung dieses Blogs

📅 Erstellt: 2023/01/01, Aktualisiert: 2023/04/08 ⏱️ Geschätzte Lesezeit ~6 mins (1,017 Wörter)

Ein umfassendes Memorandum über die Auswahl statischer und dynamischer Websites, die Bewertung der Hosting-Plattform, die benutzerdefinierte Pandoc-SSG-Architektur, das von Confluence inspirierte UI-Design und mehrsprachiges SEO.

Inhaltsverzeichnis

(Überlegung 1) Statische Site vs. dynamische Site?
1. Unterschiede zwischen statischen und dynamischen Websites
(Überlegung 2) Auswahl einer statischen Site-Hosting-Plattform
(Überlegung 3) Auswahl eines statischen Site-Generators
(Überlegung 4) Benutzerdefiniertes UI- und Informationsdesign
(Überlegung 5) SEO-Strategie und Best Practices
Zusammenfassung

(Überlegung 1) Statische Site vs. dynamische Site?

Die Beurteilung, ob ein statischer Site-Generator oder ein dynamisches CMS besser zu Ihren technischen Anforderungen passt, ist eine wichtige architektonische Entscheidung beim Erstellen einer Website.
Die Wahl zwischen diesen beiden Paradigmen wirkt sich grundlegend auf den Funktionsumfang, die Entwicklererfahrung, die Wartbarkeit, die Skalierbarkeit und den Sicherheitsstatus aus.

Unterschiede zwischen statischen und dynamischen Websites

Statische Seite
Besteht ausschließlich aus vorgerenderten statischen Assets (HTML, CSS, JavaScript, Mediendateien).Um Inhaltsänderungen vorzunehmen, müssen Dateien direkt neu erstellt oder bearbeitet werden.
Ideal für technische Dokumentation, persönliche Blogs und Informationsseiten, bei denen der Inhalt relativ konsistent bleibt und keine benutzerspezifischen Datenbankschreibvorgänge in Echtzeit erforderlich sind.
Dynamische Website
Rendert Inhalte im laufenden Betrieb über serverseitige Laufzeiten, Datenbanken und Anwendungsframeworks bei jeder HTTP-Anfrage.
Ideal für interaktive Anwendungen, mandantenfähige Kollaborationsplattformen, E-Commerce oder Szenarien mit häufigen Benutzerinteraktionen in Echtzeit.
Nachfolgend finden Sie einen Vergleich der Vor- und Nachteile zwischen statischen und dynamischen Architekturen.Kriterien mit hoher Priorität sind kursiv geschrieben.

Vorteile statischer Websites

Schnelle Seitenladegeschwindigkeiten und hervorragende Benutzererfahrung (TTFB / Core Web Vitals).
Keine Rechenlast auf den Ursprungsservern, einfache Skalierung bei hohen Datenverkehrsspitzen über CDN-Caching.
Stabile Inhaltsbereitstellung mit nahezu null Ausfallzeiten oder Serverabsturzrisiken.
Solide Sicherheitslage mit minimaler Angriffsfläche (keine direkte Datenbankinjektion oder Backend-Schwachstellen).
Extrem niedrige Betriebs- und Hostingkosten im Vergleich zu dynamischen Serverinstanzen.

Nachteile statischer Websites

Inhaltsaktualisierungen erfordern die Ausführung einer Build-/Bereitstellungspipeline.
Unfähigkeit, beliebige Backend-Logik ohne clientseitige APIs auszuführen, wodurch interaktive serverseitige Arbeitsabläufe eingeschränkt werden.
Ungeeignet für komplexe Anwendungen, die transaktionale Datenbankschreibvorgänge oder personalisierte Serversitzungen erfordern.

Vorteile dynamischer Websites

Umfangreiche Echtzeit-Interaktivität, die eine aktive Benutzerkommunikation und Community-Funktionen ermöglicht.
Einfache Inhaltsbearbeitung direkt über Browser-GUIs, unterstützt durch relationale Datenbanken oder Dokumentdatenbanken.
Hohe Erweiterbarkeit mit dynamischen Plugins und serverseitigem On-Demand-Scripting.

Nachteile dynamischer Websites

Langsamere Seitenreaktionszeiten und potenzielle Verschlechterung der Benutzererfahrung ohne aggressives Caching.
Hohe Server- und Datenbanklast, die höhere Infrastruktur- und Betriebskosten verursacht.
Kontinuierliche Sicherheitswartung (Patching von CMS-Schwachstellen, SQL-Injections, CVEs).

Während dynamische Websites die Implementierung übergreifender Funktionen wie Tagging und Suche vereinfachen, wurde eine statische Site-Architektur gewählt, um den Wartungsaufwand zu eliminieren und die Betriebskosten nahe Null zu halten.
Referenz:
Unterschiede zwischen statischen und dynamischen Websites, Vor- und Nachteile |Xserver Business

(Überlegung 2) Auswahl einer statischen Site-Hosting-Plattform

Die Bereitstellung einer statischen Site erfordert eine zuverlässige Speicher- und CDN-Verteilungsinfrastruktur.
Während Firebase Hosting von Google Cloud aufgrund seiner Vertrautheit mit GCP der Hauptkandidat war, wurden alternative Plattformen systematisch evaluiert.
Laut Vergleich statischer Site-Hosting-Plattformen |JavaScript-Hinweis gehören zu den führenden Hosting-Anbietern:

Netlify
Vercel
Firebase-Hosting
Cloudflare-Seiten
GitHub-Seiten
GitLab-Seiten

Bewertet anhand von vier Schlüsselkriterien: „Edge CDN PoP in Japan“, „Automatisierte Bereitstellung über GitHub/Cloud Build“, „Ausreichendes kostenloses Kontingent“ und „Zulässige kommerzielle Nutzung“.

Hosting-Service	Japan CDN PoP	GitHub / Cloud Build Deploy	Großzügiges kostenloses Kontingent	Kommerzielle Nutzung
Netlify	×	⚪︎	⚪︎	⚪︎
Vercel	⚪︎	⚪︎	⚪︎	×
Firebase-Hosting	⚪︎	⚪︎	⚪︎	⚪︎
Cloudflare-Seiten	⚪︎	⚪︎	⚪︎	⚪︎
GitHub-Seiten	⚪︎	×	⚪︎	×
GitLab-Seiten	⚪︎	×	⚪︎	?

Firebase Hosting und Cloudflare Pages gingen als Spitzenkandidaten hervor.
Während Cloudflare Pages überzeugende Edge-Worker-Funktionen bot, wie in [Cloudflare Pages vs. Firebase Hosting |] beschriebenBejamas](https://bejamas.io/compare/cloudflare-pages-vs-firebase/), Firebase Hosting wurde ausgewählt, weil es unsere bestehende Google Cloud-Kontoinfrastruktur nutzt, sich nahtlos in Google Analytics integriert und nativ eine Verbindung mit Cloud Build-Pipelines herstellt.

(Überlegung 3) Auswahl eines statischen Site-Generators

Statische Site-Generatoren (SSGs) kompilieren Quell-Markup (Markdown, AsciiDoc) und Vorlagen in produktionsbereite statische Assets.
Drei repräsentative statische Site-Generatoren wurden bewertet:
Die ursprüngliche Absicht bestand darin, Hugo einzuführen, um den Einrichtungsaufwand zu minimieren.
Es erwies sich jedoch als schwierig, ein vorhandenes Thema zu finden, das der Ästhetik der Atlassian Confluence-Dokumentation am besten entsprach.Infolgedessen wurde eine benutzerdefinierte Python-gesteuerte Build-Pipeline unter Verwendung von Pandoc entwickelt.

Jekyll-Profis

Native GitHub Pages-Integration.
Intuitives Templating über Liquid und Markdown.
Umfangreiches Plugin-Ökosystem.

Jekyll Nachteile

Ruby-Umgebungsverwaltung und langsamere Build-Zeiten auf großen Websites.

Hugo Profis

Extrem schnelle Kompilierungsgeschwindigkeit, geschrieben in Go.
Saubere Trennung von Themen und Inhalten.
Einfacher Markdown-Authoring-Workflow.

Hugo Cons

Gehen Sie auf die Syntax-Lernkurve für Vorlagen und vergleichsweise weniger spezialisierte Community-Themen ein.

Gatsby-Profis

Leistungsstarke GraphQL-Datenschicht und umfangreiches React-Komponenten-Ökosystem.
Umfangreiche Plugin-Bibliothek, die Headless-CMS-Backends integriert.

Gatsby Nachteile

Hohe architektonische Komplexität, aufgeblähte Abhängigkeiten und steile Lernkurve.

(Überlegung 4) Benutzerdefiniertes UI- und Informationsdesign

Pandoc transformiert Dokumente in verschiedenen Formaten (Markdown, HTML, PDF, Word).Durch die Angabe benutzerdefinierter HTML-Vorlagen mit dem Flag „–template“ können statische Seiten mit benutzerdefinierten Layouts und CSS-Stilen formatiert werden.
Pandoc-Benutzerhandbuch – Vorlagen

Seitenleiste im Confluence-Stil

Entwickelt mit Python und JavaScript, um die übersichtliche Navigation der Space-Seitenleisten von Atlassian Confluence zu reproduzieren, sodass Benutzer mühelos zwischen Kategorien und Beiträgen wechseln können.
Referenz: Atlassian Confluence Space Sidebar-Dokumentation

Inhaltsverzeichnis (ToC)

Ein Python-Skript wurde implementiert, um HTML-Überschriften-Tags („h2“, „h3“) zu analysieren und dynamisch ein interaktives Inhaltsverzeichnis zu generieren.
Referenz: DevelopersIO – Generieren eines Inhaltsverzeichnisses aus HTML-Überschriften über Python

Syntaxhervorhebung für Codeblöcke

Integriert Prism.js mit dem „Tomorrow Night“-Theme und benutzerdefinierten CSS-Farbanpassungen.
Referenz: Offizielle Website von Prism.js
Zu den Sprachpaketen gehören Bash, Python, Docker, YAML, JSON, Git und Markdown.

Site-Suche

Integrierte Google Custom Search Engine (CSE), die leistungsstarke Suchfunktionen für alle indizierten Blogseiten bietet, ohne dass ein In-Memory-Suchserver erforderlich ist.

Favicon

Mit GIMP generiert und über Online-Favicon-Tools in der Größe geändert (512 x 512 auf 256 x 256, 32 x 32, 16 x 16), um eine gestochen scharfe Darstellung auf Desktop- und Mobilgeräten zu gewährleisten.

(Überlegung 5) SEO-Strategie und Best Practices

Suchmaschinenoptimierung (SEO) stellt sicher, dass technische Artikel auf den Suchergebnisseiten (SERPs) von Suchmaschinen gut ranken und Entwickler erreichen, die nach Lösungen suchen.

1. Mehrsprachiges und globales SEO

Die Website konzentrierte sich ursprünglich auf die japanische Leserschaft und wurde dann auf eine zweisprachige Architektur (Englisch/Japanisch) umgestellt, um ein breiteres globales technisches Publikum zu erreichen.
Korrekte „lang“-Attribute im „ “-Stammverzeichnis konfiguriert und reziproke „ `-Tags implementiert, um Google dabei zu helfen, die korrekte lokalisierte Seite bereitzustellen.
Bereitstellung verschiedener XML-Sitemaps („sitemap.xml“ und „sitemap_en.xml“) für eine umfassende Such-Crawler-Erkennung.

2. Bildoptimierung

Angestrebt wurde eine optimale Inhaltsbreite von 786 Pixel mit responsiven Abmessungen.
Verwendetes JPG für komplexe Fotomedien und komprimiertes PNG/SVG für technische Architekturdiagramme.
Kontinuierlich überwachte Google PageSpeed Insights, um Core Web Vitals Layout Shifts (CLS) zu minimieren und schnelles Largest Contentful Paint (LCP) sicherzustellen.

3. Semantische HTML- und Tag-Optimierung

Korrekte Überschriftenhierarchien wurden beibehalten und benutzerdefinierte Open Graph Protocol (OGP)-Meta-Tags (Titel, Beschreibung, Bild, URL) genutzt, um die Vorschau von Social-Cards auf X (Twitter) und Slack zu optimieren.
Optimierte Navigationsstruktur in einem einzigen semantischen „
“-Container für saubere Zugänglichkeit und Crawlbarkeit durch Screenreader.

Jeder Beitrag ist mit Schaltflächen zum schnellen Teilen in sozialen Netzwerken ausgestattet (X, Hatena-Lesezeichen und native URL-Kopie), um die Entwickler-Syndizierung und -Diskussion zu fördern.

5. Permalink-Optimierung

Standardisierte, saubere, alphanumerische permanente Slugs, um Probleme mit der URL-Prozentkodierung zu verhindern und die Integrität der Crawling-Indizierung zu gewährleisten.

Zusammenfassung

Durch die Kombination der Einfachheit statischer Sites (Pandoc + Python) mit Firebase Hosting und automatisiertem Cloud Build CI/CD erreicht der Blog nahezu keine laufenden Kosten, Ladezeiten von weniger als einer Sekunde und eine absolut zuverlässige Zuverlässigkeit sowohl für japanische als auch für englische Zielgruppen.