前端框架精选项目

Middleman

基于 Ruby、以灵活配置和模板工作流见长的成熟静态站点生成器。

GitHub 访问官网

主要语言Ruby

开源许可MIT

项目类型前端框架

维护状态活跃维护

OVERVIEW

项目概述

Middleman 使用 Ruby DSL 配置构建流程，将 ERB、Haml、Sass 等模板和本地数据编译为可直接部署的静态文件，适合内容网站、原型与前端交付项目。

Middleman 是采用 MIT 许可证、由 Ruby 驱动的静态站点生成器。项目以 source 目录保存页面、样式、脚本和图片，通过 config.rb 的 Ruby DSL 配置路径、页面规则、扩展与生产优化，最终把模板编译到 build 目录。它默认使用 ERB，也支持 Haml、Sass、SCSS 以及其他由 Tilt 接入的模板引擎；配合 Front Matter、Layout、Partial、Helper、Data File、Proxy 和扩展，可以在不引入数据库或应用服务器的前提下构建结构清晰、数据驱动的多页面网站。

核心语言Ruby

默认模板ERB

默认输出目录build

FEATURES

主要特点

Middleman 把 Ruby 的可编程能力、经典服务端模板和纯静态交付组合成一套成熟的前端开发工作流。

Ruby 配置 DSL

config.rb 可以使用变量、循环、条件和自定义方法配置目录、页面规则、构建环境与扩展，比纯声明式配置更灵活。

多模板引擎

默认采用 ERB，并支持 Haml、Sass、SCSS 等引擎；通过 Tilt 兼容的 Gem 还可加入更多模板语言。

Layout 与 Partial

Layout 用 yield 包裹页面内容，Partial 提取可复用片段并接收局部变量，适合组织导航、页脚和内容卡片。

Front Matter

页面顶部可使用 YAML 或 JSON 定义标题、布局和任意元数据，并在模板中通过 current_page.data 访问。

数据驱动模板

根目录 data 中的 YAML、YML 和 JSON 文件会自动暴露给模板，可让内容维护与页面结构相互分离。

动态页面生成

Proxy 能让一份模板根据数据生成多个输出页面，配合 ignore 与目录索引可构建产品、团队或文档详情页。

Helper 与 Sitemap

内置链接、资源和内容捕获 Helper，也可编写 Ruby Helper；Sitemap API 则能遍历和操作构建中的页面资源。

扩展与生产优化

扩展可挂接生成流程并添加博客、LiveReload 或部署能力；构建环境还可启用 CSS、JavaScript 压缩和资源哈希。

USE CASES

适用场景

适合熟悉 Ruby、需要精细控制 HTML 与构建过程，并希望最终只交付静态文件的团队。

企业与产品官网

Layout、Partial 和数据文件适合构建品牌官网、产品介绍、价格页及不依赖后端的营销页面。

活动页与多页面专题

Ruby 配置和 Proxy 能批量生成结构一致的地区、嘉宾、议程或产品详情页。

前端原型与静态交付

设计师和前端工程师可使用真实模板、样式预处理与示例数据制作高保真原型，并直接交付 HTML、CSS 和 JavaScript。

Ruby 团队的内容网站

熟悉 Ruby、Bundler 与 ERB 的团队可以复用现有技能和 Gem，在同一语言内编写模板 Helper 与构建逻辑。

博客与项目文档

通过 middleman-blog、Front Matter 和 Sitemap 可实现文章、标签、分页、Feed 及文档导航。

数据目录与展示站

YAML 或 JSON 数据配合 Proxy，适合生成成员目录、案例库、地点列表和小型产品目录。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

Middleman 擅长的地方

config.rb 允许直接使用 Ruby 表达复杂的构建规则
ERB、Haml、Sass 与 Tilt 生态为模板工作流提供丰富选择
Layout、Partial、Helper 和数据文件的职责清晰且易于组合
生成标准静态文件，可部署到任意对象存储、CDN 或静态主机
Proxy 和 Sitemap 适合批量创建数据驱动的多页面内容
历史成熟，适合维护既有 Ruby 静态站点和经典前端工作流

需要注意

采用前应考虑的问题

需要维护 Ruby 环境

本地与 CI 需要安装兼容的 Ruby、Bundler 和原生编译工具，并用 Gemfile.lock 避免依赖版本漂移。

生态活跃度相对有限

相比 Astro、Eleventy 或 Hugo，新的主题、教程和集成更少；采用第三方扩展前应检查最近发布、Issue 和版本兼容性。

前端管线需要自行选择

Middleman 允许接入 Webpack、Sprockets 或其他外部管线，但现代 JavaScript、TypeScript 和组件框架通常需要额外配置。

任意 Ruby 逻辑会增加复杂度

config.rb 和 ERB 都能执行复杂代码，应把通用逻辑提取到 Helper 或扩展，并避免在模板内堆积查询和业务规则。

动态功能依赖外部服务

生产结果是静态文件，登录、实时数据、表单处理和个性化需要客户端脚本、API 或第三方服务。

大型站点构建需实测

大量 Proxy 页面、图片处理和复杂扩展会拉长构建时间；内容规模很大时应与 Hugo 等高性能生成器做真实基准。

QUICK START

快速开始

安装 Middleman，创建项目，用 Front Matter、ERB Layout 和 YAML 数据完成一个项目列表页，再生成生产文件。

1安装并创建 Middleman 网站

bash

ruby --version
gem install middleman
middleman init my-middleman-site
cd my-middleman-site
bundle exec middleman server

# 在浏览器打开 http://localhost:4567

2配置开发与生产构建

ruby

# config.rb
set :site_title, "开源项目志"
set :css_dir, "stylesheets"
set :js_dir, "javascripts"
set :images_dir, "images"

activate :directory_indexes

configure :build do
  activate :minify_css
  activate :minify_javascript
  activate :asset_hash
end

3创建共享 Layout

html

<!-- source/layouts/layout.erb -->
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
      <%= current_page.data.title || config[:site_title] %>
    </title>
  </head>
  <body>
    <%= partial "partials/header" %>
    <main><%= yield %></main>
  </body>
</html>

4使用 Front Matter 编写页面

html

<!-- source/index.html.erb -->
---
title: 热门开源项目
description: 发现值得关注的框架与开发工具
---

<header class="hero">
  <p>OPEN SOURCE DIRECTORY</p>
  <h1><%= current_page.data.title %></h1>
  <p><%= current_page.data.description %></p>
</header>

5用 YAML 数据渲染项目列表

yaml

# data/projects.yml
- name: Middleman
  language: Ruby
  url: https://middlemanapp.com/
- name: Bridgetown
  language: Ruby
  url: https://www.bridgetownrb.com/

6在 ERB 中读取数据

html

<!-- source/projects.html.erb -->
<section class="project-grid">
  <% data.projects.each do |project| %>
    <article>
      <h2>
        <a href="<%= project.url %>"><%= project.name %></a>
      </h2>
      <p><%= project.language %></p>
    </article>
  <% end %>
</section>

7生成可部署的静态文件

bash

# 检查生产构建
bundle exec middleman build

# 生成结果位于 build 目录
# 可将该目录发布到任意静态主机或 CDN

下一步：项目生成后使用 bundle exec middleman 执行命令，以采用 Gemfile.lock 锁定的版本；复杂前端资源管线应通过外部管线或经过维护状态评估的扩展接入。

ALTERNATIVES

类似项目

这些工具同样生成静态网站，但在 Ruby 集成、模板约束、构建速度和前端工具链上各有取舍。

Bridgetown

由 Ruby 驱动、可从静态生成渐进扩展到服务端渲染的现代网站框架。

查看项目

Jekyll

使用 Ruby、Markdown 和 Liquid 构建博客与内容网站的成熟静态站点生成器。

查看项目

Eleventy

灵活、稳定且支持多种模板语言的 JavaScript 静态站点生成器。

查看项目

Hugo

使用 Go 编写、以快速构建和完整内容管理能力著称的静态站点生成器。

查看项目

Nanoc

面向 Ruby 开发者、强调可编程编译规则与内容处理管线的静态站点生成器。

访问官网

Metalsmith

以插件管线为核心、可自由组合内容转换步骤的 Node.js 静态站点生成器。

访问官网

COMPARISON

Middleman vs Bridgetown

Middleman 与 Bridgetown 都使用 Ruby 生成网站，但定位不同：Middleman 延续经典、灵活的前端模板与静态构建工作流；Bridgetown 则以现代内容模型、Ruby 组件、esbuild 和可选服务端能力提供更完整的渐进式框架。

比较维度	Middleman	Bridgetown
核心定位	经典静态站点生成器与前端开发工具	渐进式网站生成器与可选全栈框架
配置方式	以 config.rb Ruby DSL 和扩展为核心	YAML 配置、Initializers、Builder 与插件组合
模板系统	默认 ERB，支持 Haml 与其他 Tilt 引擎	ERB、Serbea、Liquid、Streamlined 与 Ruby 组件
内容模型	页面、Front Matter、Data File、Sitemap 与 Proxy	Resource、Collection、Taxonomy、关系与分页
组件复用	Layout、Partial 和 Ruby Helper	Ruby Component、Slot、生命周期和并置资源
前端资源	自选外部资源管线或扩展	集成 esbuild、PostCSS、npm，可选 Sass
动态能力	生产输出静态文件，动态功能接入外部服务	可选 Roda 路由、API、SSR 与 Session
更适合	既有 Middleman 项目、Ruby 模板和精细静态构建	新 Ruby 内容站、组件化 UI 和静态到动态扩展

如何选择

如果要维护现有 Middleman 代码、依赖 Haml 或特定扩展，或只需要可编程的静态 HTML 构建，Middleman 依然直接而稳定；如果是新项目，并看重 Ruby 组件、现代 JavaScript 打包、结构化内容模型，或未来可能加入 SSR 和 API，Bridgetown 通常提供更清晰的增长路径。决定前应分别验证 Ruby 版本、关键插件和完整生产构建，而不只比较默认示例。

VERIFICATION

资料核验

版本、维护信息与本页采用的官方资料来源。

最后核验2026 年 7 月 26 日

核验版本官方当前稳定版与文档主线

内容维护Docs100 编辑整理

项目维护状态活跃维护

本次核验覆盖 Middleman 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新，具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。

维护状态核验2026 年 7 月 26 日 · 最近可见代码活动：2026 年 6 月 24 日

官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 6 月 24 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。

查看官方仓库

官方来源3 项

Middleman 官方网站与文档项目官方

Middleman 官方源码仓库GitHub

Middleman 官方发布记录GitHub Releases