Los sitios estáticos son cada vez más populares debido a su velocidad, seguridad y sencillez. Cuando se trata de construir sitios estáticos, existen varias herramientas y frameworks, pero uno que está ganando adeptos rápidamente es SvelteKit.
Esta guía te lleva a través de la creación de un sitio estático con SvelteKit, desde la configuración hasta el despliegue con el Alojamiento de Sitios Estáticos de Kinsta, de forma gratuita.
¿Qué Es SvelteKit?
SvelteKit es un robusto framework web diseñado para crear interfaces de usuario, incluyendo sitios estáticos. Es conocido por su rendimiento, simplicidad y capacidad para crear componentes con un enfoque declarativo.
SvelteKit amplía las capacidades del framework Svelte añadiendo enrutamiento, renderización del lado del servidor y mucho más.
Primeros Pasos con SvelteKit
Para seguir esta guía, asumimos que tienes:
- Conocimientos básicos de HTML, CSS y JavaScript.
- Conocimientos básicos de Svelte.
- Node.js y npm instalados en tu ordenador.
Para crear tu nueva aplicación SvelteKit, sigue los pasos que se indican a continuación.
- Crea un nuevo proyecto ejecutando:
npm create svelte@latest my-appEste comando crea un nuevo proyecto en el directorio my-app y te pide que configures algunas herramientas básicas, como TypeScript. Asegúrate de elegir la opción Proyecto esqueleto ( Skeleton project) y cambia my-app por el nombre que prefieras para tu proyecto.
- Navega hasta el directorio del proyecto e instala sus dependencias:
cd my-app
npm install- Ejecuta
npm run devpara iniciar el servidor de desarrollo local enlocalhost:5173.
Comprendiendo la Estructura de Archivos de SvelteKit
Cuando abras tu proyecto en un editor de código, verás la siguiente estructura. Comprender esta estructura es crucial, ya que te ayuda a organizar tu código de forma eficaz.
/
|-- /src
|-- /lib
|-- /routes
|-- +page.svelte
|-- app.html
|-- /static
|-- svelte.config.js- /src: Es el corazón de tu proyecto y contiene varios subdirectorios y archivos:
- /lib: Este directorio alberga bibliotecas, utilidades o módulos personalizados. Es un buen lugar para almacenar código reutilizable que pueda usarse en toda tu aplicación.
- /routes: El directorio routes es crucial para definir las distintas páginas o vistas de tu aplicación. Cada página está representada por un archivo .svelte, como +page.svelte. Estos archivos .svelte contienen los componentes, la lógica y los estilos específicos de esa página.
- app.html: Este archivo sirve como punto de entrada de tu aplicación. Es donde se define la estructura principal de tu página web.
- /static: Este directorio se utiliza para almacenar activos estáticos, como imágenes, fuentes o cualquier archivo que no necesite ser procesado por tu aplicación. Estos activos pueden ser referenciados directamente en tus componentes HTML y Svelte.
- svelte.config.js: Este archivo de configuración te permite personalizar varios aspectos de tu proyecto SvelteKit. Puedes utilizarlo para configurar la renderización del lado del servidor, definir diseños personalizados, etc.
Enrutamiento en SvelteKit
Una de las características más destacadas de SvelteKit es su sistema de enrutamiento. Sigue un enfoque basado en un sistema de archivos, en el que las rutas URL se definen mediante archivos y carpetas en el directorio src/routes, lo que lo hace intuitivo y fácil de gestionar.
En SvelteKit, cada archivo correspondiente a una ruta debe llamarse +page.svelte. Por ejemplo, el archivo de índice de tu sitio SvelteKit se encuentra en la carpeta de rutas y se llama +page.svelte.
Añade el siguiente código a este archivo para crear la página de inicio:
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting/">
<div class="btn">Read more</div>
</a>
</div>
<style>
.home_hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6e7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width: 700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}
</style>Para crear una ruta anidada en SvelteKit, por ejemplo, una página de información accesible en localhost:5173/about, necesitas crear una carpeta dentro de la carpeta routes con un nombre que represente la ruta URL. Dentro de esa carpeta, crea un archivo +page.svelte que se renderizará para la ruta.
Añade el siguiente código a routes/about/+page.svelte:
<div class="about_cont">
<h2>About</h2>
<div class="about_info">
<div class="about_text">
<p>
Kinsta allows you to{' '}
<a> href="https://kinsta.com/static-site-hosting/">
host up to 100 static websites
</a>{' '}
for free. This can be done by pushing your code to your preferred Git provider
(Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.
</p>
<p>
As an alternative to Static Site Hosting, you can opt for deploying your
static site with Kinsta’s{' '}
<a> href="https://kinsta.com/application-hosting/">
Application Hosting
</a>
, which provides greater hosting flexibility, a wider range of benefits,
and access to more robust features. For example, scalability, customized
deployment using a Dockerfile, and comprehensive analytics encompassing real-time
and historical data.
</p>
</div>
<iframe> width="560" height="315" src="https://www.youtube.com/embed/H7CNbsda8OA?si=40FGVlNvJ74_6hlj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</div>
</div>
<style>>
.about_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.about_info {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
}
.about_text {
flex-basis: 50%;
}
.about_text p {
margin-bottom: 20px;
font-size: 18px;
}
.about_img {
flex-basis: 50%;
width: 200px;
border-radius: 10px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
.about_img {
width: 100%;
}
}
</style>Cualquier estilo que añadas a tu componente Svelte es de ámbito limitado y no afectará a otros componentes.
Es esencial comprender que SvelteKit gestiona la navegación entre páginas utilizando elementos estándar de <a>, lo que hace que el proceso de navegación sea intuitivo. No es necesario importar componentes adicionales como <Link>, como se requiere en React. En la próxima sección, vamos a crear un componente de Navegación que se añadirá a cada página.
Para el proyecto actual, la estructura de rutas tiene este aspecto:
|-- /src
|-- /routes
|-- /about
|-- +page.svelte
|-- +page.svelteUso de Componentes en SvelteKit
Para que tu código sea más modular, puedes crear componentes e importarlos a tus páginas. Por ejemplo, puedes crear un componente Navbar.svelte en la carpeta routes:
<nav>
<a href="/">
<img src="/kinsta-logo.png" alt="" class="logo-img" />
</a>
<div class="nav-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/posts">Posts</a>
</div>
</nav>A continuación, impórtalo en la página de inicio +page.svelte de esta forma:
<script>>
import Navbar from './Navbar.svelte'
</script>
<Navbar />
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting">
<div> class="btn">Read more</div>
</a>
</div>
<style>
/* CSS styles */
</style>Para componentes globales como Navbar y Footer, que se utilizan en varios archivos, créalos en la carpeta src/lib para evitar largas rutas de importación. Cuando crees componentes o módulos dentro de la carpeta lib, puedes importarlos cómodamente a cualquier componente utilizando el alias de importación $lib:
<script>
import Navbar from '$lib/Navbar.svelte'
</script>Para utilizar componentes independientes, por ejemplo, supongamos que necesitas un componente sólo para la página Acerca de, créalo dentro de la ruta routes/about, y luego impórtalo en la página.
Para este proyecto, también puedes crear un componente Footer en la carpeta lib y añadir este código:
<div class="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>A continuación, impórtalo en todas las páginas.
Utilizar el Diseño en SvelteKit
Para evitar importar componentes en muchas páginas, SvelteKit te permite definir diseños para tus páginas utilizando archivos +layout.svelte.
Crear un diseño que se aplique a todas las páginas es sencillo. Crea un archivo llamado src/routes/+layout.svelte y personalízalo con el marcado, los estilos y el comportamiento deseados. El requisito fundamental es incluir un elemento <slot/> para alojar el contenido de la página.
Por ejemplo, puedes integrar los componentes Navbar y Footer dentro de este diseño:
<script>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
</script>
<div class="layout">
<Navbar />
<slot />
<Footer />
</div>El elemento <slot> permite insertar el contenido de cada página en la maqueta.
Las maquetaciones también pueden anidarse para páginas concretas. Por ejemplo, si tienes una página /dashboard con páginas anidadas como /profile y /settings, puedes crear una maquetación especial:
|-- /dashboard
|-- /profile
|-- +page.svelte
|-- /settings
|-- +page.svelte
|-- +layout.svelteNavegación Programática en SvelteKit
SvelteKit proporciona una función goto para la navegación programática. Por ejemplo, para navegar a la página /dashboard tras una acción de inicio de sesión:
<script>
import { goto } from '$app/navigation';
async function login() {
// Perform login action
goto('/dashboard');
}
</script>Estilización en SvelteKit
SvelteKit admite CSS tradicional para dar estilo a tus páginas. Los estilos pueden definirse dentro de tus componentes Svelte utilizando la etiqueta <style>, o puedes optar por enlazar hojas de estilo externas.
Puede que notes que los componentes Navbar y Footer carecen de estilos específicos. Para solucionar esto, es una buena práctica aplicar estilos globales. Esto se puede conseguir creando un archivo CSS dentro de la carpeta src e impórtalo a tu archivo root de diseño.
Para una mejor organización, crea una carpeta de estilos dentro del directorio src. Esta carpeta puede albergar todos tus estilos. Como parte de este proyecto, crea un archivo global.css en la carpeta styles y añade el siguiente código:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: center;
margin: 100px 0 20px;
}A continuación, puedes importar el archivo CSS en tu archivo de diseño para que sea global y funcione para todos los archivos:
<script>>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
import '../styles/global.css';
</script>Cargar Datos con SvelteKit
Cuando trabajas con SvelteKit, a menudo necesitas cargar datos en tus diseños, páginas y componentes. Estos datos pueden proceder de API externas, bases de datos o tu servidor local. Para gestionar esto, puedes utilizar un archivo +page.js para las páginas y +layout.js para los diseños.
En tu proyecto SvelteKit, un archivo +page.svelte puede tener un hermano +page.js que exporte una función de carga. El valor de retorno de esta función se pone a disposición de la página a través de la prop data. Veamos un ejemplo: supongamos que quieres crear una ruta para obtener una lista de entradas de la API de JSON Placeholder.
Para cargar los datos de la API, crea un archivo +page.js dentro de la carpeta posts. Este archivo exporta una función load.
export const load = async () => {
const title = "Hello World";
return {
title,
};
};Se espera que la función load devuelva un objeto, que se proporciona como props al archivo +page.svelte. A continuación, se puede acceder al valor title con la prop data:
<script>>
export let data;
const title = data.title;
</script>
<div class="blog_cont">
<h2>{title}</h2>
</div>Ahora, pasemos a interactuar con la API JSON Placeholder. Para ello, puedes utilizar la API JavaScript Fetch, pero SvelteKit ofrece su propio método fetch que puedes utilizar para recuperar datos de tus endpoints de la API antes de renderizar una página:
export const load = async (loadEvent) => {
const { fetch } = loadEvent;
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=10'
);
const posts = await response.json();
return {
posts,
};
};En el código anterior, extraemos el método fetch de loadEvent y realizamos la solicitud a la API. A continuación, la respuesta se envía como props a la página Posts, que la recorre en bucle y muestra todas las entradas:
<script>
export let data;
const posts = data.posts;
</script>
<div class="blog_cont">
<h2>Posts</h2>
<div class="blog_grid">
{#each posts as post}
<a href={`/posts/${post.id}`} class="blog_card">
<h3>{post.title}</h3>
<p>
{post.body}
</p>
</a>
{/each}
</div>
</div>
<style>
.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all 0.5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}
</style>Este es el aspecto del árbol de archivos actual:
|-- /src
|-- /lib
|-- Footer.svelte
|-- Navbar.svelte
|-- /routes
|-- /about
|-- +page.svelte
|-- /posts
|-- +page.js
|-- +page.svelte
|-- +page.svelte
|-- +layout.svelte
|-- /styles
|-- global.cssRutas Dinámicas con SvelteKit
Ahora tienes 10 entradas mostradas en tu página de entradas; si quieres crear una página individual para cada entrada, la mejor forma de hacerlo es crear una ruta dinámica.
Para ello, necesitas recibir el valor del slug de la ruta y utilizarlo como parámetro para consultar la entrada. En SvelteKit, puedes hacerlo creando una carpeta de corchetes con el nombre del parámetro. Así es como puedes configurar páginas de entradas individuales:
- Crea una carpeta [postid] dentro de la carpeta posts. El [postid] representa el parámetro dinámico que puede contener valores como IDs de post o slugs.
- En la carpeta [postid], crea dos archivos:
- +page.svelte: Este archivo definirá el diseño y la estructura de las páginas individuales de tus entradas.
- +page.js: Este archivo JavaScript gestionará la obtención de datos y la lógica específica de cada entrada.
En el archivo +page.js, recupera el parámetro postid de la ruta y utilízalo para consultar la entrada específica:
export const load = async (loadEvent) => {
const { fetch, params } = loadEvent;
const { postid } = params;
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postid}`
);
const post = await response.json();
return {
post,
};
};A continuación, puedes acceder a data como prop en el archivo +page.svelte:
<script>>
export let data;
const post = data.post;
</script>
<div>
<div class="blog_content">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
</div>
<style>>
.blog_content h3 {
font-size: 40px;
margin-bottom: 20px;
text-align: center;
}
</style>Puedes consultar el código fuente completo de este proyecto SvelteKit en GitHub. También puedes consultar la documentación oficial de SvelteKit para obtener más información.
Desplegar Sitios Estáticos SvelteKit con Kinsta
Kinsta te permite alojar hasta 100 sitios web estáticos de forma gratuita directamente desde tu proveedor Git preferido (Bitbucket, GitHub o GitLab).
Antes de lanzar tu sitio SvelteKit, es importante adaptarlo a tu objetivo de despliegue. En este proyecto concreto, nos centraremos en utilizar el alojamiento de sitios estáticos de Kinsta, lo que requiere configurar SvelteKit como generador de sitios estáticos (SSG).
A continuación te explicamos cómo obtener tu sitio pre-renderizado como una colección de archivos estáticos:
- Instala el @sveltejs/adapter-static ejecutando el siguiente comando:
npm i -D @sveltejs/adapter-static- A continuación, adapta tu archivo svelte.config.js sustituyendo
adapter-autopor unfallbacka404.html:
import adapter from '@sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter({ fallback: '404.html' }),
},
};
export default config;Ahora, envía tus códigos a tu proveedor Git preferido. A continuación, sigue estos pasos para desplegar tu sitio estático en Kinsta:
- Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
- Autoriza a Kinsta con tu proveedor Git.
- Haz clic en Sitios Estáticos en la barra lateral izquierda, y luego en Añadir sitio.
- Selecciona el repositorio y la rama desde la que deseas desplegar.
- Asigna un nombre único a tu sitio.
- Añade la configuración de construcción en el siguiente formato:
- Comando de construcción:
npm run build - Versión del nodo:
18.16.0 - Directorio de publicación:
build
- Comando de construcción:
- Por último, haz clic en Crear sitio.
Y ya está En pocos segundos tendrás un sitio desplegado. Se proporciona un enlace para acceder a la versión desplegada de tu sitio. Si lo deseas, puedes añadir más adelante tu dominio personalizado y tu certificado SSL.
Como alternativa al alojamiento de sitios estáticos, puedes optar por desplegar tu sitio estático con el Alojamiento de Aplicaciones de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama más amplia de ventajas y acceso a funciones más robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile, y análiticas completas que abarcan datos históricos y en tiempo real.
Resumen
Esta guía ha explicado el proceso de creación de un sitio estático con SvelteKit. Desde la configuración de tu entorno de desarrollo hasta el despliegue, ahora tienes los conocimientos necesarios para crear sitios estáticos de alto rendimiento con facilidad.
Construir sitios estáticos con SvelteKit ofrece la mezcla perfecta de rendimiento y simplicidad, garantizando que tus proyectos web brillen en Internet.
Ahora es el momento de poner tus conocimientos en acción y empezar a construir tu propio sitio estático con SvelteKit. ¿Has utilizado SvelteKit en el pasado? No dudes en compartir tus proyectos y experiencias en la sección de comentarios más abajo.
Deja una respuesta