sveltekit static blog template

Plantilla de blog estática SvelteKit

Una plantilla ligera y personalizable para blogs y sitios web de cartera, creada con SvelteKit.

Fue construido con algunos objetivos en mente:

• Diseño responsivo: el sitio web se ve y se comporta bien en pantallas de todos los tamaños;
• Rápido: sólo carga lo necesario para funcionar;
• Adaptativo: admite el modo oscuro de la mayoría de los sistemas operativos de forma predeterminada (escritorio y móvil);
• Bonito: tener un diseño agradable, accesible y agradable a la vista.

Lo logré con la ayuda de SvelteKit. ¡Casi no hay JavaScript ejecutándose y en realidad funciona con JS deshabilitado! Si bien JS es fantástico, es importante saber cuándo no es necesario.

Sitio de demostración

Puede ver la plantilla en vivo en el sitio de demostración. Además, puede comprobar todos los componentes de forma aislada en Histoire.

Construyendo y ejecutando localmente

Para ejecutarlo localmente simplemente debes ejecutar:

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

El sitio ahora debería estar disponible en http://localhost:5173/ en su máquina local y la dirección IP de su máquina local en su red, ideal para realizar pruebas en sistemas operativos móviles.

Historia / Libro de cuentos

He utilizado Histoire, una alternativa de Storybook basada en Vite para poder ver y desarrollar componentes de forma aislada. Para abrirlo, ejecute npm run story:dev .

Optimización de imagen

Este sitio web utiliza transmutación de imágenes para optimizar automáticamente las imágenes utilizadas en el sitio. Esto significa que incluso si usa formatos de imagen no óptimos (como PNG sin pérdida), revisará las imágenes y las convertirá a WebP y AVIF por usted, siempre que use el componente <Image /> en lugar de <img /> . Esto se hace durante la compilación, por lo que no cambia nada cuando se ejecuta el sitio web localmente.

Administrar publicaciones

Todas las publicaciones son archivos Markdown que se procesan con MDsveX para permitir el uso de componentes Svelte dentro de ellas. Para facilitar la administración de publicaciones, recomiendo encarecidamente la extensión Front Matter VS Code, que le brinda una agradable interfaz de usuario similar a un CMS.

Alojamiento

Cuando ejecuta npm run build , el sitio web se compilará en un sitio estático, lo que significa que puede alojarlo prácticamente en cualquier lugar. Algunas alternativas gratuitas que recomiendo son GitHub Pages, Vercel y Netlify.