基础站点

最小但可用的 sitelo 站点：一个页面、一份样式表，以及若干发布 dist/ 的托管配置。把这些配置复制到任何 sitelo 项目里 —— 它们只假设 npm run build → dist/。

可运行的副本在 sitelo 仓库的 examples/basic/ 下。

你会得到什么

一个用 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 和 nginx.conf
从示例目录一键部署，或连接仓库部署

项目结构

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="zh">
    <head>
      <title>sitelo —— 基础示例</title>
      <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
      <h1>你好，来自 sitelo</h1>
    </body>
  </html>
`

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

export default () =>
  html({ lang: 'zh' },
    head(
      title('sitelo —— 基础示例'),
      link({ rel: 'stylesheet', href: '/styles.css' }),
    ),
    body(h1('你好，来自 sitelo')),
  )

export default function Home() {
  return (
    <html lang="zh">
      <head>
        <title>sitelo —— 基础示例</title>
        <link rel="stylesheet" href="/css/styles.css" />
      </head>
      <body>
        <h1>你好，来自 sitelo</h1>
      </body>
    </html>
  )
}

构建

npm install
npm run build

部署

在 sitelo 单体仓库中，把平台的根目录或基础目录设为 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"
}

部署到 Vercel · 部署到 Netlify（出现提示时把基础目录设为 examples/basic）。

Cloudflare

Cloudflare 现在建议新项目使用 Workers。npx wrangler deploy 会构建并上传 dist/，也可以在 Cloudflare 控制台连接仓库。若使用 Pages，把构建命令设为 npm run build，输出目录设为 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

在 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

把 cloudfront-function.js 关联到分配的查看器请求，并为 403 和 404 添加自定义错误响应，以 404 状态码返回 /404.html。之后每次构建都上传：

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

创建 Static Web App 时，应用位置填 /，输出位置填 dist。sitelo 会把 public/staticwebapp.config.json 复制到 dist/，Azure 在那里读取它，并为未知 URL 返回 404.html。

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

Google Cloud

Firebase Hosting：先用 firebase use --add 选择项目，再由 firebase deploy 构建并上传。使用 Cloud Run 时，gcloud run deploy --source . 会构建下面的 Dockerfile。

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

GitLab Pages

把 .gitlab-ci.yml 复制到 GitLab 仓库的根目录；这个任务会构建并发布 dist/。

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

Render

用 render.yaml 创建一个 Blueprint，或在新建静态站点时填入相同的构建命令和发布目录。简洁 URL 和 404.html 无需任何规则即可生效。

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

DigitalOcean App Platform

把 github.repo 改成你的仓库，然后运行 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 会用 Dockerfile 构建（见下文 Fly.io），无需任何设置。项目里没有它时，改为添加服务变量 RAILPACK_SPA_OUTPUT_DIR=dist：Railpack 会通过 Caddyfile 托管 dist/，未知 URL 返回 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

Dockerfile 用 Node 构建，再用 Caddy 托管 dist/。先运行 fly launch 创建应用，之后运行 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

先运行一次 heroku stack:set container，再运行 git push heroku main：Heroku 会构建 Dockerfile，并为 Caddy 设置 PORT。

build:
  docker:
    web: Dockerfile

自有服务器

用 rsync -a --delete dist/ you@server:/var/www/my-site/ 把构建产物复制到服务器，再用 nginx.conf 托管——也可以用上面的 Caddyfile，只需把 :{$PORT:80} 换成你的域名，把 /app/dist 换成目录。

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 和 Cloud Run 只能看到它们部署的那个文件夹，所以示例中指向 sitelo 的 file:../.. 链接在那里无法解析——请部署一份从 npm 安装 sitelo 的副本。

在用 Cursor、Copilot 或其他智能体？把本示例里的 AGENTS.md 复制过去（或参见用 AI 开发），免得工具自己发明 React/Next 的写法。

快速开始 · 用 AI 开发 · 待办应用 · 服务端区块示例