CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
Svelte 与 Astro 入门/课时/部署
RawBlame
课时目录12 节

Svelte 与 Astro 入门

  1. 01替代框架概览
  2. 02Svelte 基础
  3. 03SvelteKit
  4. 04Astro 入门
  5. 05Eleventy 静态站
  6. 06静态站点生成
  7. 07与 React 对比
  8. 08数据加载
  9. 09样式与组件
  10. 10部署
  11. 11何时选用
  12. 12综合练习

部署

静态托管;衔接 ft-deploy。

25 分钟

部署

SvelteKit 与 Astro 都能产出 静态文件夹 或 Node 服务;Eleventy 几乎总是 _site/ 静态包。部署决策在 adapter / output 配置 阶段就应确定——与 ft-deploy 的平台选型直接衔接。

学习目标

  • 为 Astro / SvelteKit 静态站选对 build 与 publish 目录
  • 对照 Vercel、Netlify、Cloudflare Pages 的适配方式
  • 理解本站 Next platform 与静态文档站部署差异

产物形态

项目类型命令典型输出托管
Astro 静态astro builddist/任意静态 CDN
SvelteKit + adapter-staticvite buildbuild/ 或 dist/同上
SvelteKit + adapter-nodenode build服务器Docker / VPS
Eleventyeleventy_site/同上

纯静态无需 Node 进程——与 html-css-essentials 上传 GitHub Pages 同级;SSR 路由则需 Vercel/Netlify 或自建 Node。

平台配置示例(概念)

Netlify(netlify.toml):

[build]
  command = "npm run build"
  publish = "dist"

Cloudflare Pages:连接 Git → build command → output dist。环境变量在面板配置,不要 commit .env。

与 nextjs-essentials 全栈部署对比:Next 常 零配置 Vercel;Astro 静态站 任意静态平台等价,更灵活、更便宜。

CI 门禁

push → GitHub Actions
         → npm ci
         → npm run build
         → (可选)link checker / lighthouse
         → 平台 deploy preview

沿用 frontend-toolchain-essentials 的 ESLint、tsc --noEmit:静态站同样 先绿测再发布。多环境用 PUBLIC_API_URL / PUBLIC_ 前缀区分预览与生产。

与 Java 后端并存

docs.example.com   → Astro 静态 (CDN)
app.example.com    → Next 或 SvelteKit SSR
api.example.com    → Spring Boot

CORS 与 cookie 域在 backend 配置;前端静态站 只调公开 API。勿把 react-essentials 开发时的 localhost:5173 硬编码进生产 build。

练习

  • 本地 astro build + npx serve dist 验证静态可浏览
  • 写一段 Netlify 或 Cloudflare 的 build 设置(command + publish)
  • 说明:何时必须 adapter-node 而非 adapter-static

小结

静态站 = build 产物直传 CDN;SSR 才要 Node/边缘。 下一课汇总:内容站 vs 重交互,何时选用本 track 框架。

加载本节练习…
← 上一课样式与组件下一课 →何时选用