纯静态网站无需react/vue等框架，单页至五页直接手写html/css；内容较多时可选11ty等轻量静态生成器；图片字体需本地化、路径精准；github pages部署须用相对路径并配base标签；表单依赖第三方服务如formspree。
HTML静态网站到底要不要用框架
纯静态网站不需要后端、不连数据库，index.html 放服务器上就能访问——所以绝大多数情况下，**别上 React/Vue/Next.js**。那些“静态站点生成器”（如 Hugo、Jekyll）只在你有几十页内容、要批量生成导航或博客归档时才值得考虑。
常见错误现象：npm run build 出来一堆 .js 文件，但实际就三页内容，还配了 webpack.config.js；结果部署后发现首页加载 2s，FMP（首次有意义绘制）比手写 HTML 慢 400ms。
- 单页/五页以内：直接手写
index.html、about.html、style.css，用原生<link>和<script></script> - 需要复用头部/底部？用
include不现实（纯静态无服务端解析），改用构建前拼接——比如用cat header.html index-body.html footer.html > index.html - 真想自动化？选
11ty（@11ty/eleventy），它默认输出纯 HTML/CSS/JS，没运行时依赖，配置项少，.eleventy.js里几行就能控制模板逻辑
图片和字体怎么放才不拖慢首屏
静态网站没 CDN 自动优化，所有资源路径都得手动理清。用户打开 index.html 的第一秒，浏览器就在按顺序请求 style.css、logo.png、font.woff2——任一环节卡住，页面就白屏。
容易踩的坑：src="images/logo.png" 写对了，但忘了把 images/ 文件夹一起上传；或者用了 Google Fonts 的 @import，导致 CSS 渲染阻塞字体下载。
立即学习“前端免费学习笔记（深入）”；
- 图片统一放
assets/img/目录下，img标签用相对路径：<img src="assets/img/logo.png" style="max-width:90%" style="max-width:90%" alt="logo"> - 字体优先本地化：下载
Inter.woff2放到assets/fonts/，CSS 里用@font-face引入，删掉所有fonts.googleapis.com请求 - 关键图（如 banner）用
loading="eager"，非关键图（如页脚图标）加loading="lazy"，避免滚动前预加载
部署到 GitHub Pages 后 404 怎么查
GitHub Pages 默认只托管根目录下的 index.html，且要求所有链接路径匹配仓库结构。常见错误不是代码写错，而是路径大小写、斜杠结尾、子目录规则没对齐。
典型错误信息：Failed to load Resource: the server responded with a status of 404 ()，但本地 file:// 打开完全正常。
- 确认仓库设置：Settings → Pages → Source 选
Deploy from a branch，分支选main或gh-pages，文件夹选/ (root) - 所有内部链接必须用相对路径：
<a href="about.html"></a>✅，<a href="/about.html"></a>❌（带斜杠会从域名根开始找，而 GitHub Pages 子路径是username.github.io/repo-name/） - 如果用了子目录部署（比如项目名是
my-site），base标签必须声明：<base href="/my-site/">，否则 CSS/JS 路径全崩
表单提交没有后端，还能不能收留言
纯静态网站没法跑 PHP 或 Node.js 接口，但用户填完表单总得有点反馈。硬写 mailto: 链接不仅体验差，还会暴露邮箱被爬虫抓走。
可行解只有两类：第三方表单服务（推荐）、或前端直发邮件 API（需密钥，慎用）。
- 用
Formspree：注册后拿到 endpoint，form标签的action换成类似https://formspree.io/f/xxxabc123，不用改 JS，支持 CORS，免费额度够小站用半年 - 避免用
emailjs或sendgrid前端直连：API key 一旦写进.js，等于公开在网页源码里，谁都能拿去发垃圾邮件 - 如果坚持零第三方？只能加个
disabled提交按钮 +alert("已复制到剪贴板，请粘贴到邮件客户端")，但别标“提交成功”——那不是静态网站该承诺的事
事情说清了就结束。最常漏掉的是：本地测试用双击 index.html 打开，和部署后通过 HTTP 协议访问，对相对路径、fetch、字体加载的行为完全不同——上线前务必用 npx serve 或 Python 的 python -m http.server 本地起个 HTTP 服务再测一遍。