Die Webentwicklung ist heutzutage so kompliziert geworden, weil Tausende neue Möglichkeiten geschaffen wurden, dasselbe zu tun. In den Anfängen der Webentwicklung verfügte er über PHP und jQuery, die so ziemlich alles konnten, was wir brauchten. Aber nun ja, die Dinge haben sich geändert.

Lange Rede, kurzer Sinn

Also suchte ich nach einer Möglichkeit, meine persönliche Website zu erstellen. Das hätte ein paar Blogs und die Präsentation meines Projekts gehabt, das war's, keine große Sache, oder? Nun ja, obwohl es auch das Gleiche ist. Mein erster Gedanke war also, diese als meinen Tech-Stack zu verwenden

• Reagieren
• Firebase/Supabase
• Tailwind CSS
• Cloudflare-Seiten zur Bereitstellung

Nun, das könnte das Happy End sein, aber... ?

Wie ich bereits gesagt habe, brauche ich einen Blog-Bereich und ironischerweise passen Blogs und Reagieren nicht gut zusammen. Da React im Wesentlichen für die Erstellung von WebApps und nicht für inhaltsgesteuerte Websites gedacht ist. Nun für diejenigen, die nicht wissen, warum, hier eine Zusammenfassung von chatGPT

Warum React nicht für inhaltsgesteuerte Websites geeignet ist

ChatGPT sagte:

React ist vor allem deshalb nicht ideal für inhaltsgesteuerte Websites, weil es auf clientseitigem Rendering basiert, was sich negativ auf SEO und anfängliche Seitenladezeiten auswirken kann. Inhaltsgesteuerte Websites profitieren vom serverseitigen Rendering (SSR) oder der statischen Site-Generierung (SSG), die React nicht standardmäßig übernimmt. Tools wie Next.js oder Gatsby, die React erweitern, sind für diese Anforderungen besser geeignet.

Nächstes Ziel: NextJs

Nun, es ist offensichtlich, dass ich SSR für eine Blog-Site benötige, da ich eine gute Indexierung durch Suchmaschinen und eine professionelle Linkvorschau für soziale Medien wollte. NextJs könnte mir beides bieten, aber es gibt immer noch ein Problem, und es ist eher ein persönliches.

Sehen Sie, ich habe die Nutzung von Cloudflare-Seiten schon immer geliebt und wollte dabei bleiben. Außerdem wollte ich, dass das kostenlose E-Mail-Routing von Cloudflare eine benutzerdefinierte E-Mail-Adresse an meine Domain anfügt, um so die Kosten zu senken.

NextJS bei Cloudflare

Ich habe versucht, die nextJS-Site über die offizielle Dokumentation auf Cloudflare-Seiten bereitzustellen. Nun ja, es lief nicht gut. Ich konnte dort keine Bereitstellung durchführen. Ich habe stundenlang versucht, eine Lösung zu finden, aber nichts hat funktioniert. Sagen wir einfach, dass nextJS und Cloudflare für mich nicht gut zusammenpassten. Wenn also jemand von Vercel oder Cloudflare dies liest, korrigiert mich, falls ich etwas übersehe.

Nun, zu diesem Zeitpunkt war ich hoffnungslos und die letzte Option, die ich hatte, war SSG.

Nächste Lösung: SSG

Jetzt ist SSG gut und ich verstehe die Bedeutung hier. Das Problem ist, dass ich noch nie mit SSG gearbeitet habe und es mehrere Durchwege gibt. Es gibt Dinge wie Hugo, Gatsby, Astro bla bla. Und wahrscheinlich noch mehr. Nun kannte ich keines davon und war zu diesem Zeitpunkt so frustriert, dass ich nicht bereit war, ein bisschen in die Erlernung eines neuen Tools für eine einfache Blog-App zu investieren. Also dachte ich mir, scheiß drauf, ich mache mein eigenes Ding.

Erstellen meines eigenen statischen Site-Generators.

Einige Gründe, warum ich mich entschieden habe, meinen eigenen statischen Site-Generator zu entwickeln

1. Ich war frustriert (natürlich lol)
2. Da ich mein eigenes Tool für mein eigenes Ding erstelle, habe ich die volle Kontrolle darüber, wie die Seiten generiert werden. Wie werden sie aussehen?
3. Ich erfinde gerne neu.
4. Ich hatte freie Zeit.

Der Plan

Der Plan sah vor, eine Website auf altmodische Weise zu erstellen. Separate Artikel haben ihre eigenen HTML-Seiten.

Hier ist die vollständige Übersicht:

1. Ich werde über Palin-Markdown-Dateien schreiben
2. Verwenden Sie Python, um den Markdown in einfaches HTML zu analysieren
3. Ich werde bereits eine Vorlage haben, in die verschiedene Abschnitte dynamisch eingefügt werden.
4. Außerdem werde ich eine Konfigurationsdatei haben, die dem Artikel entspricht. Die Dateihierarchie wird also ungefähr so ​​aussehen

articles/
├── art-1
│   ├── art.md
│   └── config.json
├── art-2
│   ├── art.md
│   └── config.json
├── art-3
│   ├── art.md
│   └── config.json
└── art-4
    ├── art.md
    └── config.json

Daher verfügt jeder Beitrag über einen eigenen Ordner und der Ordner enthält die Dateien config.json und art.md. Das Python-Skript übernimmt die template.html und fügt dynamische Inhalte in diese HTML-Vorlage ein, beispielsweise den Titel des Beitrags. Slug, Miniaturansichten aus der Konfigurationsdatei und Hauptartikel aus der analysierten Markdown-Datei. Am wichtigsten ist, dass es dynamisch Meta-Tags für SEO und soziale Medien generiert. Anschließend werden die Änderungen in eine Datei namens art/.html geschrieben, sodass der Beitragslink example.com/art/slug lautet.

Wie wurde es integriert?

Nun, ich habe eine CLI-Schnittstelle für die Interaktion mit dem Generator entwickelt. Ich habe es fit genannt, wie Sie wissen, in F it. Es verfügt über die folgenden Befehle oder Optionen:

$ ./fit --help
fit: also known has f**k it build system
A build system for my personal site developed by Shazin

USAGE
     fit 
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload   Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

Bereitstellungsmechanismus

Also, wie gesagt, ich wollte Cloudflare-Seiten für die Bereitstellung verwenden. Im Grunde habe ich einen Zweig namens „prod“ erstellt und bei jeder Ausführung des Befehls „./fitploy“ alle erforderlichen Dateien in den Zweig „prod“ kopiert und die Änderungen an Github übertragen. Anschließend erstellt Cloudflare die Änderungen automatisch und stellt sie erneut bereit.

Übergabe von Bildern

Um Bilder oder statische Dateien zu verarbeiten, die ich im Firebase-Speicher verwendet habe, öffnet der ./fit-Uploader einen GTK-basierten GUI-Uploader, von dem aus ich ein Bild hochladen kann, und er gibt mir die öffentliche URL, die ich dann eingeben kann kopieren, so sieht es aus:

Upload-Schnittstelle

Post-Upload-Schnittstelle

CLI-Schnittstelle

Es gibt auch eine CLI-Schnittstelle, die von ./fit upload veröffentlichen oder bearbeiten.

Dynamischer Umgebungshintergrund

Also dachte ich, wenn ich derjenige bin, der sich selbst um den Bau und die Generierung kümmert, kann ich auf jeden Fall ein paar coole Sachen damit machen, also habe ich jedem Beitrag einen dynamischen farbigen Umgebungshintergrund hinzugefügt. Die Idee bestand darin, eine durchschnittliche Farbe aus dem Miniaturbild auszuwählen, diese dann abzudunkeln und als Hintergrund zu verwenden. Ich habe auch eine Primärfarbe für die Links und Schaltflächen aus dem Miniaturbild ausgewählt und ehrlich gesagt sieht es wirklich cool aus, hier ist ein Screenshot

Kommentare und Diskussion

Da ich grundsätzlich mit keiner Datenbank oder überhaupt keinem Backend-Dienst gearbeitet habe, musste ich dafür einen externen Dienst wählen und was sonst kann das besser als Disqus.

Hat es sich gelohnt?

Nun, um ehrlich zu sein, wie gesagt, ich habe ein paar freie Tage verbracht, also hat es sich auf jeden Fall gelohnt, und ich habe nicht lange gebraucht, um ehrlich zu sein, ich habe 2-3 Tage für dieses gesamte Projekt aufgewendet und es hat wirklich Spaß gemacht, etwas Kreatives zu bauen.

Zusammenfassung

Ich hatte also wirklich viel Spaß mit diesem Projekt und werde hoffentlich weitere Verbesserungen vornehmen und weitere Funktionen hinzufügen. Im Moment ist es so einfach und einfach, was ich wollte. Wenn Ihnen dieses Projekt gefällt oder Sie möchten, dass ich es als Open Source zur Verfügung stelle, lassen Sie es mich bitte wissen. Oh, und hier ist der Link zu der Seite, über die ich geschrien habe: shazin.me Danke fürs Lesen.