纯静态网站无需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 渲染阻塞字体下载。
立即学习“前端免费学习笔记(深入)”;
H5自适应企业网站源码是一套非常优秀的asp自适应企业网站源码,这套源码有很多优秀的功能,也是很多企业网站所不具备的。H5自适应企业网站源码使用asp+access搭建,运行环境要求windows+IIS。网站前台是动态页面,不过网址URL已经做了伪静态处理,URL的格式都是.html结尾,对搜索引擎也比较友好。H5自适应企业网站源码的一个亮点功能就是会员等级制度及权限划分功能,普通会员栏目发布的
- 图片统一放
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 服务再测一遍。










