Material Bliss

Material Bliss is a Material Design-inspired Jekyll theme that pairs Jekyll's static site generation with a React, Redux, and React-Router front end, giving you dynamic features like fuzzy search and theme switching while keeping static HTML for SEO.

What is Material Bliss?

Material Bliss is a Jekyll theme created by InsidiousMind (GitHub user) that uses React, Redux, React-Router, and Webpack to build a hybrid static/dynamic site. It takes Jekyll-generated content, converts it to JSON via the jekyll-react and jekyll_pages_api plugins, and renders that data with React components. The theme outputs production-ready static files through a build script (./build-prod.sh) and supports both static and dynamic pages via frontmatter options. A live demo is available at code.liquidthink.net.

Key Features

• Light and Dark Themes — Switch between two built-in color schemes using a toggle in the push-out menu; the theme is applied instantly without reloading.
• Dynamic Fuzzy Search — Search your entire site with autocomplete, powered by a RESTful-like API that the jekyll-react plugin generates from your Jekyll content.
• Push-out Menu — A sliding navigation drawer that saves screen space and keeps users focused on content; active menu items are highlighted.
• Masonry Project Layout — A responsive, grid-based project page that arranges cards in a masonry pattern, useful for portfolios and galleries.
• Static or Dynamic Pages — Control each page's behavior with a frontmatter option; static pages remain crawlable by search engines while dynamic pages get React's interactivity.
• Performance Optimized — Scores 99/100 on Google's TestMySite, using Jekyll Assets and Webpack to minify and bundle assets.
• Customizable Configuration — Site settings placed under react in _config.yml are passed to React via Redux action creators, letting you manage state easily.

Who is it for?

• Jekyll developers who want to add a modern React-based UI without abandoning Jekyll's content workflow.
• Portfolio owners who need a clean project showcase with filtering/search and a polished responsive layout.
• Tech bloggers who value SEO and want to enhance their static posts with a dynamic search bar and low-friction navigation.

Use cases

• Developers building a personal website: use the masonry project page to display GitHub repos or case studies, and enable fuzzy search so visitors can quickly find projects by name or tag.
• Designers presenting a portfolio: let clients toggle between light and dark themes to view work in their preferred environment, and use the push-out menu to keep the visual clean.
• Bloggers writing about programming: author posts in Markdown, publish as static HTML for search engines, and rely on the React-driven search and routing for a fast, app-like reading experience.

How does it work?

The theme uses two build pipelines. For production, run ./build-prod.sh from the repository root to generate the static site. For development, run npm run jekyll in one terminal and ./build-dev.sh in a second terminal; the two processes run together to serve a live-reloading version. Before building, you must set your site's ROOT_URL in react-dev/actions/index.js, list your static routes in react-dev/helpers.js, and configure menu items in react-dev/components/menu_items.js.

FAQ

Does Material Bliss need Node.js and Webpack?

Yes. The theme bundles React components with Webpack, so your build environment needs Node.js installed. The repository includes package.json and build scripts that call npm and Webpack commands.

Can I use Material Bliss with GitHub Pages?

The theme relies on custom Jekyll plugins (jekyll-react and jekyll_pages_api) to convert site data into JSON. These plugins require a Jekyll build that supports custom plugins, so GitHub Pages' standard build may not work without modification.

How do I add a new page to the menu?

Open react-dev/components/menu_items.js and add an entry to the menuItems object. For example, to add a Coding page, add the object property Coding: '/coding/'.

What is the RESTful-like API mentioned in the features?

The jekyll-react plugin generates JSON representations of your Jekyll site data, which React fetches to power dynamic features like fuzzy search and project filtering. You can think of it as an API endpoint that serves your site's content as structured JSON.

How do I set my site's URL?

In react-dev/actions/index.js, change the ROOT_URL variable to match your production domain. For instance, if your site is at https://example.com, set const ROOT_URL = 'https://example.com';.