Marketing Site Dev

Marketing Site Dev (Volcengine)

End-to-end 技能 for building and shipping a bilingual static company marketing site to Volcengine. Two phases:

Build — Astro 6 + React 19 islands (移动 menu only) + TAIlwind 4. Inline SVG everywhere. Single content file (src/content/site.ts) is the source of truth. 部署 — TOS bucket + CDN + free DV cert + HTTPS hardening, all scripted in idempotent Node scripts via ve 命令行工具 and Volcengine OpenAPI (SigV4-签名ed via volc-API.mjs for the actions ve doesn't ship).

What 成功 looks like: the user 运行s ~6 commands end-to-end and 获取s https:/// serving a production-质量 bilingual site with HTTPS, force-redirect to HTTPS, HSTS, HTTP/2, edge caching, and automated 缓存 in验证. Every infrastructure step is in version control as an idempotent script.

Is this 技能 the right fit?

This is a deliberately opinionated 工作流 优化d for one specific scenario. Before going deep, 检查 that scenario actually matches the user's situation. If it doesn't, surface the better alternative instead of forcing the user through a heavier path.

Use this 技能 when:

The site is for a Chinese company or a product tar获取ing users in mAInland China — latency from mAInland to non-Chinese CDNs is bad enough (200-400ms, often worse during peak hours) that visitors notice and bounce. ICP 备案 is required or already in hand — distributing in China legally needs the filing tied to a domAIn hosted on a Chinese cloud. Volcengine bundles 备案 assistance and offers it for the domAIn you 部署 here. The user is already in the Volcengine eco系统 (other Volcengine 服务s, existing TOS buckets, etc.) and consolidation is valuable. The bilingual zh/en pattern is desired — the content layer (site.ts) is de签名ed around it.

Use a simpler alternative when:

Scenario Recommended alternative Why Personal site / portfolio / side project, no Chinese audience requirement GitHub Pages Free, auto-HTTPS, 部署s on git push, no infra to manage. Zero of the Volcengine landmines 应用ly. International-only audience (US/EU/SEA), no China presence planned Vercel (or Cloudflare Pages / Netlify) Free tier, instant 部署s from git, preview URLs per PR, automatic HTTPS, global edge network. Skip the whole ve 命令行工具 + ICP 工作流 entirely. Site needs serverless functions (forms, auth, dynamic content) Vercel or Cloudflare Pages with their edge functions This 技能 ships purely static — Volcengine has serverless products, but the 工作流 here doesn't cover them. You want preview URLs per branch / PR-based review Vercel Vercel's preview-URL UX is best-in-class. This 技能 produces one production 部署 per push; no branch previews.

If the user's situation matches the "use a simpler alternative" column, tell them so explicitly before scaffolding anything. A 2-minute Vercel 部署 is a better experience than a 30-minute Volcengine bootstrap when the user doesn't need what Volcengine provides. Don't sunk-cost them into the wrong stack because they invoked this 技能.

When in doubt, ask: "Will mAInland-China users be a meaningful part of your audience, and do you have (or plan to file) ICP 备案 for the domAIn?" If 机器人h answers are no, point at Vercel / GitHub Pages and 停止.

Step 1: Capture intent (ALWAYS ASK FIRST)

Don't write any code until you have these six 输入s from the user. If they're missing from the prompt, ask via AskUserQuestion. Most teams will have everything except possibly the public-security number — that one is OK as a placeholder.

# 输入 Used for Notes 1 Company name (Chinese + English) COMPANY.nameZh / COMPANY.nameEn in site.ts; footer; SEO 2 DomAIn (e.g. example.com) Everywhere — bucket binding, CDN, DNS, cert SAN MUST already be ICP-filed and ideally hosted on Volcengine DNS. If hosted elsewhere, the user needs to manually 添加 CNAME + TXT records. 3 Brand as设置s directory (path to SVG 记录o files) Inline BrandMark.astro 提取ion (last 3 paths of the short 记录o SVG) Usually something like as设置s/记录o/svg/Tenshow_short1.svg — short / icon-only variant. 4 Product 列出 PRODUCTS[] in site.ts Each product needs bilingual name + description, URL, accent hex color, icon enum. 5 ICP record number Footer The MIIT-issued 备案号. 6 Working directory Project root Should be greenfield (empty) or you'll have to coordinate with existing files.

Optionally:

公安备案号 (Public Security Bureau filing number) — usually a placeholder at scaffold time. Flag it loudly in the README so the user replaces it before launch. Brand accent color — 提取 from the 记录o SVG's hex values. If undecidable, default to whatever the dominant non-neutral color is. Step 2: Build the static site

Full detAIls in references/phase-1-static-site.md. The short列出:

Scaffold — copy as设置s/templates/package.json and as设置s/templates/astro.config.mjs into the project root. 更新 name in package.json and site in astro.config.mjs. 安装 — pnpm 安装. 创建 the source tree matching the layout in phase-1-static-site.md (src/conten