Static Site With Tailwind

Site estático (com Tailwind)

A pilha

• HTML
• Tailwindcss

Como correr

DEV

• Execute yarn serve:dev Isso servirá src com index.html como seu ponto de entrada.

• Em um segundo terminal, execute yarn watch . Isso observará todos os arquivos dentro de src/ e saberá como recompilar app.css com quaisquer novos estilos de vento de cauda que foram adicionados ao longo do caminho.

Nota: há um pequeno atraso aqui antes de você clicar em atualizar... "Ei, este não é um aplicativo KISS sofisticado do React e basta clicar no botão Atualizar."

• Para compilar Tailwind CSS manualmente para dev sem assistir, execute yarn compile:css:dev

Edifício para Produção

Então você realmente deseja implantar essa coisa ...

• Execute yarn build:all para fazer "todas as coisas". Isso copiará todos os arquivos *.html para um diretório /build e compilará app.css com NODE_ENV=production . Isso diz ao Tailwind para usar nossa opção purge predefinida em tailwind.config.js

• Copie este diretório /build para qualquer site de hospedagem estática... Ou diga ao seu site de hospedagem estática para usar /build/index.html como ponto de entrada.

Nota: Após a construção, você também pode servir esta compilação localmente para ver como será a aparência de "prod" executando yarn serve:prod . Isso servirá o diretório build em vez de src para visualização com o código recém-compilado.

Roteamento

Como faço para criar alguns URLs limpos para novas páginas? Adicione um arquivo vercel.json com routes definidas e deixe o Vercel cuidar do resto.

 {
  "version": 2,
  "routes": [
    {"src": "/about", "dest": "/about.html"}
  ]
}

Para mais detalhes, confira seus documentos aqui

É isso

É isso aí pessoal... Coloque um pouco de HTML estático, link index.css e divirta-se.

Hospedagem com Vercel

Vinculando o repositório e as configurações

Visualização da implantação

Feito!