hypermedia blog

Hypermedia statischer Bloggenerator

was ist das?

Erstellen eines Blogs mit dem Designmuster "Inseln". Ein SQLite -Datenbank -Backend, das eine statische, moderne Website generiert.

Wie funktioniert es?

Die Skripte schieben sich über die Datenbank durch, die sowohl vollständig gerenderte HTML -Dokumente als auch DOM -Snippets für jede Seite auf der Website erstellen. Nginx liest Anfragen und dient dem einen oder anderen, basierend auf der Existenz des hx-request -Headers. hx-boost wird verwendet, um alle Anker-Tags automatisch zu AJAX-Anfragen zu heben, was die Magie geschieht. Die Antwortdokumente enthalten <title> Tags, die HTMX für eine bessere UX & SEO erkennt und für die Seite gilt.

Screenshots

Posten wiedergegeben

Backend Post Editor

Editor -Metadaten -Markierung

Backend -Kategorie Bearbeitung

Gebäude

Alle Build -Befehle werden mit Bun ausgeführt.

• bun install zieht alle erforderlichen Abhängigkeiten herunter.
• bun edit führt den Backend -Server für die WYSIWYG -Datenbankverwaltung aus.
• bun run init erstellt die dist -Ordnerstruktur und verschiebt die Dateien für die gerenderte Site.
• bun htmx führt das TypeScript aus, um die HTML -Vermögenswerte der Website tatsächlich zu generieren.
• bun css führt die PostCSS -Skripte aus, um das Styling der Site mithilfe von Tailwindscss zu generieren und zu optimieren.
• bun start läuft init, htmx und CSS.

Daten

Der Inhalt der Website wird aus einer 4 -Tabelle -SQLite -Datenbank mit: Posts, Kategorien, Tags und einer relationalen Metadatentabelle generiert, die sie korreliert. Die Datenbanklogik gibt es in: SRC/Models.

Vorlagen

HTML/Schnurrbartvorlagen leben in: SRC/Ansichten

Das Hauptstylesheet ist hier: src/ui/thema.css. Ich weiß, ich benutze Rückenwinde "falsch" hierher.

Domänen

Es gibt 2 Dateien, die die verwendeten globalen Domänen definieren. Einer ist für den Backend Editor der andere den Blog selbst. Sie für //localhost für die HTTP -Fallback -Unterstützung.

Backend Editor

Auf das webbasierte WYSIWYG -Editor kann durch das Ausführen bun edit zugegriffen werden. Der Editor unterstützt das Hinzufügen, Bearbeiten und Entfernen von Beiträgen und deren Meta -Daten sowie die Kategorien und Tags selbst. Der Standardport und Hostname (Localhost: 8999) kann in: src/server.ts geändert werden.

Webserver

Nginx -Beispielkonfigurationen sind im Nginx -Verzeichnis verfügbar. Die einzige wirkliche "Magie" besteht darin, das Root-Verzeichnis über die Existenz des HX-Request-Headers im Beispiel für die von Sites verfügbaren Beispiele anzuhängen.

Status

V1.0 dieses Projekts ist abgeschlossen! Es führt jetzt meinen Blog unter https://blog.xe.ro mit

Todo & Ideen

• Nginx Alternativen (z. B. Caddy)
  • Nginx HX-Header "Root Rewrite" gegen Inline Hx-Get, um URLS-Perf-Tests zu schlucken
• IDK, vielleicht tatsächliches Bloggen? • ͡ ㇁ • ͡

Hintergrund

(Ich habe darüber nachgedacht, dieses Projekt zu nennen.

Referenzen

• https://bun.sh/docs
• https://bun.sh/docs/api/sqlite
• https://tailwindcss.com/docs
• https://tailwindcomponents.com/cheatsheet
• https://htmx.org/docs
• https://htmx.org/api
• https://htmx.org/attributes/hx-push-url
• https://www.nerdfonts.com/cheat-sheet
• https://github.com/janl/mustache.js
• http://mustache.github.io/mustache.5.html

Lizenz

Alle Dateien in diesem Repo, einschließlich des Inhalts meines Blogs, werden CC0 / Kopimi veröffentlicht! Im Geiste der Informationsfreiheit ermutige ich Sie, mit diesem Projekt zu gabeln, zu ändern, zu verändern, zu teilen oder zu tun, was Sie mögen! ^c^v