2026 年 3 月 28 日 · 工程实践
静态站点的构建与部署：一次讲清 dist 的一生
从 npm run build 到 Nginx 托管，梳理静态站点从构建产物到线上可访问的全过程，以及常见的坑。
部署 前端工程化
静态站点部署看起来简单——把构建产物丢上服务器就行。但真正走一遍，细节比想象中多。
构建产物的组成
astro build 输出的 dist/ 包含 HTML 页面、CSS/JS 资源和静态文件三部分。资源文件默认带哈希指纹，方便长缓存；HTML 则每次发布都会更新。
部署时的关键配置
- 单页应用需要配置 history 回退（本项目为多页静态站，天然无需）；
- 静态资源建议配置较长的
Cache-Control，配合指纹实现增量更新； - 开启 gzip / brotli 压缩，首屏体积通常能再降 60% 以上。
别忘了 CDN
如果面向全国用户，把 dist/ 挂到 CDN 上是性价比最高的优化——缓存命中后，源站几乎零压力。