基础站点

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

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

你会得到什么

一个用 sitelo 构建的单页静态站点
netlify.toml、vercel.json、wrangler.toml 和 amplify.yml
从示例目录一键部署，或连接仓库部署

项目结构

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

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 Pages

控制台：构建命令 npm run build，输出目录 dist。或者在本地构建后执行 npx wrangler pages deploy dist。

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

AWS Amplify

在 Amplify Hosting 中连接仓库。若只用 S3 + CloudFront，就在本地构建，然后把 dist/ 同步到存储桶。

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

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

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