Site básico

O site sitelo útil mais pequeno: uma página, uma folha de estilos e configurações de alojamento que publicam dist/. Copia as configurações para qualquer projeto sitelo — só assumem npm run builddist/.

Há uma cópia executável no repositório do sitelo, em examples/basic/.

O que obténs

Estrutura do projeto

my-site/
  sitelo.config.js
  netlify.toml           # Netlify
  vercel.json            # Vercel
  wrangler.toml          # Cloudflare Pages
  amplify.yml            # AWS Amplify
  package.json
  src/
    index.ht.js
    css/
      styles.css
import { html, head, title, link, body, h1 } from 'javascript-to-html'

export default () =>
  html({ lang: 'pt' },
    head(
      title('sitelo — exemplo básico'),
      link({ rel: 'stylesheet', href: '/styles.css' }),
    ),
    body(h1('Olá do sitelo')),
  )

Compilação

npm install
npm run build

Implementação

A partir do monorepo do sitelo, define o diretório raiz ou base da plataforma como examples/basic.

Netlify

[build]
  command = "npm run build"
  publish = "dist"

Vercel

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": null,
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm install"
}

Implementar no Vercel · Implementar no Netlify (define o diretório base como examples/basic quando for pedido).

Cloudflare Pages

Painel: comando de compilação npm run build, diretório de saída dist. Ou npx wrangler pages deploy dist depois de uma compilação local.

name = "sitelo-basic"
compatibility_date = "2025-01-01"
pages_build_output_dir = "dist"

AWS Amplify

Liga o repositório no Amplify Hosting. Para S3 + CloudFront simples, compila localmente e sincroniza dist/ com o bucket.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Trabalhas com o Cursor, o Copilot ou outro agente? Copia o AGENTS.md deste exemplo (ou vê Criar com IA) para que as ferramentas não inventem padrões de React/Next.

Primeiros passos · Criar com IA · App de tarefas · Exemplo de ilhas de servidor