sveltekit static blog template

Statische Blog-Vorlage von SvelteKit

Eine leichte und anpassbare Vorlage für Blogs und Portfolio-Websites, erstellt mit SvelteKit.

Es wurde mit folgenden Zielen gebaut:

• Responsive Design: Die Website sieht auf Bildschirmen aller Größen gut aus und verhält sich gut.
• Schnell: Es wird nur das geladen, was zum Funktionieren erforderlich ist.
• Adaptiv: Es unterstützt standardmäßig den Dunkelmodus der meisten Betriebssysteme (Desktop und Mobilgerät);
• Hübsch: Sie haben ein angenehmes Design, das sowohl zugänglich als auch optisch ansprechend ist.

Dies habe ich mit Hilfe von SvelteKit erreicht. Es läuft fast kein JavaScript und es funktioniert tatsächlich, wenn JS deaktiviert ist! Obwohl JS großartig ist, ist es wichtig zu wissen, wann es nicht benötigt wird.

Demo-Site

Sie können die Vorlage live auf der Demoseite sehen. Darüber hinaus können Sie in Histoire alle Komponenten isoliert überprüfen.

Lokal aufbauen und betreiben

Um es lokal auszuführen, müssen Sie einfach Folgendes ausführen:

 # First, install dependencies
npm install
# Then, run it on dev mode
npm run dev

Die Site sollte jetzt unter http://localhost:5173/ auf Ihrem lokalen Computer und der IP-Adresse Ihres lokalen Computers in Ihrem Netzwerk verfügbar sein – ideal zum Testen auf mobilen Betriebssystemen.

Geschichte / Märchenbuch

Ich habe Histoire verwendet, eine auf Vite basierende Storybook-Alternative, um Komponenten isoliert sehen und entwickeln zu können. Um es zu öffnen, führen Sie npm run story:dev aus.

Bildoptimierung

Diese Website nutzt die Bildtransmutation, um die auf der Website verwendeten Bilder automatisch zu optimieren. Das bedeutet, dass selbst wenn Sie nicht optimale Bildformate (wie verlustfreie PNGs) verwenden, die Bilder überprüft und für Sie in WebP und AVIF konvertiert werden, solange Sie die <Image /> Komponente anstelle von <img /> verwenden. <img /> . Dies erfolgt beim Erstellen, sodass sich beim lokalen Ausführen der Website nichts ändert.

Beiträge verwalten

Alle Beiträge sind Markdown-Dateien, die mit MDsveX verarbeitet werden, um die Verwendung von Svelte-Komponenten darin zu ermöglichen. Um die Verwaltung von Beiträgen zu vereinfachen, empfehle ich dringend die Erweiterung Front Matter VS Code, die Ihnen eine schöne CMS-ähnliche Benutzeroberfläche bietet.

Hosting

Wenn Sie npm run build ausführen, wird die Website zu einer statischen Site kompiliert, was bedeutet, dass Sie sie praktisch überall hosten können. Einige kostenlose Alternativen, die ich empfehle, sind GitHub Pages, Vercel und Netlify.