middleman build 生成的 HTML 没有样式或 JS,是因为默认不自动编译前端资产;需启用 :sprockets 或手动运行 webpack,确保资源路径正确且文件实际生成。

middleman build 命令为什么生成的 HTML 没有样式或 JS?
默认 middleman build 只输出静态文件,不会自动编译、压缩或注入资源路径 —— 尤其是用了 sprockets 或 webpack 管理前端资产时,HTML 里引用的 /js/app.js 或 /css/style.css 实际并不存在。
- 确认是否启用了
activate :asset_hash:启用后文件名带哈希,但需确保build前已运行过middleman build或middleman server触发一次编译,否则build阶段找不到源文件 - 检查
config.rb中是否漏掉activate :minify_html或activate :minify_css—— 这些插件本身不负责生成文件,只处理已有输出;真正生成 CSS/JS 的是activate :sprockets或外部构建流程 - 如果用
webpack,必须在build前手动执行npx webpack --mode=production,且确保config.rb里通过set :js_dir, 'dist/js'等指向正确目录
如何让 middleman 正确处理 .html.erb 或 .md 文件里的动态内容?
middleman 默认只处理 .html.erb 和 .md,但变量作用域和数据加载方式容易混淆:比如 page_articles 在 blog 模式下才可用,普通页面里直接写 会报错。
- 所有页面级数据(如
title、layout)必须定义在文件顶部的 YAML frontmatter 中,例如:---<br>title: "首页"<br>layout: "main"<br>---
- 想在非 blog 页面访问文章列表?得显式启用
activate :blog,再用blog.articles而不是page_articles -
.md文件中嵌入 ERB 代码需开启activate :front_matter_parser, :erb,否则会被当成纯文本输出
为什么 local server 能正常访问,但 build 后的 HTML 点击链接 404?
这是 Middleman 的路由机制导致的:开发时靠 Rack 动态响应任意路径,而 build 输出的是扁平静态文件,/about/ 这种路径必须对应 about/index.html,否则服务器找不到。
- 确保每个需要“目录式 URL”的页面都命名为
about/index.html.erb,而不是about.html.erb - 若用
proxy生成动态路径(如proxy "/news/#{slug}", "/templates/news.html", locals: { ... }),要确认目标模板存在且locals数据在 build 时可序列化 —— 含 Proc 或未定义变量会静默失败 - GitHub Pages 默认不支持目录索引,部署前加
set :relative_links, true并用activate :directory_indexes保证/blog/自动找blog/index.html
怎么让生成的 HTML 更小、更符合现代 SEO 要求?
middleman 默认不处理语义化标签、preload、defer 或 HTTP 头,这些全靠配置补全;而且部分优化插件(如 minify_html)对内联 JS/CSS 的处理很敏感。
立即学习“前端免费学习笔记(深入)”;
- 启用
activate :minify_html, remove_comments: true, remove_intertag_spaces: true,但避免对含pre或textarea的页面启用remove_intertag_spaces,否则破坏代码块缩进 - 在
config.rb中用set :favicon, '/images/favicon.ico'并确保该路径在source/images/下存在,否则 build 后 HTML 中的<link rel="icon">指向 404 - 添加自定义
<meta>或<link rel="preload">推荐写在layouts/layout.erb中,用实现页面级覆盖
最常被忽略的是:build 产物依赖于 config.rb 中 set :http_prefix, '' 的值 —— 如果部署到子路径(如 https://user.github.io/project/),这里必须设为 '/project',否则所有相对路径都错位,连 CSS 都加载不了。



















