Scheiß drauf! Ich habe meinen eigenen statischen Site-Generator entwickelt!

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. Dazu hätte es ein paar Blogs und die Präsentation meines Projekts gegeben, 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 Vorschau der Social-Media-Links 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 anhängt, 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, korrigieren Sie mich, wenn 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, auch nur ein bisschen in das Erlernen 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, zum Beispiel 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, Sie wissen schon: 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 <action> <argument>
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-<n>       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload <file_path>  Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

Deployment mechanism

So, like I said I wanted to use Cloudflare pages for deploying. Basically what I've done is I've created a branch called prod and whenever the ./fit deploy command is run it will basically copy all the necessary files to the prod branch and push the changes to github. Then, cloudflare will automatically build and redeploy the changes.

Handing images

In order to handle images or any static files I have used firebase storage, the ./fit uploader will pop open a GTK based GUI uploader from which I can upload an image and it will give me the public url which I can than copy, Here's how it looks:

Upload Interface

Post Upload Interface

CLI Interface

There's also a CLI Interface which can be used by ./fit upload

Dynamic Ambient Bcakground

So, I thought when I am the one handling all the building and generation myself I can definitely do some cool stuffs with it, so I've added a dynamic colored ambient background to each post. The idea was to pick an average color from the thumbnail image and then darken it and use it as the background. I've also picked a primary color for the links and buttons from the thumbnail image as well and honestly to me, it looks really cool, here's an screenshot

Comments and Discussion

Since I was working with basically no database or no backend service at all, I had to choose an external service for this and what else does this better than Disqus .

Was it Worth It?

Well, to be honest like I said I was spending some free times, so yeah it was definitely worth it, and it didn't take me long time to be honest I've spent 2-3 days for this full project and really had fun building something creative.

Wrapping Up

So, I've had really fun experience with this project and will hopefully do more improvements and add more functionalities to it. Right now it's so basic and simple which was what I wanted. If you like this project or want me to open source it please let me know. Oh and here's the link of the site I was screaming about shazin.me Thanks for reading.

Das obige ist der detaillierte Inhalt vonScheiß drauf! Ich habe meinen eigenen statischen Site-Generator entwickelt!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!