Site de base

Le plus petit site sitelo utile : une page, une feuille de style et des configurations d’hébergement qui publient dist/. Copiez ces configurations dans n’importe quel projet sitelo — elles supposent seulement npm run build → dist/.

Une copie exécutable se trouve dans le dépôt sitelo, sous examples/basic/.

Ce que vous obtenez

• Un site statique d’une page construit avec 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 et nginx.conf
• Déploiement en un clic ou par connexion du dépôt depuis le dossier de l’exemple

Structure du projet

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="fr">
    <head>
      <title>sitelo — exemple de base</title>
      <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
      <h1>Bonjour depuis sitelo</h1>
    </body>
  </html>
`

import { html, head, title, link, body, h1 } from 'javascript-to-html'

export default () =>
  html({ lang: 'fr' },
    head(
      title('sitelo — exemple de base'),
      link({ rel: 'stylesheet', href: '/styles.css' }),
    ),
    body(h1('Bonjour depuis sitelo')),
  )

export default function Home() {
  return (
    <html lang="fr">
      <head>
        <title>sitelo — exemple de base</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <h1>Bonjour depuis sitelo</h1>
      </body>
    </html>
  )
}

Build

npm install
npm run build

Déploiement

Depuis le monorepo sitelo, réglez le répertoire racine ou de base de la plateforme sur 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"
}

Déployer sur Vercel · Déployer sur Netlify (réglez le répertoire de base sur examples/basic quand on vous le demande).

Cloudflare

Cloudflare oriente désormais les nouveaux projets vers Workers. npx wrangler deploy compile et envoie dist/, ou connectez le dépôt dans le tableau de bord Cloudflare. Sur Pages, utilisez la commande de build npm run build et le répertoire de sortie 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

Connectez le dépôt dans 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

Attachez cloudfront-function.js aux requêtes viewer de la distribution, et ajoutez des réponses d’erreur personnalisées pour 403 et 404 qui renvoient /404.html avec un statut 404. Ensuite, envoyez chaque build :

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

Créez la Static Web App avec / comme emplacement de l’app et dist comme emplacement de sortie. sitelo copie public/staticwebapp.config.json dans dist/, où Azure le lit et sert 404.html pour les URL inconnues.

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

Google Cloud

Firebase Hosting : choisissez un projet avec firebase use --add, puis firebase deploy compile et envoie le site. Pour Cloud Run, gcloud run deploy --source . construit le Dockerfile ci-dessous.

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

GitLab Pages

Copiez .gitlab-ci.yml à la racine d’un dépôt GitLab ; le job compile et publie dist/.

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

Render

Créez un Blueprint à partir de render.yaml, ou reprenez la même commande de build et le même répertoire de publication sur un nouveau site statique. Les URL propres et 404.html fonctionnent sans règle.

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

DigitalOcean App Platform

Indiquez votre dépôt dans github.repo, puis lancez 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

Railway compile le Dockerfile (voir Fly.io plus bas) : il n’y a rien à régler. Dans un projet qui n’en a pas, ajoutez plutôt la variable de service RAILPACK_SPA_OUTPUT_DIR=dist : Railpack sert alors dist/ via le Caddyfile, qui répond aux URL inconnues avec 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

Le Dockerfile compile avec Node et sert dist/ avec Caddy. Lancez fly launch pour créer l’app, puis 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

Lancez heroku stack:set container une fois, puis git push heroku main : Heroku construit le Dockerfile et définit PORT pour Caddy.

build:
  docker:
    web: Dockerfile

Votre propre serveur

Copiez le build sur le serveur avec rsync -a --delete dist/ you@server:/var/www/my-site/ et servez-le avec nginx.conf — ou avec le Caddyfile ci-dessus, en remplaçant :{$PORT:80} par votre domaine et /app/dist par le dossier.

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;
}

Render, Railway, Fly.io, Heroku et Cloud Run ne voient que le dossier qu’ils déploient : le lien file:../.. de l’exemple vers sitelo n’y sera donc pas résolu — déployez une copie qui installe sitelo depuis npm.

Vous travaillez avec Cursor, Copilot ou un autre agent ? Copiez le AGENTS.md de cet exemple (ou voir Créer avec l’IA) pour que les outils n’inventent pas des schémas React/Next.

Démarrage · Créer avec l’IA · Appli de tâches · Exemple d’îlots serveur