{"id":71254,"date":"2023-11-04T11:02:10","date_gmt":"2023-11-04T10:02:10","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=71254&#038;preview=true&#038;preview_id=71254"},"modified":"2023-11-16T09:52:22","modified_gmt":"2023-11-16T08:52:22","slug":"estatico-sveltekit","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/","title":{"rendered":"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit"},"content":{"rendered":"<p>Los sitios est\u00e1ticos son cada vez m\u00e1s populares debido a su velocidad, seguridad y sencillez. Cuando se trata de construir sitios est\u00e1ticos, existen varias herramientas y frameworks, pero uno que est\u00e1 ganando adeptos r\u00e1pidamente es <a href=\"https:\/\/kinqsta.com\/es\/blog\/svelte-generador-de-sitios-estaticos\/#1-sveltekit\">SvelteKit<\/a>.<\/p>\n<p>Esta gu\u00eda te lleva a trav\u00e9s de la creaci\u00f3n de un <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-un-sitio-web-estatico\/\">sitio est\u00e1tico<\/a> con SvelteKit, desde la configuraci\u00f3n hasta el despliegue con el <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Alojamiento de Sitios Est\u00e1ticos de Kinsta<\/a>, de forma gratuita.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105526 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-static-site-demo.gif\" alt=\"Demostraci\u00f3n del sitio est\u00e1tico SvelteKit.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Demostraci\u00f3n del sitio est\u00e1tico SvelteKit.<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>\u00bfQu\u00e9 Es SvelteKit?<\/h2>\n<p><a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">SvelteKit<\/a> es un robusto framework web dise\u00f1ado para crear interfaces de usuario, incluyendo sitios est\u00e1ticos. Es conocido por su rendimiento, simplicidad y capacidad para crear componentes con un enfoque declarativo.<\/p>\n<p>SvelteKit ampl\u00eda las capacidades del framework Svelte a\u00f1adiendo enrutamiento, renderizaci\u00f3n del lado del servidor y mucho m\u00e1s.<\/p>\n<h3>Primeros Pasos con SvelteKit<\/h3>\n<p>Para seguir esta gu\u00eda, asumimos que tienes:<\/p>\n<ul>\n<li>Conocimientos b\u00e1sicos de <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a>, <a href=\"https:\/\/kinqsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> y <a href=\"https:\/\/kinqsta.com\/javascript\/\">JavaScript<\/a>.<\/li>\n<li>Conocimientos b\u00e1sicos de <a href=\"https:\/\/kinqsta.com\/es\/blog\/svelte-vs-react\/\">Svelte<\/a>.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js y npm<\/a> instalados en tu ordenador.<\/li>\n<\/ul>\n<p>Para crear tu nueva aplicaci\u00f3n SvelteKit, sigue los pasos que se indican a continuaci\u00f3n.<\/p>\n<ol start=\"1\">\n<li>Crea un nuevo proyecto ejecutando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm create svelte@latest my-app<\/code><\/pre>\n<p>Este comando crea un nuevo proyecto en el directorio <code>my-app<\/code> y te pide que configures algunas herramientas b\u00e1sicas, como <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-typescript\/\">TypeScript<\/a>. Aseg\u00farate de elegir la opci\u00f3n Proyecto esqueleto ( Skeleton project) y cambia <code>my-app<\/code> por el nombre que prefieras para tu proyecto.<\/p>\n<ol start=\"2\">\n<li>Navega hasta el directorio del proyecto e instala sus dependencias:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-app\nnpm install<\/code><\/pre>\n<ol start=\"3\">\n<li>Ejecuta <code>npm run dev<\/code> para iniciar el servidor de desarrollo local en <code>localhost:5173<\/code>.<\/li>\n<\/ol>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105526 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-skeleton-site.png\" alt=\"Sitio esqueleto de SvelteKit.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Sitio esqueleto de SvelteKit.<\/figcaption><\/figure>\n<h2>Comprendiendo la Estructura de Archivos de SvelteKit<\/h2>\n<p>Cuando abras tu proyecto en un editor de c\u00f3digo, ver\u00e1s la siguiente estructura. Comprender esta estructura es crucial, ya que te ayuda a organizar tu c\u00f3digo de forma eficaz.<\/p>\n<pre><code class=\"language-bash\">\/\n|-- \/src\n    |-- \/lib\n    |-- \/routes\n        |-- +page.svelte\n    |-- app.html\n|-- \/static\n|-- svelte.config.js<\/code><\/pre>\n<ul>\n<li><strong>\/src:<\/strong> Es el coraz\u00f3n de tu proyecto y contiene varios subdirectorios y archivos:\n<ul>\n<li><strong>\/lib:<\/strong> Este directorio alberga bibliotecas, utilidades o m\u00f3dulos personalizados. Es un buen lugar para almacenar c\u00f3digo reutilizable que pueda usarse en toda tu aplicaci\u00f3n.<\/li>\n<li><strong>\/routes:<\/strong> El directorio routes es crucial para definir las distintas p\u00e1ginas o vistas de tu aplicaci\u00f3n. Cada p\u00e1gina est\u00e1 representada por un archivo <strong>.svelte<\/strong>, como <strong>+page.svelte<\/strong>. Estos archivos <strong>.svelte<\/strong> contienen los componentes, la l\u00f3gica y los estilos espec\u00edficos de esa p\u00e1gina.<\/li>\n<li><strong>app.html:<\/strong> Este archivo sirve como punto de entrada de tu aplicaci\u00f3n. Es donde se define la estructura principal de tu p\u00e1gina web.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static:<\/strong> Este directorio se utiliza para almacenar activos est\u00e1ticos, como im\u00e1genes, fuentes o cualquier archivo que no necesite ser procesado por tu aplicaci\u00f3n. Estos activos pueden ser referenciados directamente en tus componentes HTML y Svelte.<\/li>\n<li><strong>svelte.config.js:<\/strong> Este archivo de configuraci\u00f3n te permite personalizar varios aspectos de tu proyecto SvelteKit. Puedes utilizarlo para configurar la renderizaci\u00f3n del lado del servidor, definir dise\u00f1os personalizados, etc.<\/li>\n<\/ul>\n<h2>Enrutamiento en SvelteKit<\/h2>\n<p>Una de las caracter\u00edsticas m\u00e1s 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 <strong>src\/routes<\/strong>, lo que lo hace intuitivo y f\u00e1cil de gestionar.<\/p>\n<p>En SvelteKit, cada archivo correspondiente a una ruta debe llamarse <strong>+page.svelte<\/strong>. Por ejemplo, el archivo de \u00edndice de tu sitio SvelteKit se encuentra en la carpeta de <strong>rutas<\/strong> y se llama <strong>+page.svelte<\/strong>.<\/p>\n<p>A\u00f1ade el siguiente c\u00f3digo a este archivo para crear la p\u00e1gina de inicio:<\/p>\n<pre><code class=\"language-js\"><!-- src\/routes\/+page.svelte -->\n&lt;div class=\"home_hero\"&gt;\n    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n    &lt;a href=\"https:\/\/sevalla.com\/static-site-hosting\/\"&gt;\n        &lt;div class=\"btn\"&gt;Read more&lt;\/div&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n    .home_hero {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n        text-align: center;\n    }\n    .home_hero h1 {\n        font-size: 60px;\n        width: 70%;\n    }\n    .home_hero p {\n        color: #6e7076;\n        font-size: 20px;\n    }\n    .btn {\n        background-color: #5333ed;\n        padding: 20px 30px;\n        margin-top: 40px;\n        border-radius: 5px;\n        color: #fff;\n    }\n    @media (max-width: 700px) {\n        .home_hero h1 {\n            font-size: 40px;\n        }\n        .home_hero p {\n            font-size: 16px;\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Para crear una ruta anidada en SvelteKit, por ejemplo, una p\u00e1gina de informaci\u00f3n accesible en <code>localhost:5173\/about<\/code>, necesitas crear una carpeta dentro de la carpeta <strong>routes<\/strong> con un nombre que represente la ruta URL. Dentro de esa carpeta, crea un archivo <strong>+page.svelte<\/strong> que se renderizar\u00e1 para la ruta.<\/p>\n<p>A\u00f1ade el siguiente c\u00f3digo a <strong>routes\/about\/+page.svelte<\/strong>:<\/p>\n<pre><code class=\"language-js\">&lt;div class=\"about_cont\"&gt;\n    &lt;h2&gt;About&lt;\/h2&gt;\n    &lt;div class=\"about_info\"&gt;\n        &lt;div class=\"about_text\"&gt;\n            &lt;p&gt;\n                Kinsta allows you to{' '}\n                &lt;a&gt; href=\"https:\/\/sevalla.com\/static-site-hosting\/\"&gt;\n                    host up to 100 static websites\n                &lt;\/a&gt;{' '}\n                for free. This can be done by pushing your code to your preferred Git provider\n                (Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.\n            &lt;\/p&gt;\n            &lt;p&gt;\n                As an alternative to Static Site Hosting, you can opt for deploying your\n                static site with Kinsta\u2019s{' '}\n                &lt;a&gt; href=\"https:\/\/sevalla.com\/application-hosting\/\"&gt;\n                    Application Hosting\n                &lt;\/a&gt;\n                , which provides greater hosting flexibility, a wider range of benefits,\n                and access to more robust features. For example, scalability, customized\n                deployment using a Dockerfile, and comprehensive analytics encompassing real-time\n                and historical data.\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;iframe&gt; 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&gt; &lt;\/iframe&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;&gt;\n    .about_cont h2 {\n        font-size: 40px;\n        margin-bottom: 20px;\n    }\n    .about_info {\n        display: flex;\n        width: 100%;\n        justify-content: space-between;\n        gap: 20px;\n    }\n    @media (max-width: 700px) {\n        .about_info {\n            flex-direction: column;\n        }\n    }\n    .about_text {\n        flex-basis: 50%;\n    }\n    .about_text p {\n        margin-bottom: 20px;\n        font-size: 18px;\n    }\n    .about_img {\n        flex-basis: 50%;\n        width: 200px;\n        border-radius: 10px;\n    }\n    @media (max-width: 700px) {\n        .about_info {\n            flex-direction: column;\n        }\n        .about_img {\n            width: 100%;\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Cualquier estilo que a\u00f1adas a tu componente Svelte es de \u00e1mbito limitado y no afectar\u00e1 a otros componentes.<\/p>\n<p>Es esencial comprender que SvelteKit gestiona la navegaci\u00f3n entre p\u00e1ginas utilizando elementos est\u00e1ndar de <code>&lt;a&gt;<\/code>, lo que hace que el proceso de navegaci\u00f3n sea intuitivo. No es necesario importar componentes adicionales como <code>&lt;Link&gt;<\/code>, como se requiere en <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-react-js\/\">React<\/a>. En la pr\u00f3xima secci\u00f3n, vamos a crear un componente de Navegaci\u00f3n que se a\u00f1adir\u00e1 a cada p\u00e1gina.<\/p>\n<p>Para el proyecto actual, la estructura de rutas tiene este aspecto:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- +page.svelte<\/code><\/pre>\n<h3>Uso de Componentes en SvelteKit<\/h3>\n<p>Para que tu c\u00f3digo sea m\u00e1s modular, puedes crear componentes e importarlos a tus p\u00e1ginas. Por ejemplo, puedes crear un componente <strong>Navbar.svelte<\/strong> en la carpeta <strong>routes<\/strong>:<\/p>\n<pre><code class=\"language-js\"><!-- src\/routes\/Navbar.svelte -->\n&lt;nav&gt;\n    &lt;a href=\"\/\"&gt;\n        &lt;img src=\"\/kinsta-logo.png\" alt=\"\" class=\"logo-img\" \/&gt;\n    &lt;\/a&gt;\n    &lt;div class=\"nav-links\"&gt;\n        &lt;a href=\"\/\"&gt;Home&lt;\/a&gt;\n        &lt;a href=\"\/about\"&gt;About&lt;\/a&gt;\n        &lt;a href=\"\/posts\"&gt;Posts&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n<p>A continuaci\u00f3n, imp\u00f3rtalo en la p\u00e1gina de inicio <strong>+page.svelte<\/strong> de esta forma:<\/p>\n<pre><code class=\"language-js\"><!-- src\/routes\/+page.svelte -->\n&lt;script&gt;&gt;\n    import Navbar from '.\/Navbar.svelte'\n&lt;\/script&gt;\n\n&lt;Navbar \/&gt;\n&lt;div class=\"home_hero\"&gt;\n    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta.&lt;\/h1&gt;\n    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n    &lt;a href=\"https:\/\/kinqsta.com\/static-site-hosting\"&gt;\n        &lt;div&gt; class=\"btn\"&gt;Read more&lt;\/div&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n      \/* CSS styles *\/\n&lt;\/style&gt;<\/code><\/pre>\n<p>Para componentes globales como <code>Navbar<\/code> y <code>Footer<\/code>, que se utilizan en varios archivos, cr\u00e9alos en la carpeta <strong>src\/lib<\/strong> para evitar largas rutas de importaci\u00f3n. Cuando crees componentes o m\u00f3dulos dentro de la carpeta <strong>lib<\/strong>, puedes importarlos c\u00f3modamente a cualquier componente utilizando el alias de importaci\u00f3n <code>$lib<\/code>:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import Navbar from '$lib\/Navbar.svelte'\n&lt;\/script&gt;<\/code><\/pre>\n<p>Para utilizar componentes independientes, por ejemplo, supongamos que necesitas un componente s\u00f3lo para la p\u00e1gina Acerca de, cr\u00e9alo dentro de la ruta <strong>routes\/about<\/strong>, y luego imp\u00f3rtalo en la p\u00e1gina.<\/p>\n<p>Para este proyecto, tambi\u00e9n puedes crear un componente <code>Footer<\/code> en la carpeta <strong>lib<\/strong> y a\u00f1adir este c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">&lt;div class=\"footer\"&gt;\n    &lt;p&gt;\n        Hosted with \u2764\ufe0f by Kinsta's{' '}\n        &lt;a&gt; href=\"https:\/\/kinqsta.com\/static-site-hosting\"&gt;Static Site Hosting&lt;\/a&gt;\n        .\n    &lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>A continuaci\u00f3n, imp\u00f3rtalo en todas las p\u00e1ginas.<\/p>\n<h3>Utilizar el Dise\u00f1o en SvelteKit<\/h3>\n<p>Para evitar importar componentes en muchas p\u00e1ginas, SvelteKit te permite definir dise\u00f1os para tus p\u00e1ginas utilizando archivos <strong>+layout.svelte<\/strong>.<\/p>\n<p>Crear un dise\u00f1o que se aplique a todas las p\u00e1ginas es sencillo. Crea un archivo llamado <strong>src\/routes\/+layout.svelte<\/strong> y personal\u00edzalo con el marcado, los estilos y el comportamiento deseados. El requisito fundamental es incluir un elemento <code>&lt;slot\/&gt;<\/code>\u00a0para alojar el contenido de la p\u00e1gina.<\/p>\n<p>Por ejemplo, puedes integrar los componentes <code>Navbar<\/code> y <code>Footer<\/code> dentro de este dise\u00f1o:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import Navbar from '$lib\/Navbar.svelte';\n    import Footer from '$lib\/Footer.svelte';\n&lt;\/script&gt;\n\n&lt;div class=\"layout\"&gt;\n    &lt;Navbar \/&gt;\n    &lt;slot \/&gt;\n    &lt;Footer \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>El elemento <code>&lt;slot&gt;<\/code> permite insertar el contenido de cada p\u00e1gina en la maqueta.<\/p>\n<p>Las maquetaciones tambi\u00e9n pueden anidarse para p\u00e1ginas concretas. Por ejemplo, si tienes una p\u00e1gina <code>\/dashboard<\/code> con p\u00e1ginas anidadas como <code>\/profile<\/code> y <code>\/settings<\/code>, puedes crear una maquetaci\u00f3n especial:<\/p>\n<pre><code class=\"language-bash\">|-- \/dashboard\n    |-- \/profile\n        |-- +page.svelte\n    |-- \/settings\n        |-- +page.svelte\n    |-- +layout.svelte<\/code><\/pre>\n<aside class=\"WzEyOTUsMTI5NiwxMzI4XQ==\" id=\"NzEyNTQ=\" data-r3koi=\"Im1pZGRsZSI=|ImVzX0VTIg==\" data-NVyu=\"VjhPWEpZTFQ2LQ==\" data-PQdyMng=\"UHh5UWouZmxxYmdNZQ==\" data-eb=\"eUltaGJ1MVFwQmw5LlNNQUg=\" data-w=\"WGJuQ1ljcTFR\" data-bXz9=\"SF9rQ1d4eVlhMXB0\" data-g4=\"NGEyLVBLTGxJ\" data-QcVz=\"bThISXk0cnEuMEdTbg==\"><\/aside>\n<h3>Navegaci\u00f3n Program\u00e1tica en SvelteKit<\/h3>\n<p>SvelteKit proporciona una funci\u00f3n <code>goto<\/code> para la navegaci\u00f3n program\u00e1tica. Por ejemplo, para navegar a la p\u00e1gina <code>\/dashboard<\/code> tras una acci\u00f3n de inicio de sesi\u00f3n:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import { goto } from '$app\/navigation';\n    \n    async function login() {\n        \/\/ Perform login action\n        goto('\/dashboard');\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<h3>Estilizaci\u00f3n en SvelteKit<\/h3>\n<p>SvelteKit admite CSS tradicional para dar estilo a tus p\u00e1ginas. Los estilos pueden definirse dentro de tus componentes Svelte utilizando la etiqueta <code>&lt;style&gt;<\/code>, o puedes optar por enlazar hojas de estilo externas.<\/p>\n<p>Puede que notes que los componentes <code>Navbar<\/code> y <code>Footer<\/code> carecen de estilos espec\u00edficos. Para solucionar esto, es una buena pr\u00e1ctica aplicar estilos globales. Esto se puede conseguir creando un archivo CSS dentro de la carpeta <strong>src<\/strong> e imp\u00f3rtalo a tu archivo root de dise\u00f1o.<\/p>\n<p>Para una mejor organizaci\u00f3n, crea una carpeta de <strong>estilos<\/strong> dentro del directorio <strong>src<\/strong>. Esta carpeta puede albergar todos tus estilos. Como parte de este proyecto, crea un archivo <strong>global.css<\/strong> en la carpeta <strong>styles<\/strong> y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500&display=swap');\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\nbody {\n    background-color: #ddd;\n    font-family: 'Poppins',\n        sans-serif;\n    width: 1200px;\n    margin: 0 auto;\n}\na {\n    text-decoration: none;\n}\nimg {\n    width: 100%;\n}\nnav {\n    display: flex;\n    justify-content: space-between;\n    height: 200px;\n    align-items: center;\n}\nnav .logo-img {\n    width: 100px;\n}\nnav .nav-links a {\n    padding: 0 20px;\n    font-size: 18px;\n}\n@media (max-width:700px) {\n    body {\n        width: 100%;\n        padding: 0 20px;\n    }\n    nav .nav-links a {\n        padding: 0 18px;\n    }\n}\n.footer {\n    width: 100%;\n    text-align: center;\n    margin: 100px 0 20px;\n}<\/code><\/pre>\n<p>A continuaci\u00f3n, puedes importar el archivo CSS en tu archivo de dise\u00f1o para que sea global y funcione para todos los archivos:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    import Navbar from '$lib\/Navbar.svelte';\n    import Footer from '$lib\/Footer.svelte';\n    import '..\/styles\/global.css';\n&lt;\/script&gt;<\/code><\/pre>\n<h2>Cargar Datos con SvelteKit<\/h2>\n<p>Cuando trabajas con SvelteKit, a menudo necesitas cargar datos en tus dise\u00f1os, p\u00e1ginas y componentes. Estos datos pueden proceder de API externas, bases de datos o tu servidor local. Para gestionar esto, puedes utilizar un archivo <strong>+page.js<\/strong> para las p\u00e1ginas y <strong>+layout.js<\/strong> para los dise\u00f1os.<\/p>\n<p>En tu proyecto SvelteKit, un archivo <strong>+page.svelte<\/strong> puede tener un hermano <strong>+page.js<\/strong> que exporte una funci\u00f3n de carga. El valor de retorno de esta funci\u00f3n se pone a disposici\u00f3n de la p\u00e1gina a trav\u00e9s de la prop <code>data<\/code>. Veamos un ejemplo: supongamos que quieres crear una ruta para obtener una <a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\" target=\"_blank\" rel=\"noopener noreferrer\">lista de entradas<\/a> de la <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API de JSON Placeholder<\/a>.<\/p>\n<p>Para cargar los datos de la API, crea un archivo <strong>+page.js<\/strong> dentro de la carpeta <strong>posts<\/strong>. Este archivo exporta una funci\u00f3n <code>load<\/code>.<\/p>\n<pre><code class=\"language-js\">export const load = async () =&gt; {\n    const title = \"Hello World\";\n    return {\n        title,\n    };\n};<\/code><\/pre>\n<p>Se espera que la funci\u00f3n <code>load<\/code> devuelva un objeto, que se proporciona como props al archivo <strong>+page.svelte<\/strong>. A continuaci\u00f3n, se puede acceder al valor <code>title<\/code> con la prop <code>data<\/code>:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    export let data;\n    const title = data.title;\n&lt;\/script&gt;\n\n&lt;div class=\"blog_cont\"&gt;\n    &lt;h2&gt;{title}&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Ahora, pasemos a interactuar con la API JSON Placeholder. Para ello, puedes utilizar la <a href=\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>, pero SvelteKit ofrece su propio m\u00e9todo <code>fetch<\/code> que puedes utilizar para recuperar datos de tus endpoints de la API antes de renderizar una p\u00e1gina:<\/p>\n<pre><code class=\"language-js\">export const load = async (loadEvent) =&gt; {\n    const { fetch } = loadEvent;\n    const response = await fetch(\n        'https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10'\n    );\n    const posts = await response.json();\n    return {\n        posts,\n    };\n};<\/code><\/pre>\n<p>En el c\u00f3digo anterior, extraemos el m\u00e9todo <code>fetch<\/code> de <code>loadEvent<\/code> y realizamos la solicitud a la API. A continuaci\u00f3n, la respuesta se env\u00eda como props a la p\u00e1gina Posts, que la recorre en bucle y muestra todas las entradas:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    export let data;\n    const posts = data.posts;\n&lt;\/script&gt;\n\n&lt;div class=\"blog_cont\"&gt;\n    &lt;h2&gt;Posts&lt;\/h2&gt;\n    &lt;div class=\"blog_grid\"&gt;\n        {#each posts as post}\n            &lt;a href={`\/posts\/${post.id}`} class=\"blog_card\"&gt;\n                &lt;h3&gt;{post.title}&lt;\/h3&gt;\n                &lt;p&gt;\n                    {post.body}\n                &lt;\/p&gt;\n            &lt;\/a&gt;\n        {\/each}\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n    .blog_cont h2 {\n        font-size: 40px;\n        margin-bottom: 20px;\n    }\n    .blog_grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 20px;\n    }\n    @media (max-width: 700px) {\n        .blog_grid {\n            grid-template-columns: 1fr;\n        }\n    }\n    .blog_card {\n        background-color: #bfbfbf;\n        padding: 20px;\n        border-radius: 5px;\n        color: #000;\n        transition: all 0.5s ease-in-out;\n    }\n    .blog_card:hover {\n        background-color: #5333ed;\n        color: #fff;\n    }\n    .blog_card h3 {\n        margin-bottom: 15px;\n    }\n    .blog_card p {\n        margin-bottom: 15px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Este es el aspecto del \u00e1rbol de archivos actual:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/lib\n        |-- Footer.svelte\n        |-- Navbar.svelte\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- \/posts\n            |-- +page.js\n            |-- +page.svelte\n        |-- +page.svelte\n        |-- +layout.svelte\n    |-- \/styles\n        |-- global.css<\/code><\/pre>\n<h3>Rutas Din\u00e1micas con SvelteKit<\/h3>\n<p>Ahora tienes 10 entradas mostradas en tu p\u00e1gina de entradas; si quieres crear una p\u00e1gina individual para cada entrada, la mejor forma de hacerlo es crear una ruta din\u00e1mica.<\/p>\n<p>Para ello, necesitas recibir el valor del slug de la ruta y utilizarlo como par\u00e1metro para consultar la entrada. En SvelteKit, puedes hacerlo creando una carpeta de corchetes con el nombre del par\u00e1metro. As\u00ed es como puedes configurar p\u00e1ginas de entradas individuales:<\/p>\n<ol start=\"1\">\n<li>Crea una carpeta <strong>[postid]<\/strong>\u00a0dentro de la carpeta <strong>posts<\/strong>. El <strong>[postid]<\/strong>\u00a0representa el par\u00e1metro din\u00e1mico que puede contener valores como IDs de post o slugs.<\/li>\n<li>En la carpeta [postid], crea dos archivos:\n<ul>\n<li><strong>+page.svelte:<\/strong> Este archivo definir\u00e1 el dise\u00f1o y la estructura de las p\u00e1ginas individuales de tus entradas.<\/li>\n<li><strong>+page.js<\/strong>: Este archivo JavaScript gestionar\u00e1 la obtenci\u00f3n de datos y la l\u00f3gica espec\u00edfica de cada entrada.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>En el archivo <strong>+page.js<\/strong>, recupera el par\u00e1metro <code>postid<\/code> de la ruta y util\u00edzalo para consultar la entrada espec\u00edfica:<\/p>\n<pre><code class=\"language-js\">export const load = async (loadEvent) =&gt; {\n    const { fetch, params } = loadEvent;\n    const { postid } = params;\n    const response = await fetch(\n        `https:\/\/jsonplaceholder.typicode.com\/posts\/${postid}`\n    );\n    const post = await response.json();\n    return {\n        post,\n    };\n};<\/code><\/pre>\n<p>A continuaci\u00f3n, puedes acceder a <code>data<\/code> como prop en el archivo <strong>+page.svelte<\/strong>:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    export let data;\n    const post = data.post;\n&lt;\/script&gt;\n\n&lt;div&gt;\n    &lt;div class=\"blog_content\"&gt;\n        &lt;h3&gt;{post.title}&lt;\/h3&gt;\n        &lt;p&gt;{post.body}&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;&gt;\n    .blog_content h3 {\n        font-size: 40px;\n        margin-bottom: 20px;\n        text-align: center;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Puedes consultar el c\u00f3digo fuente completo de este <a href=\"https:\/\/github.com\/kinsta\/static-sveltekit-demo\" target=\"_blank\" rel=\"noopener noreferrer\">proyecto SvelteKit en GitHub<\/a>. Tambi\u00e9n puedes consultar la <a href=\"https:\/\/kit.svelte.dev\/docs\/introduction\">documentaci\u00f3n oficial de SvelteKit<\/a> para obtener m\u00e1s informaci\u00f3n.<\/p>\n<h2>Desplegar Sitios Est\u00e1ticos SvelteKit con Kinsta<\/h2>\n<p>Kinsta te permite <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">alojar\u00a0hasta 100 sitios web est\u00e1ticos<\/a> de forma <strong>gratuita<\/strong> directamente desde tu proveedor Git preferido (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\" target=\"_blank\" rel=\"noopener noreferrer\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\" target=\"_blank\" rel=\"noopener noreferrer\">GitLab<\/a>).<\/p>\n<p>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\u00e1ticos de Kinsta, lo que requiere configurar SvelteKit como generador de sitios est\u00e1ticos (SSG).<\/p>\n<p>A continuaci\u00f3n te explicamos c\u00f3mo obtener tu sitio pre-renderizado como una colecci\u00f3n de archivos est\u00e1ticos:<\/p>\n<ol start=\"1\">\n<li>Instala el <a href=\"https:\/\/kit.svelte.dev\/docs\/adapter-static\" target=\"_blank\" rel=\"noopener noreferrer\">@sveltejs\/adapter-static<\/a> ejecutando el siguiente comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm i -D @sveltejs\/adapter-static<\/code><\/pre>\n<ol start=\"2\">\n<li>A continuaci\u00f3n, adapta tu archivo <strong>svelte.config.js<\/strong> sustituyendo <code>adapter-auto<\/code> por un <code>fallback<\/code> a <code>404.html<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import adapter from '@sveltejs\/adapter-static';\n\nconst config = {\n    kit: {\n        adapter: adapter({ fallback: '404.html' }),\n    },\n};\n\nexport default config;<\/code><\/pre>\n<p>Ahora, env\u00eda tus c\u00f3digos a tu proveedor Git preferido. A continuaci\u00f3n, sigue estos pasos para desplegar tu sitio est\u00e1tico en Kinsta:<\/p>\n<ol start=\"1\">\n<li>Inicia sesi\u00f3n o crea una cuenta para ver tu panel <a href=\"https:\/\/my.kinqsta.com\/?lang=es\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autoriza a Kinsta con tu proveedor Git.<\/li>\n<li>Haz clic en <strong>Sitios Est\u00e1ticos<\/strong>\u00a0en la barra lateral izquierda, y luego en <strong>A\u00f1adir sitio<\/strong>.<\/li>\n<li>Selecciona el repositorio y la rama desde la que deseas desplegar.<\/li>\n<li>Asigna un nombre \u00fanico a tu sitio.<\/li>\n<li>A\u00f1ade la configuraci\u00f3n de construcci\u00f3n en el siguiente formato:\n<ul>\n<li><strong>Comando de construcci\u00f3n:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Versi\u00f3n del nodo:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Directorio de publicaci\u00f3n:<\/strong> <code>build<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Por \u00faltimo, haz clic en <strong>Crear sitio<\/strong>.<\/li>\n<\/ol>\n<p>Y ya est\u00e1 En pocos segundos tendr\u00e1s un sitio desplegado. Se proporciona un enlace para acceder a la versi\u00f3n desplegada de tu sitio. Si lo deseas, puedes a\u00f1adir m\u00e1s adelante tu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\" target=\"_blank\" rel=\"noopener noreferrer\">dominio personalizado<\/a> y tu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\" target=\"_blank\" rel=\"noopener noreferrer\">certificado SSL<\/a>.<\/p>\n<p>Como alternativa al alojamiento de sitios est\u00e1ticos, puedes optar por desplegar tu sitio est\u00e1tico con el <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Alojamiento de Aplicaciones<\/a> de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama m\u00e1s amplia de ventajas y acceso a funciones m\u00e1s robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile, y <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\" target=\"_blank\" rel=\"noopener noreferrer\">an\u00e1liticas completas<\/a> que abarcan datos hist\u00f3ricos y en tiempo real.<\/p>\n<h2>Resumen<\/h2>\n<p>Esta gu\u00eda ha explicado el proceso de creaci\u00f3n de un sitio est\u00e1tico con SvelteKit. Desde la configuraci\u00f3n de tu entorno de desarrollo hasta el despliegue, ahora tienes los conocimientos necesarios para crear sitios est\u00e1ticos de alto rendimiento con facilidad.<\/p>\n<p>Construir sitios est\u00e1ticos con SvelteKit ofrece la mezcla perfecta de rendimiento y simplicidad, garantizando que tus proyectos web brillen en Internet.<\/p>\n<p><em>Ahora es el momento de poner tus conocimientos en acci\u00f3n y empezar a construir tu propio sitio est\u00e1tico con SvelteKit. \u00bfHas utilizado SvelteKit en el pasado? No dudes en compartir tus proyectos y experiencias en la secci\u00f3n de comentarios m\u00e1s abajo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los sitios est\u00e1ticos son cada vez m\u00e1s populares debido a su velocidad, seguridad y sencillez. Cuando se trata de construir sitios est\u00e1ticos, existen varias herramientas y &#8230;<\/p>\n","protected":false},"author":287,"featured_media":71255,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1295,1296,1328],"class_list":["post-71254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-errores-javascript","topic-frameworks-javascript","topic-generadores-sitios-estaticos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit\" \/>\n<meta property=\"og:description\" content=\"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T10:02:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-16T08:52:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit\",\"datePublished\":\"2023-11-04T10:02:10+00:00\",\"dateModified\":\"2023-11-16T08:52:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/\"},\"wordCount\":2166,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/\",\"name\":\"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg\",\"datePublished\":\"2023-11-04T10:02:10+00:00\",\"dateModified\":\"2023-11-16T08:52:22+00:00\",\"description\":\"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generadores de Sitios Est\u00e1ticos\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/generadores-sitios-estaticos\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit - Kinsta\u00ae","description":"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit","og_description":"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.","og_url":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-11-04T10:02:10+00:00","article_modified_time":"2023-11-16T08:52:22+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit","datePublished":"2023-11-04T10:02:10+00:00","dateModified":"2023-11-16T08:52:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/"},"wordCount":2166,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/","url":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/","name":"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg","datePublished":"2023-11-04T10:02:10+00:00","dateModified":"2023-11-16T08:52:22+00:00","description":"Aprende el proceso paso a paso para crear un sitio est\u00e1tico ultrarr\u00e1pido con SvelteKit. Desde la configuraci\u00f3n inicial hasta el despliegue con Kinsta.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/11\/static-sveltekit.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/estatico-sveltekit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Generadores de Sitios Est\u00e1ticos","item":"https:\/\/kinqsta.com\/es\/secciones\/generadores-sitios-estaticos\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Construir un Sitio Est\u00e1tico con SvelteKit"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/71254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=71254"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/71254\/revisions"}],"predecessor-version":[{"id":71567,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/71254\/revisions\/71567"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71254\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/71255"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=71254"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=71254"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=71254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}