Shoreditch

Configuring Shoreditch

2026-08-05T00:00:00+00:00

Everything Shoreditch exposes is set in two places: the initializer, for things that affect the whole site, and front matter, for things that affect one page.

Installing

bin/bridgetown apply https://github.com/MEHColeman/shoreditch

The automation adds the gem, writes the initializer and asks about the accent colour and badge text. By hand it is bundle add shoreditch followed by init :shoreditch in config/initializers.rb.

There is nothing to add to your esbuild entry points. The stylesheet and the theme’s one script ship as static files inside the gem, so a bundle update shoreditch is all it takes to move to a new version.

Site-wide options

init :shoreditch do
  accent "#c7254e"
  sidebar_side "right"
  logo_legend "Available for hire"
  logo_shape "square"
end

accent takes any CSS colour and drives links, tag pills and focus rings. sidebar_side moves the sidebar to the right at desk widths without any change to the markup — the grid columns simply swap. logo_legend is the small badge under the logo; leave it out and no badge is drawn. logo_shape is round or square.

Site metadata

title: Your Site
tagline: Shown under the title in the sidebar
description: Used for the meta description and the feed
logo: /images/you.png
logo_link: /about/
author:
  name: Your Name

Per-page front matter

Key	Effect
`cover`	Full-width image above the content
`thumbnail`	Image in index listings
`last_updated`	Shown in the post header
`last_verified`	Also shown in the header — see below
`credits`	Image attribution: `label`, `name`, `via`, `via_link`
`nav_order`	Puts a page in the sidebar nav, in this order
`exclude`	Keeps a page out of the sidebar nav
`logo_legend`	Overrides the badge for one page; `false` hides it

last_verified is there because technical writing goes stale in a way that essays do not. A post about Kubernetes from four years ago may still be correct, or may be actively misleading, and the honest thing is to say when you last checked rather than let the publication date imply currency.

Restyling

Every colour and dimension is a custom property on :root, and your own stylesheet loads after the theme’s. So you override rather than fork:

:root {
  --sd-accent: rebeccapurple;
  --sd-measure: 52rem;
  --sd-sidebar-width: 20rem;
}

The content column is wider than a typical prose measure on purpose: an 80-character code sample should not wrap. That is the one decision in the theme that everything else bends around.

Light and dark

Both come from prefers-color-scheme, with a toggle in the sidebar that remembers the reader’s choice and beats the system setting in either direction. An inline script in the head applies the stored preference before first paint, so there is no flash of the wrong scheme on load.

Example Content

2022-02-22T00:00:00+00:00

Howdy! This is an example blog post that shows several types of HTML content supported in this theme.

A quick reference version of all the common markdown and front matter options available with Shoreditch is available here. That file won’t be indexed, so you can keep it in your repo to refer to in future without worrying about it polluting your blog.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. ¹

The header image at the top of the page is specified by the cover property in the front matter.

A quote: Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

To get even nicer quotations, you’ll need to do a bit more work, as markdown by itself can’t handle it.

<div class="pullquote">
<div class="quotation"> I have a dream that one day this nation will rise
up and live out the true meaning of its creed: We hold these truths to be
self-evident, that all men are created equal... I have a dream that my four
little children will one day live in a nation where they will not be judged by
the color of their skin but by the content of their character.</div>
<div class="attribution">Martin Luther King</div>
</div>

I have a dream that one day this nation will rise up and live out the true meaning of its creed: We hold these truths to be self-evident, that all men are created equal... I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.

Martin Luther King

Heading

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Code

Cum sociis natoque penatibus et magnis dis code element montes, nascetur ridiculus mus.

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

Gists via GitHub Pages

This requires adding the jekyll-gist gem - then uncomment, and it should work.

Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.

Extra Styles

Hey, there! This is a message.

Hello again. This is a callout.

Warning! This is an alert!

DANGER! This is an alarm!

Lists

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec id elit non mi porta gravida at eget metus.
Nulla vitae elit libero, a pharetra augue.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

Vestibulum id ligula porta felis euismod semper.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas sed diam eget risus varius blandit sit amet non magna.

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

Item needs to be done.
Item has been done.

Definitions

HyperText Markup Language (HTML): The language used to describe and define the content of a Web page
Cascading Style Sheets (CSS): Used to describe the appearance of Web content
JavaScript (JS): The programming language used to build advanced Web sites and applications

Arbitrary HTML

Images

Tables

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Person	Fruit	Count
Xena	Cherry	12
Yvette	Banana	3
Zachary	Apple	17

Want to see something else added? Open an issue.

footnote. ↩

What’s Bridgetown?

2021-10-15T00:00:00+00:00

Bridgetown is an alternative Jamstack alternative to Jekyll. The author, Jared White, was concerned about the stagnation of development of Jekyll and created an excellent alternative. Both are currently excellent static site generators, and are well worth checking out.

What’s Jekyll?

2012-02-06T00:00:00+00:00

Jekyll is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From the project’s readme:

Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like 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.

…

Jekyll does what you tell it to do — no more, no less. It doesn’t try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.

It’s an immensely useful tool and one we encourage you to use here with beautiful themes such as Shoreditch, Hyde, or Flexible Jekyll. You can also visit Jekyll Themes COM or Jekyll Themes IO for other themes.

Find out more by visiting the project on GitHub or jekyll rb for more documentation.