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 build → dist/.

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

O que obténs

Um site estático de uma página construído com o sitelo
netlify.toml, vercel.json, wrangler.jsonc, amplify.yml, cloudfront-function.js, staticwebapp.config.json, firebase.json, .gitlab-ci.yml, render.yaml, .do/app.yaml, Caddyfile, Dockerfile, fly.toml, heroku.yml e nginx.conf
Implementação num clique ou ligando o repositório a partir da pasta do exemplo

Estrutura do projeto

my-site/
  sitelo.config.js
  netlify.toml           # Netlify
  vercel.json            # Vercel
  wrangler.jsonc         # Cloudflare Workers
  amplify.yml            # AWS Amplify
  cloudfront-function.js # AWS S3 + CloudFront
  firebase.json          # Firebase Hosting
  .gitlab-ci.yml         # GitLab Pages
  render.yaml            # Render
  .do/app.yaml           # DigitalOcean App Platform
  Caddyfile              # Railway, Fly.io, Heroku, Cloud Run
  Dockerfile             # Railway, Fly.io, Heroku, Cloud Run
  .dockerignore          # Railway, Fly.io, Heroku, Cloud Run
  fly.toml               # Fly.io
  heroku.yml             # Heroku
  nginx.conf             # Your own server
  package.json
  public/
    staticwebapp.config.json  # Azure Static Web Apps
  src/
    index.ht.js
    css/
      styles.css

export default () => `
  <html lang="pt">
    <head>
      <title>sitelo — exemplo básico</title>
      <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
      <h1>Olá do sitelo</h1>
    </body>
  </html>
`

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')),
  )

export default function Home() {
  return (
    <html lang="pt">
      <head>
        <title>sitelo — exemplo básico</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <h1>Olá do sitelo</h1>
      </body>
    </html>
  )
}

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

A Cloudflare recomenda agora o Workers para projetos novos. npx wrangler deploy compila e envia dist/, ou liga o repositório no painel da Cloudflare. No Pages, usa o comando de compilação npm run build e o diretório de saída dist.

{
  "name": "sitelo-basic",
  "compatibility_date": "2026-10-01",
  "build": {
    "command": "npm run build"
  },
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page",
    "html_handling": "drop-trailing-slash"
  }
}

AWS Amplify

Liga o repositório no Amplify Hosting.

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

AWS S3 + CloudFront

Associa o cloudfront-function.js aos pedidos de visualizador da distribuição e adiciona respostas de erro personalizadas para 403 e 404 que devolvam /404.html com o estado 404. Depois envia cada compilação:

function handler(event) {
  var request = event.request
  var uri = request.uri

  if (uri.endsWith('/')) {
    request.uri += 'index.html'
  } else if (uri.slice(uri.lastIndexOf('/') + 1).indexOf('.') === -1) {
    request.uri += '/index.html'
  }

  return request
}

npm run build
aws s3 sync dist/ s3://my-bucket --delete
aws cloudfront create-invalidation --distribution-id MY_DISTRIBUTION_ID --paths "/*"

Azure Static Web Apps

Cria a Static Web App com / como localização da app e dist como localização de saída. O sitelo copia o public/staticwebapp.config.json para dist/, onde o Azure o lê e serve o 404.html para URL desconhecidos.

{
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html"
    }
  }
}

Google Cloud

Firebase Hosting: escolhe um projeto com firebase use --add e depois firebase deploy compila e envia o site. Para o Cloud Run, gcloud run deploy --source . compila o Dockerfile abaixo.

{
  "hosting": {
    "public": "dist",
    "predeploy": "npm run build",
    "trailingSlash": false
  }
}

GitLab Pages

Copia o .gitlab-ci.yml para a raiz de um repositório GitLab; o job compila e publica dist/.

deploy-pages:
  image: node:24
  script:
    - npm ci
    - npm run build
  pages:
    publish: dist
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Render

Cria um Blueprint a partir do render.yaml ou usa o mesmo comando de compilação e diretório de publicação num site estático novo. Os URL limpos e o 404.html funcionam sem regras.

services:
  - type: web
    name: sitelo-basic
    runtime: static
    buildCommand: npm install && npm run build
    staticPublishPath: ./dist

DigitalOcean App Platform

Indica o teu repositório em github.repo e corre doctl apps create --spec .do/app.yaml.

name: sitelo-basic
static_sites:
  - name: site
    github:
      repo: your-name/your-site
      branch: main
      deploy_on_push: true
    build_command: npm run build
    output_dir: dist

Railway

O Railway compila o Dockerfile (vê Fly.io mais abaixo), por isso não há nada a configurar. Num projeto sem ele, adiciona antes a variável de serviço RAILPACK_SPA_OUTPUT_DIR=dist: o Railpack serve então dist/ através do Caddyfile, que responde a URL desconhecidos com 404.html.

:{$PORT:80} {
  root * /app/dist
  encode zstd gzip
  try_files {path} {path}/index.html
  file_server
  handle_errors {
    rewrite * /{err.status_code}.html
    file_server
  }
}

Fly.io

O Dockerfile compila com o Node e serve dist/ com o Caddy. Corre fly launch para criar a app e depois fly deploy.

FROM node:24-slim AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM caddy:2-alpine
COPY Caddyfile /etc/caddy/Caddyfile
COPY --from=build /app/dist /app/dist

node_modules
dist
.git

app = "sitelo-basic"

[http_service]
  internal_port = 80
  force_https = true
  auto_stop_machines = "stop"
  auto_start_machines = true
  min_machines_running = 0

Heroku

Corre heroku stack:set container uma vez e depois git push heroku main: o Heroku compila o Dockerfile e define PORT para o Caddy.

build:
  docker:
    web: Dockerfile

O teu próprio servidor

Copia a compilação para o servidor com rsync -a --delete dist/ you@server:/var/www/my-site/ e serve-a com o nginx.conf — ou com o Caddyfile acima, trocando :{$PORT:80} pelo teu domínio e /app/dist pelo diretório.

server {
  listen 80;
  server_name example.com;
  root /var/www/my-site;

  location / {
    try_files $uri $uri/index.html =404;
  }

  error_page 404 /404.html;
}

O Render, o Railway, o Fly.io, o Heroku e o Cloud Run só veem a pasta que implementam, por isso a ligação file:../.. do exemplo ao sitelo não se resolve lá — implementa uma cópia que instale o sitelo a partir do npm.

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