{"id":64570,"date":"2023-12-06T07:04:35","date_gmt":"2023-12-06T10:04:35","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=64570&#038;preview=true&#038;preview_id=64570"},"modified":"2023-12-12T08:19:57","modified_gmt":"2023-12-12T11:19:57","slug":"site-estatico-sveltekit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/","title":{"rendered":"Como Criar um Site Est\u00e1tico com o SvelteKit"},"content":{"rendered":"<p>Os sites est\u00e1ticos t\u00eam se tornado cada vez mais populares devido \u00e0 sua velocidade, seguran\u00e7a e simplicidade. Quando se trata de criar sites est\u00e1ticos, h\u00e1 v\u00e1rios frameworks e ferramentas dispon\u00edveis, mas um que est\u00e1 ganhando import\u00e2ncia rapidamente \u00e9 o <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerador-de-site-estatico-svelte\/#1-sveltekit\">SvelteKit<\/a>.<\/p>\n<p>Este guia conduz voc\u00ea pela jornada de cria\u00e7\u00e3o de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-um-site-statico\/\">site est\u00e1tico<\/a> com o SvelteKit, desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o com a <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hospedagem de Site Est\u00e1tico da Kinsta<\/a>, gratuitamente.<\/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:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-static-site-demo.gif\" alt=\"Demonstra\u00e7\u00e3o de site est\u00e1tico do SvelteKit.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Demonstra\u00e7\u00e3o de site est\u00e1tico do 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>O que \u00e9 o SvelteKit?<\/h2>\n<p>O <a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">SvelteKit<\/a> \u00e9 um robusto framework da web projetado para criar interfaces de usu\u00e1rio, inclusive sites est\u00e1ticos. \u00c9 conhecido por seu desempenho, simplicidade e capacidade de criar componentes com uma abordagem declarativa.<\/p>\n<p>O SvelteKit amplia os recursos do framework Svelte, adicionando roteamento, renderiza\u00e7\u00e3o do lado do servidor e muito mais.<\/p>\n<h3>Primeiros passos com o SvelteKit<\/h3>\n<p>Para acompanhar este guia, presume-se que voc\u00ea possua:<\/p>\n<ul>\n<li>Conhecimento fundamental de <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Conhecimento b\u00e1sico do <a href=\"https:\/\/kinsta.com\/pt\/blog\/svelte-vs-react\/\">Svelte<\/a><\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js e npm<\/a> instalados em seu computador<\/li>\n<\/ul>\n<p>Para criar seu novo aplicativo SvelteKit, siga as etapas abaixo.<\/p>\n<ol start=\"1\">\n<li>Crie um novo projeto executando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm create svelte@latest my-app<\/code><\/pre>\n<p>Este comando cria um novo projeto no diret\u00f3rio <code>my-app<\/code>, solicitando a configura\u00e7\u00e3o de algumas ferramentas b\u00e1sicas, como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-typescript\/\">TypeScript<\/a>. Certifique-se de escolher a op\u00e7\u00e3o Skeleton project e altere <code>my-app<\/code> para o nome que preferir para o seu projeto.<\/p>\n<ol start=\"2\">\n<li>Navegue at\u00e9 o diret\u00f3rio do projeto e instale suas depend\u00eancias:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-app\nnpm install<\/code><\/pre>\n<ol start=\"3\">\n<li>Execute <code>npm run dev<\/code> para iniciar o servidor de desenvolvimento local em <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:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-skeleton-site.png\" alt=\"Site esqueleto do SvelteKit.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Site esqueleto do SvelteKit.<\/figcaption><\/figure>\n<h2>Entendendo a estrutura de arquivos do SvelteKit<\/h2>\n<p>Ao abrir o seu projeto em um editor de c\u00f3digo, voc\u00ea ver\u00e1 a seguinte estrutura. \u00c9 fundamental entender essa estrutura, pois o ajudar\u00e1 a organizar o 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> Este \u00e9 o cora\u00e7\u00e3o do seu projeto e cont\u00e9m v\u00e1rios subdiret\u00f3rios e arquivos:\n<ul>\n<li><strong>\/lib:<\/strong> Este diret\u00f3rio abriga bibliotecas, utilit\u00e1rios ou m\u00f3dulos personalizados. \u00c9 um bom lugar para armazenar c\u00f3digo reutiliz\u00e1vel que pode ser usado em todo o aplicativo.<\/li>\n<li><strong>\/routes:<\/strong> O diret\u00f3rio de rotas \u00e9 crucial para definir as diferentes p\u00e1ginas ou visualiza\u00e7\u00f5es em seu aplicativo. Cada p\u00e1gina \u00e9 representada por um arquivo <strong>.svelte<\/strong>, como <strong>+page.svelte<\/strong>. Esses arquivos <strong>.svelte<\/strong> cont\u00eam os componentes, a l\u00f3gica e os estilos espec\u00edficos dessa p\u00e1gina.<\/li>\n<li><strong>app.html:<\/strong> Este arquivo serve como ponto de entrada do seu aplicativo. \u00c9 nele que a estrutura principal da sua p\u00e1gina web \u00e9 definida.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static:<\/strong> Este diret\u00f3rio \u00e9 usado para armazenar ativos est\u00e1ticos, como imagens, fontes ou quaisquer arquivos que n\u00e3o precisem ser processados pelo seu aplicativo. Esses ativos podem ser referenciados diretamente em seus componentes HTML e Svelte.<\/li>\n<li><strong>svelte.config.js:<\/strong> Este arquivo de configura\u00e7\u00e3o permite personalizar v\u00e1rios aspectos do seu projeto SvelteKit. Use-o para configurar a renderiza\u00e7\u00e3o no lado do servidor, definir layouts personalizados e muito mais.<\/li>\n<\/ul>\n<h2>Roteamento no SvelteKit<\/h2>\n<p>Um dos recursos de destaque do SvelteKit \u00e9 seu sistema de roteamento. Ele segue uma abordagem baseada em sistema de arquivos, em que os caminhos de URL s\u00e3o definidos por arquivos e pastas no diret\u00f3rio <strong>src\/routes<\/strong>, o que o torna intuitivo e f\u00e1cil de gerenciar.<\/p>\n<p>No SvelteKit, cada arquivo correspondente a uma rota deve ter o nome <strong>+page.svelte<\/strong>. Por exemplo, o arquivo de \u00edndice do seu site do SvelteKit est\u00e1 localizado na pasta <strong>routes<\/strong> e tem o nome <strong>+page.svelte<\/strong>.<\/p>\n<p>Adicione o seguinte c\u00f3digo a esse arquivo para criar a p\u00e1gina inicial:<\/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 criar uma rota aninhada no SvelteKit, por exemplo, uma p\u00e1gina About (Sobre) acess\u00edvel em <code>localhost:5173\/about<\/code>, voc\u00ea precisa criar uma pasta dentro da pasta <strong>routes<\/strong> com um nome que represente o caminho da URL. Dentro dessa pasta, crie um arquivo <strong>+page.svelte<\/strong> a ser renderizado para a rota.<\/p>\n<p>Adicione o seguinte 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>Qualquer estilo adicionado ao seu componente Svelte \u00e9 delimitado e n\u00e3o afetar\u00e1 outros componentes.<\/p>\n<p>\u00c9 essencial entender que o SvelteKit lida com a navega\u00e7\u00e3o entre as p\u00e1ginas usando elementos <code>&lt;a&gt;<\/code> padr\u00e3o, tornando o processo de navega\u00e7\u00e3o intuitivo. N\u00e3o h\u00e1 necessidade de importar componentes adicionais, como <code>&lt;Link&gt;<\/code>, tal como exigido no <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>. Na pr\u00f3xima se\u00e7\u00e3o, vamos criar um componente Navigation para ser adicionado a cada p\u00e1gina.<\/p>\n<p>Para o projeto atual, a estrutura de rotas \u00e9 como a seguinte:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- +page.svelte<\/code><\/pre>\n<h3>Usando componentes no SvelteKit<\/h3>\n<p>Para tornar seu c\u00f3digo mais modular, crie componentes e os importe para suas p\u00e1ginas. Por exemplo, crie um componente <strong>Navbar.svelte<\/strong> na pasta <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>Em seguida, importe-o para a p\u00e1gina inicial <strong>+page.svelte<\/strong> desta 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:\/\/kinsta.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 globais como <code>Navbar<\/code> e <code>Footer<\/code>, usados em v\u00e1rios arquivos, crie-os na pasta <strong>src\/lib<\/strong> para evitar caminhos de importa\u00e7\u00e3o longos. Quando voc\u00ea cria componentes ou m\u00f3dulos dentro da pasta <strong>lib<\/strong>, torna-se conveniente import\u00e1-los para qualquer componente usando o alias de importa\u00e7\u00e3o <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 usar componentes aut\u00f4nomos, por exemplo, suponha que voc\u00ea precise de um componente somente para a p\u00e1gina About, crie-o na rota <strong>routes\/about<\/strong> e, em seguida, importe-o para a p\u00e1gina.<\/p>\n<p>Para este projeto, voc\u00ea tamb\u00e9m pode criar um componente <code>Footer<\/code> na pasta <strong>lib<\/strong> e adicionar 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:\/\/kinsta.com\/static-site-hosting\"&gt;Static Site Hosting&lt;\/a&gt;\n        .\n    &lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Ent\u00e3o o importe para todas as p\u00e1ginas.<\/p>\n<h3>Usando layouts no SvelteKit<\/h3>\n<p>Para evitar a importa\u00e7\u00e3o de componentes para muitas p\u00e1ginas, o SvelteKit permite que voc\u00ea defina layouts para suas p\u00e1ginas usando arquivos <strong>+layout.svelte<\/strong>.<\/p>\n<p>Criar um layout que se aplique a todas as p\u00e1ginas \u00e9 simples. Crie um arquivo chamado <strong>src\/routes\/+layout.svelte<\/strong> e o personalize com a marca\u00e7\u00e3o, os estilos e o comportamento desejados. O requisito essencial \u00e9 incluir um elemento <code>&lt;slot\/&gt;<\/code> para acomodar o conte\u00fado da p\u00e1gina.<\/p>\n<p>Por exemplo, voc\u00ea pode integrar os componentes <code>Navbar<\/code> e <code>Footer<\/code> neste layout:<\/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>O elemento <code>&lt;slot&gt;<\/code> permite que o conte\u00fado de cada p\u00e1gina seja inserido no layout.<\/p>\n<p>Os layouts tamb\u00e9m podem ser aninhados para p\u00e1ginas espec\u00edficas. Por exemplo, se voc\u00ea tiver uma p\u00e1gina <code>\/dashboard<\/code> com p\u00e1ginas aninhadas como <code>\/profile<\/code> e <code>\/settings<\/code>, pode criar um layout 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 data-r3koi=\"Im1pZGRsZSI=|InB0X1BUIg==\" data-jaILV=\"elgzLTBFdFVtSg==\" data-orzf2lS=\"TERCNXNPUVlWZ0FIMWtUZlA3ZU4z\" id=\"NjQ1NzA=\" data-T=\"QVpfRTl6cFRIa3dQb2I1MnR2dVY2\" data-3V=\"al9sNWNtVTku\" data-mIekrc=\"dGxGWnItZzVjNjNTeUk=\" class=\"Wzk3Niw5NzcsMTAwOV0=\" data-yCk7MxZ=\"aDczNWw0WXVQZF93ZW14MA==\" data-Gnh=\"T1h5ckEyY3dU\" data-HI=\"YkVNLVVHZFp5UWZYTjdU\" data-.fx=\"bmIta0lxVmo=\" data-1Eo8Unr=\"eTNaSENrLk14LVhhYjdPZA==\"><\/aside>\n<h3>Navega\u00e7\u00e3o program\u00e1tica no SvelteKit<\/h3>\n<p>O SvelteKit fornece uma fun\u00e7\u00e3o <code>goto<\/code> para navega\u00e7\u00e3o program\u00e1tica. Por exemplo, para navegar at\u00e9 a p\u00e1gina <code>\/dashboard<\/code> ap\u00f3s uma a\u00e7\u00e3o de login:<\/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>Estilos no SvelteKit<\/h3>\n<p>O SvelteKit suporta CSS tradicional para criar o estilo das suas p\u00e1ginas. Os estilos podem ser definidos nos seus componentes do Svelte usando a tag <code>&lt;style&gt;<\/code>, ou vinculando folhas de estilo externas.<\/p>\n<p>Note que os componentes <code>Navbar<\/code> e <code>Footer<\/code> n\u00e3o t\u00eam estilos espec\u00edficos. Para resolver isso, \u00e9 uma boa pr\u00e1tica aplicar um estilo global. Voc\u00ea pode fazer isso criando um arquivo CSS na pasta <strong>src<\/strong> e importando-o para o seu arquivo de layout raiz.<\/p>\n<p>Para uma melhor organiza\u00e7\u00e3o, crie uma pasta <strong>styles<\/strong> no diret\u00f3rio <strong>src<\/strong>. Essa pasta pode conter todos os seus estilos. Como parte deste projeto, crie um arquivo <strong>global.css<\/strong> na pasta <strong>styles<\/strong> e adicione o seguinte 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>Ent\u00e3o importe o arquivo CSS para o seu arquivo de layout para que ele seja global e funcione em todos os arquivos:<\/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>Carregamento de dados com o SvelteKit<\/h2>\n<p>Ao trabalhar com o SvelteKit, voc\u00ea frequentemente precisa carregar dados nos seus layouts, p\u00e1ginas e componentes. Esses dados podem vir de APIs externas, bancos de dados ou do seu servidor local. Para gerenciar isso, voc\u00ea pode utilizar um arquivo <strong>+page.js<\/strong> para p\u00e1ginas e <strong>+layout.js<\/strong> para layouts.<\/p>\n<p>No seu projeto SvelteKit, um arquivo <strong>+page.svelte<\/strong> pode ter um <strong>+page.js<\/strong> irm\u00e3o que exporta uma fun\u00e7\u00e3o de carregamento. O valor de retorno dessa fun\u00e7\u00e3o \u00e9 disponibilizado para a p\u00e1gina por meio da propriedade <code>data<\/code>. Vejamos um exemplo: suponha que voc\u00ea queira criar uma rota para buscar uma <a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\" target=\"_blank\" rel=\"noopener noreferrer\">lista de publica\u00e7\u00f5es<\/a> da <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API JSON Placeholder<\/a>.<\/p>\n<p>Para carregar os dados da API, crie um arquivo <strong>+page.js<\/strong> na pasta <strong>posts<\/strong>. Esse arquivo exporta uma fun\u00e7\u00e3o <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>A fun\u00e7\u00e3o <code>load<\/code> deve retornar um objeto, que \u00e9 fornecido como props para o arquivo <strong>+page.svelte<\/strong>. O valor <code>title<\/code> pode ent\u00e3o ser acessado com a 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>Agora, vamos passar para a intera\u00e7\u00e3o com a API de publica\u00e7\u00f5es do JSON Placeholder. Para isso, voc\u00ea pode usar a <a href=\"https:\/\/kinsta.com\/pt\/blog\/solicitacoes-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">Fetch API do JavaScript<\/a>, mas o SvelteKit oferece seu pr\u00f3prio m\u00e9todo <code>fetch<\/code> para recuperar dados dos seus endpoints da API antes de renderizar uma 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>No c\u00f3digo acima, extra\u00edmos o m\u00e9todo <code>fetch<\/code> de <code>loadEvent<\/code> e fazemos a solicita\u00e7\u00e3o de API. A resposta \u00e9 ent\u00e3o enviada como props para a p\u00e1gina Publica\u00e7\u00f5es (Posts), percorrendo e exibindo todas as publica\u00e7\u00f5es:<\/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>A \u00e1rvore de arquivos atualizada fica assim:<\/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>Roteamento din\u00e2mico com o SvelteKit<\/h3>\n<p>Agora voc\u00ea tem 10 publica\u00e7\u00f5es exibidas em sua p\u00e1gina de publica\u00e7\u00f5es; se quiser criar uma p\u00e1gina individual para cada publica\u00e7\u00e3o, a melhor maneira de fazer isso \u00e9 criar uma rota din\u00e2mica.<\/p>\n<p>Para fazer isso, voc\u00ea precisa receber o valor do slug da rota e us\u00e1-lo como par\u00e2metro para consultar a publica\u00e7\u00e3o. No SvelteKit, fa\u00e7a isso criando uma pasta entre colchetes com o nome do par\u00e2metro. Veja como configurar p\u00e1ginas de publica\u00e7\u00f5es individuais:<\/p>\n<ol start=\"1\">\n<li>Crie uma pasta <strong>[postid]<\/strong> dentro da pasta <strong>posts<\/strong>. O <strong>[postid]<\/strong> representa o par\u00e2metro din\u00e2mico que pode conter valores como IDs de publica\u00e7\u00e3o ou slugs.<\/li>\n<li>Na pasta [postid], crie dois arquivos:\n<ul>\n<li><strong>+page.svelte:<\/strong> Este arquivo definir\u00e1 o layout e a estrutura das p\u00e1ginas de publica\u00e7\u00f5es individuais.<\/li>\n<li><strong>+page.js:<\/strong> Este arquivo JavaScript tratar\u00e1 da busca de dados e da l\u00f3gica espec\u00edfica para publica\u00e7\u00f5es individuais.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>No arquivo <strong>+page.js<\/strong>, recupere o par\u00e2metro <code>postid<\/code> da rota e use-o para consultar a publica\u00e7\u00e3o 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>Ent\u00e3o voc\u00ea pode acessar <code>data<\/code> como uma prop no arquivo <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>Confira o c\u00f3digo-fonte completo deste <a href=\"https:\/\/github.com\/kinsta\/static-sveltekit-demo\" target=\"_blank\" rel=\"noopener noreferrer\">projeto SvelteKit no GitHub<\/a>. Consulte tamb\u00e9m a <a href=\"https:\/\/kit.svelte.dev\/docs\/introduction\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o oficial do SvelteKit<\/a> para mais informa\u00e7\u00f5es.<\/p>\n<h2>Implante sites est\u00e1ticos do SvelteKit com a Kinsta<\/h2>\n<p>A Kinsta permite que voc\u00ea hospede <strong>gratuitamente<\/strong> <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\" target=\"_blank\" rel=\"noopener noreferrer\">at\u00e9 100 sites est\u00e1ticos<\/a> diretamente do provedor Git de sua prefer\u00eancia (<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> ou <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 come\u00e7ar a fazer o push do seu site SvelteKit, \u00e9 importante adapt\u00e1-lo ao alvo da sua implanta\u00e7\u00e3o. Neste projeto espec\u00edfico, estamos nos concentrando em utilizar a Hospedagem de Site Est\u00e1tico da Kinsta, o que requer a configura\u00e7\u00e3o do SvelteKit como Gerador de Site Est\u00e1tico (SSG).<\/p>\n<p>Veja como fazer com que seu site seja pr\u00e9-renderizado como uma cole\u00e7\u00e3o de arquivos est\u00e1ticos:<\/p>\n<ol start=\"1\">\n<li>Instale o <a href=\"https:\/\/kit.svelte.dev\/docs\/adapter-static\" target=\"_blank\" rel=\"noopener noreferrer\">@sveltejs\/adapter-static<\/a> executando o seguinte comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm i -D @sveltejs\/adapter-static<\/code><\/pre>\n<ol start=\"2\">\n<li>Em seguida, adapte o arquivo <strong>svelte.config.js<\/strong> substituindo <code>adapter-auto<\/code> por <code>fallback<\/code> para <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>Agora envie seus c\u00f3digos para o provedor Git de sua prefer\u00eancia. Da\u00ed siga estes passos para implantar seu site est\u00e1tico na Kinsta:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login ou crie uma conta para visualizar seu painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorize a Kinsta com seu provedor Git.<\/li>\n<li>Clique em <strong>Sites est\u00e1ticos<\/strong> na barra lateral esquerda, e da\u00ed em <strong>Adicionar site<\/strong>.<\/li>\n<li>Selecione o reposit\u00f3rio e o branch dos quais voc\u00ea deseja implantar.<\/li>\n<li>Atribua um nome exclusivo ao seu site.<\/li>\n<li>Adicione as configura\u00e7\u00f5es de build no seguinte formato:\n<ul>\n<li><strong>Comando build:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Vers\u00e3o do node:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Diret\u00f3rio de publica\u00e7\u00e3o:<\/strong> <code>build<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Por fim, clique em <strong>Criar site<\/strong>.<\/li>\n<\/ol>\n<p>E \u00e9 isso! Agora voc\u00ea tem um site implantado em poucos segundos. Voc\u00ea receber\u00e1 um link para acessar a vers\u00e3o implantada do seu site. Posteriormente, adicione seu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\" target=\"_blank\" rel=\"noopener noreferrer\">dom\u00ednio personalizado<\/a> e um <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\" target=\"_blank\" rel=\"noopener noreferrer\">certificado SSL<\/a>, se desejar.<\/p>\n<p>Como alternativa \u00e0 Hospedagem de Site Est\u00e1tico, voc\u00ea pode implantar seu site est\u00e1tico com a <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implanta\u00e7\u00e3o personalizada usando um Dockerfile, e <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\" target=\"_blank\" rel=\"noopener noreferrer\">an\u00e1lises completas<\/a> que englobam dados hist\u00f3ricos e em tempo real.<\/p>\n<h2>Resumo<\/h2>\n<p>Este guia explicou o processo de cria\u00e7\u00e3o de um site est\u00e1tico com o SvelteKit. Desde a configura\u00e7\u00e3o do ambiente de desenvolvimento at\u00e9 a implanta\u00e7\u00e3o, agora voc\u00ea tem o conhecimento necess\u00e1rio para criar sites est\u00e1ticos de alto desempenho com facilidade.<\/p>\n<p>A cria\u00e7\u00e3o de sites est\u00e1ticos com SvelteKit oferece a combina\u00e7\u00e3o perfeita de desempenho e simplicidade, garantindo que seus projetos web brilhem na internet.<\/p>\n<p><em>Agora \u00e9 hora de colocar seu conhecimento em pr\u00e1tica e come\u00e7ar a criar o seu pr\u00f3prio site est\u00e1tico com o SvelteKit. Voc\u00ea j\u00e1 usou o SvelteKit? Fique \u00e0 vontade para compartilhar seus projetos e experi\u00eancias na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os sites est\u00e1ticos t\u00eam se tornado cada vez mais populares devido \u00e0 sua velocidade, seguran\u00e7a e simplicidade. Quando se trata de criar sites est\u00e1ticos, h\u00e1 v\u00e1rios &#8230;<\/p>\n","protected":false},"author":287,"featured_media":64571,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[976,977,1009],"class_list":["post-64570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erros-de-javascript","topic-frameworks-javascript","topic-geradores-sites-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>Como Criar um Site Est\u00e1tico com o SvelteKit - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na 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:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar um Site Est\u00e1tico com o SvelteKit\" \/>\n<meta property=\"og:description\" content=\"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-06T10:04:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-12T11:19:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Criar um Site Est\u00e1tico com o SvelteKit\",\"datePublished\":\"2023-12-06T10:04:35+00:00\",\"dateModified\":\"2023-12-12T11:19:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/\"},\"wordCount\":2112,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/\",\"name\":\"Como Criar um Site Est\u00e1tico com o SvelteKit - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg\",\"datePublished\":\"2023-12-06T10:04:35+00:00\",\"dateModified\":\"2023-12-12T11:19:57+00:00\",\"description\":\"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Geradores de Sites Est\u00e1ticos\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/geradores-sites-estaticos\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Criar um Site Est\u00e1tico com o SvelteKit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Criar um Site Est\u00e1tico com o SvelteKit - Kinsta\u00ae","description":"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na 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:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Criar um Site Est\u00e1tico com o SvelteKit","og_description":"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na Kinsta.","og_url":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-12-06T10:04:35+00:00","article_modified_time":"2023-12-12T11:19:57+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na Kinsta.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Criar um Site Est\u00e1tico com o SvelteKit","datePublished":"2023-12-06T10:04:35+00:00","dateModified":"2023-12-12T11:19:57+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/"},"wordCount":2112,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/","url":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/","name":"Como Criar um Site Est\u00e1tico com o SvelteKit - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg","datePublished":"2023-12-06T10:04:35+00:00","dateModified":"2023-12-12T11:19:57+00:00","description":"Conhe\u00e7a, passo a passo, o processo de cria\u00e7\u00e3o de um site est\u00e1tico extremamente r\u00e1pido com o SvelteKit, da configura\u00e7\u00e3o inicial \u00e0 implanta\u00e7\u00e3o na Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/11\/static-sveltekit.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/site-estatico-sveltekit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Geradores de Sites Est\u00e1ticos","item":"https:\/\/kinsta.com\/pt\/topicos\/geradores-sites-estaticos\/"},{"@type":"ListItem","position":3,"name":"Como Criar um Site Est\u00e1tico com o SvelteKit"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=64570"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64570\/revisions"}],"predecessor-version":[{"id":65928,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64570\/revisions\/65928"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64570\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/64571"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=64570"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=64570"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=64570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}