建立第一个站点

这条路径从 basic blocklet 开始，然后只加入 Web Device 渲染所需的最小文件。所有代码块都在 arc 2.0.0-beta.25 上与下一页的检查、构建和浏览器验收一起跑过。

1. 建立 blocklet 目录

arc blocklet init ./my-site --recipe basic --name my-site
cd ./my-site

实际运行会建立 blocklet.yaml，并返回生成的 DID。不要手工删掉它；这个本地身份不要求你创建、登录或部署 DID Space。

确认生成的 id：

grep -E '^id:' blocklet.yaml

本教程用 --name my-site 创建时，验证结果是 id: my-site。下一步 .route/web 的 site 必须使用你自己看到的值。

建立后续文件要用到的目录：

mkdir -p .route .web/components/hello pages/index

2. 声明 Web route

用任意文本编辑器建立 .route/web。site 使用上一步从 blocklet.yaml 读到的 id：

site: my-site
path: /
source: .
handler: web

这一步很重要。没有这条 route，直接访问 blocklet 会寻找 .aup/app.aup 或 .aup/app.json；那是 AUP app 的入口，不是这个静态 Web Device 站点的入口。

3. 写站点配置

用任意文本编辑器建立 .web/site.yaml：

domain: my-site.local
locale: en
render-mode: static
seo:
  og-site-name: My Site
  description: A minimal local Web Device site.

这里的 domain 是站点配置，不是把网站部署到该域名。下一页仍会使用本机 localhost 地址。

4. 写一个站点组件

用任意文本编辑器建立 .web/components/hello/manifest.json：

{
  "name": "hello",
  "description": "A minimal local component.",
  "props": {
    "title": { "type": "string" },
    "text": { "type": "string" }
  }
}

建立 .web/components/hello/render.js：

export function render(ctx) {
  const { props, escapeHtml } = ctx;
  return {
    html: `<main><h1>${escapeHtml(props.title || "")}</h1><p>${escapeHtml(props.text || "")}</p></main>`,
  };
}

建立 .web/components/hello/style.css：

main {
  max-width: 42rem;
  margin: 4rem auto;
  font-family: system-ui, sans-serif;
}

这个版本的检查器要求一个不覆盖主题组件的自定义组件同时有 manifest.json、render.js 和 style.css。少了 style.css 时，arc dsl lint 会报出 missing_web_component_file。

5. 写首页布局

建立 pages/index/layout.aup：

page index {
  hello main title="Hello, Web Device" text="This page is rendered by a local blocklet."
}

hello 是上一步建立的组件名称。这里的页面只有一个组件，目的是先验证 Web route、AUP layout 与站点组件能一起工作；不要把它当成完整的主题或内容站样板。

继续到运行、检查与查看，用当前目录验证这些文件并打开真实页面。