DOCSEARCHbyAlgolia
Submit Docs

Middleman Static Site Generator

website·Indexed 39 days ago

https://middlemanapp.com

A Ruby-based static site generator that allows developers to create websites using various template languages, layouts, and partials. Features include a development server, a sitemap for navigation and feed creation, Frontmatter for page-specific variables, and the `middleman build` command for exporting static sites.

Tokens
33K
Snippets
245
Records
302
Agent score
72%

What's inside Middleman

  1. Enable Pretty URLs (Directory Indexes) in Middleman

    By default, Middleman outputs files exactly as named (e.g., about-us.html.erb becomes about-us.html). To enable directory indexes—where Middleman creates a folder for each page and outputs the template as index.html—activate the :directory_indexes extension in config.rb. This allows pages to be accessed via clean URLs (e.g., http://example.com/about-us) on servers that support index files like Apache or Amazon S3.
    activate :directory_indexes

  2. Asset Pipeline removal in Middleman v4

    The Rails-style asset pipeline functionality has been removed from the core of Middleman v4. For users who require asset pipeline capabilities, the recommended alternative is to use an External Pipeline, which provides a more robust and future-proof approach to asset management.

  3. Enable Pretty URLs using the Directory Indexes extension

    By default, Middleman outputs files exactly as described (e.g., about-us.html.erb becomes about-us.html). To create 'Pretty URLs', enable the directory_indexes extension. This tells Middleman to create a folder for each .html file and place the built template as the index.html of that folder, allowing the page to be accessed at http://example.com/about-us instead of http://example.com/about-us.html.
    activate :directory_indexes

  4. Understand the Middleman project skeleton structure

    A new Middleman project is initialized with a standard skeleton consisting of:

    • source/ folder: The primary location for building the website, containing subfolders for JavaScript, CSS, and images (which can be customized).
    • config.rb: The file used for Middleman configuration settings.

  5. Integrate external frontend build tools using external_pipeline

    Middleman provides an external_pipeline feature that allows you to run external frontend tools (such as webpack, Ember, or Broccoli) as subprocesses. The external tool outputs content to a temporary folder, which Middleman then incorporates into its site map. This is useful for using modern JS/CSS toolchains that exist outside of the Rails asset pipeline.

  6. Understand the default Middleman directory structure

    A standard Middleman project is organized into a root directory containing configuration files and several specialized subdirectories. The root contains the Gemfile for dependency management and config.rb for project configuration. The primary content and assets reside within the source directory, while compiled output is sent to the build directory.
    mymiddlemansite/
+-- .gitignore
+-- Gemfile
+-- Gemfile.lock
+-- config.rb
+-- source
    +-- images
    ¦   +-- background.png
    ¦   +-- middleman.png
    +-- index.html.erb
    +-- javascripts
    ¦   +-- all.js
    +-- layouts
    ¦   +-- layout.erb
    +-- stylesheets
        +-- all.css
        +-- normalize.css

  7. Middleman CLI command overview

    Installing Middleman provides a set of command-line tools used to manage your static site. The primary commands include init for creating a new project, server for local development, and build for generating the final static site.
    middleman init
middleman server
middleman build

  8. Integrate Rack Middleware in Middleman

    Middleman supports Rack Middleware, allowing developers to use a wide range of Rack-compatible libraries to modify content on-the-fly or intercept requests before they reach the Middleman server. Middleware is added to the project via the config.rb file using the use command.

  9. Hire professional development services for Middleman

    Professional development services are available to help improve projects and support open-source development. Available services include:

    • Code reviews and team education
    • Development of custom extensions
    • Architecture design for large-scale projects
    • General project assistance

    Interested parties can contact the developer via email at me@tdreyno.com to discuss project needs.

  10. Understand supported template languages in Middleman

    Middleman provides access to multiple template languages to simplify HTML development, ranging from simple variable/loop injection to entirely different formats that compile to HTML. Out-of-the-box, Middleman supports ERB, Haml, Sass, SCSS, and CoffeeScript. Additional engines can be enabled if they are Tilt-compatible gems.

  11. Integrate external frontend build tools using external_pipeline

    The external_pipeline feature allows Middleman to run multiple subprocesses (such as task runners, dependency managers, or transpilers) that output content to temporary folders. Middleman then merges these folders into its own sitemap, enabling the use of tools like webpack, Gulp, Grunt, or EmberCLI alongside Middleman.

  12. Understand the Middleman project skeleton

    A new Middleman project generates a standard hierarchy of folders and files:

    • source/: The primary directory where the website is built. It typically contains subfolders for CSS, JavaScript, and images.
    • config.rb: The main configuration file used to define project settings.