jekyll-theme-console-bulma

Terminal-inspired Jekyll theme. Bulma-powered, retro-styled, hacker-approved.

Demo: retromatter.github.io/jekyll-theme-console-bulma

Light Dark
Light theme Dark theme
Hacker Nord
Hacker theme Nord theme

Installation

Add this line to your Jekyll site's Gemfile:

gem "jekyll-theme-console-bulma"

And set the theme in your _config.yml:

theme: jekyll-theme-console-bulma

Then run:

bundle install

Usage

Layouts

  • default.html — Base layout. All other layouts inherit from this.
  • home.html — Landing page. Renders index.md content followed by a post list.
  • page.html — Standard page with title and content.
  • post.html — Blog post with title, date, optional author, and optional Disqus comments.

Includes

  • head.html — <head> block. Loads Bulma CSS, theme styles, SEO tags, and favicon links.
  • header.html — Site title and theme switcher dropdown.
  • footer.html — Copyright year and attribution.
  • disqus_comments.html — Disqus comment box (optional).
  • google-analytics.html — Google Analytics (production only, optional).

Sass

  • _sass/jekyll-theme-console-bulma.scss — Entry point.
  • _sass/jekyll-theme-console-bulma/_variables.scss — CSS custom properties for all color themes.
  • _sass/jekyll-theme-console-bulma/_base.scss — Body, typography, links, selection.
  • _sass/jekyll-theme-console-bulma/_layout.scss — Container, header, footer, responsive breakpoint.
  • _sass/jekyll-theme-console-bulma/_components.scss — Bulma overrides, code blocks, site-title.

Assets

  • assets/main.scss — Compiled to assets/main.css by Jekyll.
  • assets/css/bulma.min.css — Local Bulma CSS (no CDN dependency).
  • assets/js/theme-switcher.js — Theme switcher with localStorage persistence.
  • assets/favicons/ — Favicon set (SVG, ICO, PNG, apple-touch-icon, web app manifest).

Favicons

A favicon set is included and automatically linked in head.html. No configuration needed — it works out of the box.

The following files are shipped with the gem under assets/favicons/:

File Purpose
favicon.svg Modern browsers (SVG icon)
favicon.ico Legacy browser fallback
favicon-96x96.png PNG fallback
apple-touch-icon.png iOS home screen icon
web-app-manifest-192x192.png Home screen / app icon (192px)
web-app-manifest-512x512.png Home screen / app icon (512px)
site.webmanifest Web app manifest (enables "Add to Home Screen")

To replace the favicons, override any of the files above by placing your own versions in assets/favicons/ in your site root.

Tip: If you want browsers to auto-detect your favicon without relying on <link> tags, also place a favicon.ico and favicon.svg at your site root. This is not required — the theme links them explicitly — but some crawlers and browser toolbars look for them at the root.

Configuration

Add any of the following to your _config.yml:

# Site
title: Your Site Title
description: Your site description.
url: https://yoursite.com

# Theme switcher default (light, dark, hacker, nord)
# Users can change this via the dropdown — preference is saved in localStorage

# Disqus comments
disqus:
  shortname: your_disqus_shortname

# Google Analytics (production only)
google_analytics: UA-NNNNNNNN-N

Color Themes

Four palettes are included out of the box, switchable via the dropdown in the header:

Theme Background Accent
Light #fff #000
Dark #000 #dbdbdb
Hacker #000 #00ff00
Nord #2e3440 #d8dee9

To add a custom palette, override _sass/jekyll-theme-console-bulma/_variables.scss in your site and add a new [data-theme="your-name"] block.

Customization

Any theme file can be overridden locally. Copy the file you want to change into the matching directory in your site root and edit it — Jekyll will use your version instead of the gem's.

# Example: override just the footer
cp $(bundle show jekyll-theme-console-bulma)/_includes/footer.html _includes/footer.html

Optional Extensions

These are not included in the gem — the theme stays intentionally minimal. If you want any of them, source the file separately and drop it into your site root.

File What it does How to wire it up
_layouts/compress.html Minifies HTML output at build time Set layout: compress as the parent of your _layouts/default.html
_includes/anchor_headings.html Adds # anchor links to every heading Replace {{ content }} in post.html with {%- include anchor_headings.html html=content -%}
_includes/author.html Author bio card below post content Add {%- include author.html -%} inside _layouts/post.html
assets/js/search.min.js Client-side search (Lunr.js) Also requires a generated search index and a search UI page

Note on compress.html: Use with caution — HTML minification can break whitespace inside <pre> and <code> blocks, which are central to this theme.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/retromatter/jekyll-theme-console-bulma.

This project is intended to be a safe, welcoming space for collaboration. Contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The theme is available as open source under the terms of the MIT License.