sveltekit static blog template

Modèle de blog statique sveltekit

Un modèle léger et personnalisable pour les blogs et les sites Web de portefeuille, construits avec Sveltekit.

Il a été construit en pensant à quelques buts:

• Conception réactive: le site Web semble et se comporte bien sur les écrans de toutes tailles;
• Rapide: il ne charge que ce qui est nécessaire pour qu'il fonctionne;
• Adaptif: il prend en charge le mode Dark à partir de la plupart des systèmes d'exploitation par défaut (bureau et mobile);
• Pretty: Ayez un design agréable à la fois accessible et agréable à l'œil.

Je l'ai réalisé avec l'aide de Sveltekit. Il n'y a presque pas de fonctionnement JavaScript, et cela fonctionne en fait avec JS Disabled! Bien que JS soit génial, il est important de savoir quand ce n'est pas nécessaire.

Site de démonstration

Vous pouvez voir le modèle en direct sur le site de démonstration. De plus, vous pouvez vérifier tous les composants isolément sur l'histoire.

Bâtiment et course localement

Pour l'exécuter localement, il vous suffit de courir:

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

Le site devrait désormais être disponible sur http: // localhost: 5173 / sur votre machine locale, et l'adresse IP de votre machine locale sur votre réseau - grand pour tester sur les OS mobiles.

HISTORE / STERYbook

J'ai utilisé Histoire, une alternative de livre de contes basé sur Vite pour pouvoir voir et développer des composants isolément. Pour l'ouvrir, exécutez npm run story:dev .

Optimisation d'image

Ce site Web utilise la transmutation d'image pour optimiser automatiquement les images utilisées dans le site. Cela signifie que même si vous utilisez des formats d'image non optimaux (comme les PNG sans perte), il passera en revue les images et convertira des images en webp et avif pour vous, tant que vous utiliserez le composant <Image /> au lieu de <img /> . Cela se fait sur Build, donc il ne change rien lors de l'exécution du site Web localement.

Gestion des postes

Tous les articles sont des fichiers de marque qui sont traités avec MDSVEX pour permettre l'utilisation de composants Svelte à l'intérieur. Afin de faciliter la gestion des messages, je recommande fortement l'extension Front Matter vs Code, qui vous donne une belle interface utilisateur de type CMS.

Hébergement

Lorsque vous exécutez npm run build , le site Web sera compilé dans un site statique, ce qui signifie que vous pouvez l'héberger à peu près n'importe où. Certaines alternatives gratuites que je recommande sont les pages GitHub, Vercel et Netlify.