Jekyll vs Middleman

Overview

Jekyll

Stacks2.0K

Followers1.4K

Votes230

GitHub Stars51.0K

Forks10.2K

Middleman

Stacks170

Followers192

Votes66

GitHub Stars7.1K

Forks757

Jekyll vs Middleman: What are the differences?

Introduction: Jekyll and Middleman are both static site generators that help in creating and managing websites. While they serve a similar purpose, there are key differences between the two.

Installation and Configuration: Jekyll requires Ruby to be installed on the system as it is written in Ruby. It also requires some additional setup steps, such as installing specific gems and configuring the project. On the other hand, Middleman, also built with Ruby, has a simpler installation process and requires fewer configuration steps.
Templates and Layouts: Jekyll uses Liquid as its default templating language, allowing developers to specify reusable templates and layouts. Liquid offers a wide range of functionality and flexibility for creating dynamic content within static pages. Middleman, on the other hand, uses ERB (Embedded Ruby) as its default templating language. ERB is a powerful and widely used templating language that seamlessly integrates with Ruby code.
Extensions and Plugins: Jekyll has a strong community support with numerous extensions and plugins available. These extensions and plugins enhance Jekyll's functionality and allow developers to add features like pagination, SEO optimization, and image processing. Middleman, while also having a variety of extensions and plugins, has a smaller community compared to Jekyll. However, Middleman does offer some unique plugins that are not available in Jekyll, such as asset compression and sitemap generation.
Live Reloading and Development Server: Jekyll provides a built-in development server and live reloading feature, which automatically refreshes the browser whenever a change is made to the source files. This makes the development process efficient and allows for quick feedback on changes. Middleman also has a development server, but the live reloading feature requires an additional gem to be installed.
Asset Pipeline and Build Process: Jekyll has a simple asset pipeline, which allows developers to manage and optimize their assets, such as CSS and JavaScript, during the build process. Middleman, on the other hand, has a more extensive asset pipeline with features like asset concatenation, minification, and fingerprinting. This enables better performance and optimization for the final website.
Ease of Use and Learning Curve: Jekyll follows a convention-over-configuration approach, making it easy to get started for beginners. It has a relatively simple folder structure that is familiar to many developers. Middleman, on the other hand, provides more customization options and allows for a greater degree of control over the project structure. While this offers flexibility, it also introduces a steeper learning curve for new users.

In summary, Jekyll and Middleman differ in their installation and configuration process, default templating languages, availability of extensions and plugins, live reloading and development server capabilities, asset pipeline and build process, as well as the level of ease of use and learning curve. These differences should be considered when choosing between the two static site generators.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Jekyll, Middleman

Manuel

Frontend Engineer at BI X

Jul 22, 2020

Decided

As a Frontend Developer I wanted something simple to generate static websites with technology I am familiar with. GatsbyJS was in the stack I am familiar with, does not need any other languages / package managers and allows quick content deployment in pure HTML or Markdown (what you prefer for a project). It also does not require you to understand a theming engine if you need a custom design.

178k views178k

Comments

Kazim

Founder & Developer at Devkind

May 13, 2020

Needs advice

Fastest and quickest way to do static HTML site which is extremely fast? Do you consider above tools or is there anything more quicker or better? This is just a one time one pager site for now, no backend required. I might have such projects in future, having something to get familiar with which can immediately come into action to develop would be great advise!

53.5k views53.5k

Comments

Detailed Comparison

Jekyll	Middleman
Think of Jekyll as a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories.	Middleman is a command-line tool for creating static websites using all the shortcuts and tools of the modern web development environment.
Simple - No more databases, comment moderation, or pesky updates to install—just your content.;Static - Markdown (or Textile), Liquid, HTML & CSS go in. Static sites come out ready for deployment.;Blog-aware - Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.	Sass for DRY stylesheets;CoffeeScript for safer and less verbose javascript;Multiple asset management solutions, including Sprockets;ERb & Haml for dynamic pages and simplified HTML syntax
Statistics
GitHub Stars 51.0K	GitHub Stars 7.1K
GitHub Forks 10.2K	GitHub Forks 757
Stacks 2.0K	Stacks 170
Followers 1.4K	Followers 192
Votes 230	Votes 66
Pros & Cons
Pros 74 Github pages integration 54 Open source 37 It's slick, customisable and hackerish 24 Easy to deploy 23 Straightforward cms for the hacker mindset Cons 4 Build time increases exponentially as site grows 2 Lack of developments lately 1 Og doesn't work with postings dynamically	Pros 20 Rails for static sites 18 Erb, haml, slim 17 Live reload 7 Easy setup 3 Emacs org-mode integration by middleman-org

What are some alternatives to Jekyll, Middleman?

Hugo

Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full html website. Hugo makes use of markdown files with front matter for meta data.

Gatsby

Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.

Hexo

Hexo is a fast, simple and powerful blog framework. It parses your posts with Markdown or other render engine and generates static files with the beautiful theme. All of these just take seconds.

Gridsome

Build websites using latest web tech tools that developers love - Vue.js, GraphQL and Webpack. Get hot-reloading and all the power of Node.js. Gridsome makes building websites fun again.

Pelican

Pelican is a static site generator that supports Markdown and reST syntax. Write your weblog entries directly with your editor of choice (vim!) in reStructuredText or Markdown.

DocPad

Empower your website frontends with layouts, meta-data, pre-processors (markdown, jade, coffeescript, etc.), partials, skeletons, file watching, querying, and an amazing plugin system. DocPad will streamline your web development process allowing you to craft full-featured websites quicker than ever before.

Metalsmith

In Metalsmith, all of the logic is handled by plugins. You simply chain them together. Since everything is a plugin, the core library is actually just an abstraction for manipulating a directory of files.

11ty

A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML. Works with HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and JavaScript Template Literals.

MkDocs

It builds completely static HTML sites that you can host on GitHub pages, Amazon S3, or anywhere else you choose. There's a stack of good looking themes available. The built-in dev-server allows you to preview your documentation as you're writing it. It will even auto-reload and refresh your browser whenever you save your changes.

VuePress

A minimalistic static site generator with a Vue-powered theming system, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue's own sub projects.

Related Comparisons

Jekyll vs Middleman: What are the differences?

Introduction: Jekyll and Middleman are both static site generators that help in creating and managing websites. While they serve a similar purpose, there are key differences between the two.

Installation and Configuration: Jekyll requires Ruby to be installed on the system as it is written in Ruby. It also requires some additional setup steps, such as installing specific gems and configuring the project. On the other hand, Middleman, also built with Ruby, has a simpler installation process and requires fewer configuration steps.
Templates and Layouts: Jekyll uses Liquid as its default templating language, allowing developers to specify reusable templates and layouts. Liquid offers a wide range of functionality and flexibility for creating dynamic content within static pages. Middleman, on the other hand, uses ERB (Embedded Ruby) as its default templating language. ERB is a powerful and widely used templating language that seamlessly integrates with Ruby code.
Extensions and Plugins: Jekyll has a strong community support with numerous extensions and plugins available. These extensions and plugins enhance Jekyll's functionality and allow developers to add features like pagination, SEO optimization, and image processing. Middleman, while also having a variety of extensions and plugins, has a smaller community compared to Jekyll. However, Middleman does offer some unique plugins that are not available in Jekyll, such as asset compression and sitemap generation.
Live Reloading and Development Server: Jekyll provides a built-in development server and live reloading feature, which automatically refreshes the browser whenever a change is made to the source files. This makes the development process efficient and allows for quick feedback on changes. Middleman also has a development server, but the live reloading feature requires an additional gem to be installed.
Asset Pipeline and Build Process: Jekyll has a simple asset pipeline, which allows developers to manage and optimize their assets, such as CSS and JavaScript, during the build process. Middleman, on the other hand, has a more extensive asset pipeline with features like asset concatenation, minification, and fingerprinting. This enables better performance and optimization for the final website.
Ease of Use and Learning Curve: Jekyll follows a convention-over-configuration approach, making it easy to get started for beginners. It has a relatively simple folder structure that is familiar to many developers. Middleman, on the other hand, provides more customization options and allows for a greater degree of control over the project structure. While this offers flexibility, it also introduces a steeper learning curve for new users.

Jekyll vs Middleman

Overview