Os sites estáticos têm se tornado cada vez mais populares devido à sua velocidade, segurança e simplicidade. Quando se trata de criar sites estáticos, há vários frameworks e ferramentas disponíveis, mas um que está ganhando importância rapidamente é o SvelteKit.
Este guia conduz você pela jornada de criação de um site estático com o SvelteKit, desde a configuração até a implantação com a Hospedagem de Site Estático da Kinsta, gratuitamente.
O que é o SvelteKit?
O SvelteKit é um robusto framework da web projetado para criar interfaces de usuário, inclusive sites estáticos. É conhecido por seu desempenho, simplicidade e capacidade de criar componentes com uma abordagem declarativa.
O SvelteKit amplia os recursos do framework Svelte, adicionando roteamento, renderização do lado do servidor e muito mais.
Primeiros passos com o SvelteKit
Para acompanhar este guia, presume-se que você possua:
- Conhecimento fundamental de HTML, CSS e JavaScript
- Conhecimento básico do Svelte
- Node.js e npm instalados em seu computador
Para criar seu novo aplicativo SvelteKit, siga as etapas abaixo.
- Crie um novo projeto executando:
npm create svelte@latest my-appEste comando cria um novo projeto no diretório my-app, solicitando a configuração de algumas ferramentas básicas, como o TypeScript. Certifique-se de escolher a opção Skeleton project e altere my-app para o nome que preferir para o seu projeto.
- Navegue até o diretório do projeto e instale suas dependências:
cd my-app
npm install- Execute
npm run devpara iniciar o servidor de desenvolvimento local emlocalhost:5173.
Entendendo a estrutura de arquivos do SvelteKit
Ao abrir o seu projeto em um editor de código, você verá a seguinte estrutura. É fundamental entender essa estrutura, pois o ajudará a organizar o código de forma eficaz.
/
|-- /src
|-- /lib
|-- /routes
|-- +page.svelte
|-- app.html
|-- /static
|-- svelte.config.js- /src: Este é o coração do seu projeto e contém vários subdiretórios e arquivos:
- /lib: Este diretório abriga bibliotecas, utilitários ou módulos personalizados. É um bom lugar para armazenar código reutilizável que pode ser usado em todo o aplicativo.
- /routes: O diretório de rotas é crucial para definir as diferentes páginas ou visualizações em seu aplicativo. Cada página é representada por um arquivo .svelte, como +page.svelte. Esses arquivos .svelte contêm os componentes, a lógica e os estilos específicos dessa página.
- app.html: Este arquivo serve como ponto de entrada do seu aplicativo. É nele que a estrutura principal da sua página web é definida.
- /static: Este diretório é usado para armazenar ativos estáticos, como imagens, fontes ou quaisquer arquivos que não precisem ser processados pelo seu aplicativo. Esses ativos podem ser referenciados diretamente em seus componentes HTML e Svelte.
- svelte.config.js: Este arquivo de configuração permite personalizar vários aspectos do seu projeto SvelteKit. Use-o para configurar a renderização no lado do servidor, definir layouts personalizados e muito mais.
Roteamento no SvelteKit
Um dos recursos de destaque do SvelteKit é seu sistema de roteamento. Ele segue uma abordagem baseada em sistema de arquivos, em que os caminhos de URL são definidos por arquivos e pastas no diretório src/routes, o que o torna intuitivo e fácil de gerenciar.
No SvelteKit, cada arquivo correspondente a uma rota deve ter o nome +page.svelte. Por exemplo, o arquivo de índice do seu site do SvelteKit está localizado na pasta routes e tem o nome +page.svelte.
Adicione o seguinte código a esse arquivo para criar a página inicial:
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting/">
<div class="btn">Read more</div>
</a>
</div>
<style>
.home_hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6e7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width: 700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}
</style>Para criar uma rota aninhada no SvelteKit, por exemplo, uma página About (Sobre) acessível em localhost:5173/about, você precisa criar uma pasta dentro da pasta routes com um nome que represente o caminho da URL. Dentro dessa pasta, crie um arquivo +page.svelte a ser renderizado para a rota.
Adicione o seguinte código a routes/about/+page.svelte:
<div class="about_cont">
<h2>About</h2>
<div class="about_info">
<div class="about_text">
<p>
Kinsta allows you to{' '}
<a> href="https://kinsta.com/static-site-hosting/">
host up to 100 static websites
</a>{' '}
for free. This can be done by pushing your code to your preferred Git provider
(Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.
</p>
<p>
As an alternative to Static Site Hosting, you can opt for deploying your
static site with Kinsta’s{' '}
<a> href="https://kinsta.com/application-hosting/">
Application Hosting
</a>
, which provides greater hosting flexibility, a wider range of benefits,
and access to more robust features. For example, scalability, customized
deployment using a Dockerfile, and comprehensive analytics encompassing real-time
and historical data.
</p>
</div>
<iframe> width="560" height="315" src="https://www.youtube.com/embed/H7CNbsda8OA?si=40FGVlNvJ74_6hlj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</div>
</div>
<style>>
.about_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.about_info {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
}
.about_text {
flex-basis: 50%;
}
.about_text p {
margin-bottom: 20px;
font-size: 18px;
}
.about_img {
flex-basis: 50%;
width: 200px;
border-radius: 10px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
.about_img {
width: 100%;
}
}
</style>Qualquer estilo adicionado ao seu componente Svelte é delimitado e não afetará outros componentes.
É essencial entender que o SvelteKit lida com a navegação entre as páginas usando elementos <a> padrão, tornando o processo de navegação intuitivo. Não há necessidade de importar componentes adicionais, como <Link>, tal como exigido no React. Na próxima seção, vamos criar um componente Navigation para ser adicionado a cada página.
Para o projeto atual, a estrutura de rotas é como a seguinte:
|-- /src
|-- /routes
|-- /about
|-- +page.svelte
|-- +page.svelteUsando componentes no SvelteKit
Para tornar seu código mais modular, crie componentes e os importe para suas páginas. Por exemplo, crie um componente Navbar.svelte na pasta routes:
<nav>
<a href="/">
<img src="/kinsta-logo.png" alt="" class="logo-img" />
</a>
<div class="nav-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/posts">Posts</a>
</div>
</nav>Em seguida, importe-o para a página inicial +page.svelte desta forma:
<script>>
import Navbar from './Navbar.svelte'
</script>
<Navbar />
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting">
<div> class="btn">Read more</div>
</a>
</div>
<style>
/* CSS styles */
</style>Para componentes globais como Navbar e Footer, usados em vários arquivos, crie-os na pasta src/lib para evitar caminhos de importação longos. Quando você cria componentes ou módulos dentro da pasta lib, torna-se conveniente importá-los para qualquer componente usando o alias de importação $lib:
<script>
import Navbar from '$lib/Navbar.svelte'
</script>Para usar componentes autônomos, por exemplo, suponha que você precise de um componente somente para a página About, crie-o na rota routes/about e, em seguida, importe-o para a página.
Para este projeto, você também pode criar um componente Footer na pasta lib e adicionar este código:
<div class="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>Então o importe para todas as páginas.
Usando layouts no SvelteKit
Para evitar a importação de componentes para muitas páginas, o SvelteKit permite que você defina layouts para suas páginas usando arquivos +layout.svelte.
Criar um layout que se aplique a todas as páginas é simples. Crie um arquivo chamado src/routes/+layout.svelte e o personalize com a marcação, os estilos e o comportamento desejados. O requisito essencial é incluir um elemento <slot/> para acomodar o conteúdo da página.
Por exemplo, você pode integrar os componentes Navbar e Footer neste layout:
<script>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
</script>
<div class="layout">
<Navbar />
<slot />
<Footer />
</div>O elemento <slot> permite que o conteúdo de cada página seja inserido no layout.
Os layouts também podem ser aninhados para páginas específicas. Por exemplo, se você tiver uma página /dashboard com páginas aninhadas como /profile e /settings, pode criar um layout especial:
|-- /dashboard
|-- /profile
|-- +page.svelte
|-- /settings
|-- +page.svelte
|-- +layout.svelteNavegação programática no SvelteKit
O SvelteKit fornece uma função goto para navegação programática. Por exemplo, para navegar até a página /dashboard após uma ação de login:
<script>
import { goto } from '$app/navigation';
async function login() {
// Perform login action
goto('/dashboard');
}
</script>Estilos no SvelteKit
O SvelteKit suporta CSS tradicional para criar o estilo das suas páginas. Os estilos podem ser definidos nos seus componentes do Svelte usando a tag <style>, ou vinculando folhas de estilo externas.
Note que os componentes Navbar e Footer não têm estilos específicos. Para resolver isso, é uma boa prática aplicar um estilo global. Você pode fazer isso criando um arquivo CSS na pasta src e importando-o para o seu arquivo de layout raiz.
Para uma melhor organização, crie uma pasta styles no diretório src. Essa pasta pode conter todos os seus estilos. Como parte deste projeto, crie um arquivo global.css na pasta styles e adicione o seguinte código:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: center;
margin: 100px 0 20px;
}Então importe o arquivo CSS para o seu arquivo de layout para que ele seja global e funcione em todos os arquivos:
<script>>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
import '../styles/global.css';
</script>Carregamento de dados com o SvelteKit
Ao trabalhar com o SvelteKit, você frequentemente precisa carregar dados nos seus layouts, páginas e componentes. Esses dados podem vir de APIs externas, bancos de dados ou do seu servidor local. Para gerenciar isso, você pode utilizar um arquivo +page.js para páginas e +layout.js para layouts.
No seu projeto SvelteKit, um arquivo +page.svelte pode ter um +page.js irmão que exporta uma função de carregamento. O valor de retorno dessa função é disponibilizado para a página por meio da propriedade data. Vejamos um exemplo: suponha que você queira criar uma rota para buscar uma lista de publicações da API JSON Placeholder.
Para carregar os dados da API, crie um arquivo +page.js na pasta posts. Esse arquivo exporta uma função load.
export const load = async () => {
const title = "Hello World";
return {
title,
};
};A função load deve retornar um objeto, que é fornecido como props para o arquivo +page.svelte. O valor title pode então ser acessado com a prop data:
<script>>
export let data;
const title = data.title;
</script>
<div class="blog_cont">
<h2>{title}</h2>
</div>Agora, vamos passar para a interação com a API de publicações do JSON Placeholder. Para isso, você pode usar a Fetch API do JavaScript, mas o SvelteKit oferece seu próprio método fetch para recuperar dados dos seus endpoints da API antes de renderizar uma página:
export const load = async (loadEvent) => {
const { fetch } = loadEvent;
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=10'
);
const posts = await response.json();
return {
posts,
};
};No código acima, extraímos o método fetch de loadEvent e fazemos a solicitação de API. A resposta é então enviada como props para a página Publicações (Posts), percorrendo e exibindo todas as publicações:
<script>
export let data;
const posts = data.posts;
</script>
<div class="blog_cont">
<h2>Posts</h2>
<div class="blog_grid">
{#each posts as post}
<a href={`/posts/${post.id}`} class="blog_card">
<h3>{post.title}</h3>
<p>
{post.body}
</p>
</a>
{/each}
</div>
</div>
<style>
.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all 0.5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}
</style>A árvore de arquivos atualizada fica assim:
|-- /src
|-- /lib
|-- Footer.svelte
|-- Navbar.svelte
|-- /routes
|-- /about
|-- +page.svelte
|-- /posts
|-- +page.js
|-- +page.svelte
|-- +page.svelte
|-- +layout.svelte
|-- /styles
|-- global.cssRoteamento dinâmico com o SvelteKit
Agora você tem 10 publicações exibidas em sua página de publicações; se quiser criar uma página individual para cada publicação, a melhor maneira de fazer isso é criar uma rota dinâmica.
Para fazer isso, você precisa receber o valor do slug da rota e usá-lo como parâmetro para consultar a publicação. No SvelteKit, faça isso criando uma pasta entre colchetes com o nome do parâmetro. Veja como configurar páginas de publicações individuais:
- Crie uma pasta [postid] dentro da pasta posts. O [postid] representa o parâmetro dinâmico que pode conter valores como IDs de publicação ou slugs.
- Na pasta [postid], crie dois arquivos:
- +page.svelte: Este arquivo definirá o layout e a estrutura das páginas de publicações individuais.
- +page.js: Este arquivo JavaScript tratará da busca de dados e da lógica específica para publicações individuais.
No arquivo +page.js, recupere o parâmetro postid da rota e use-o para consultar a publicação específica:
export const load = async (loadEvent) => {
const { fetch, params } = loadEvent;
const { postid } = params;
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postid}`
);
const post = await response.json();
return {
post,
};
};Então você pode acessar data como uma prop no arquivo +page.svelte:
<script>>
export let data;
const post = data.post;
</script>
<div>
<div class="blog_content">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
</div>
<style>>
.blog_content h3 {
font-size: 40px;
margin-bottom: 20px;
text-align: center;
}
</style>Confira o código-fonte completo deste projeto SvelteKit no GitHub. Consulte também a documentação oficial do SvelteKit para mais informações.
Implante sites estáticos do SvelteKit com a Kinsta
A Kinsta permite que você hospede gratuitamente até 100 sites estáticos diretamente do provedor Git de sua preferência (Bitbucket, GitHub ou GitLab).
Antes de começar a fazer o push do seu site SvelteKit, é importante adaptá-lo ao alvo da sua implantação. Neste projeto específico, estamos nos concentrando em utilizar a Hospedagem de Site Estático da Kinsta, o que requer a configuração do SvelteKit como Gerador de Site Estático (SSG).
Veja como fazer com que seu site seja pré-renderizado como uma coleção de arquivos estáticos:
- Instale o @sveltejs/adapter-static executando o seguinte comando:
npm i -D @sveltejs/adapter-static- Em seguida, adapte o arquivo svelte.config.js substituindo
adapter-autoporfallbackpara404.html:
import adapter from '@sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter({ fallback: '404.html' }),
},
};
export default config;Agora envie seus códigos para o provedor Git de sua preferência. Daí siga estes passos para implantar seu site estático na Kinsta:
- Faça login ou crie uma conta para visualizar seu painel MyKinsta.
- Autorize a Kinsta com seu provedor Git.
- Clique em Sites estáticos na barra lateral esquerda, e daí em Adicionar site.
- Selecione o repositório e o branch dos quais você deseja implantar.
- Atribua um nome exclusivo ao seu site.
- Adicione as configurações de build no seguinte formato:
- Comando build:
npm run build - Versão do node:
18.16.0 - Diretório de publicação:
build
- Comando build:
- Por fim, clique em Criar site.
E é isso! Agora você tem um site implantado em poucos segundos. Você receberá um link para acessar a versão implantada do seu site. Posteriormente, adicione seu domínio personalizado e um certificado SSL, se desejar.
Como alternativa à Hospedagem de Site Estático, você pode implantar seu site estático com a Hospedagem de Aplicativos da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benefícios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implantação personalizada usando um Dockerfile, e análises completas que englobam dados históricos e em tempo real.
Resumo
Este guia explicou o processo de criação de um site estático com o SvelteKit. Desde a configuração do ambiente de desenvolvimento até a implantação, agora você tem o conhecimento necessário para criar sites estáticos de alto desempenho com facilidade.
A criação de sites estáticos com SvelteKit oferece a combinação perfeita de desempenho e simplicidade, garantindo que seus projetos web brilhem na internet.
Agora é hora de colocar seu conhecimento em prática e começar a criar o seu próprio site estático com o SvelteKit. Você já usou o SvelteKit? Fique à vontade para compartilhar seus projetos e experiências na seção de comentários abaixo.
Deixe um comentário