sveltekit static blog template

Modelo de blog estático SvelteKit

Um modelo leve e personalizável para blogs e sites de portfólio, desenvolvido com SvelteKit.

Foi construído com alguns objetivos em mente:

• Design responsivo: o site tem boa aparência e comportamento em telas de todos os tamanhos;
• Rápido: carrega apenas o necessário para funcionar;
• Adaptável: suporta modo escuro da maioria dos sistemas operacionais por padrão (desktop e dispositivos móveis);
• Bonito: tenha um design agradável, acessível e agradável à vista.

Consegui isso com a ajuda do SvelteKit. Quase não há JavaScript em execução e, na verdade, funciona com JS desativado! Embora JS seja incrível, é importante saber quando não é necessário.

Site de demonstração

Você pode ver o modelo ao vivo no site de demonstração. Além disso, você pode verificar todos os componentes isoladamente no Histórico.

Construindo e executando localmente

Para executá-lo localmente, basta executar:

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

O site agora deve estar disponível em http://localhost:5173/ na sua máquina local e o endereço IP da sua máquina local na sua rede – ótimo para testes em sistemas operacionais móveis.

História / Livro de histórias

Usei o Histoire, uma alternativa ao Storybook baseada em Vite para poder ver e desenvolver componentes isoladamente. Para abri-lo, execute npm run story:dev .

Otimização de imagem

Este site usa transmutação de imagens para otimizar automaticamente as imagens usadas no site. Isso significa que mesmo se você usar formatos de imagem não ideais (como PNGs sem perdas), ele examinará as imagens e converterá as imagens em WebP e AVIF para você, desde que você use o componente <Image /> em vez de <img /> . Isso é feito na construção, portanto não muda nada ao executar o site localmente.

Gerenciando postagens

Todas as postagens são arquivos Markdown processados ​​com MDsveX para permitir o uso de componentes Svelte dentro delas. Para facilitar o gerenciamento de postagens, recomendo fortemente a extensão Front Matter VS Code, que oferece uma interface de usuário semelhante a um CMS.

Hospedagem

Quando você executa npm run build , o site será compilado em um site estático, o que significa que você pode hospedá-lo em praticamente qualquer lugar. Algumas alternativas gratuitas que recomendo são GitHub Pages, Vercel e Netlify.