Material Bliss Jekyll Theme is an open-source Jekyll theme that combines Jekyll's static site generation with a React, Redux, and React-Router front end transpiled by Webpack, delivering a Material Design interface with dynamic features such as fuzzy search.
What is Material Bliss Jekyll Theme?
It is a Jekyll theme that takes standard Jekyll content, layouts, and _config.yml settings as input, and produces a hybrid site with static HTML for SEO and client-side React components for interactivity. The repository is hosted under the InsidiousMind GitHub account, and the live demo is at code.liquidthink.net. It is built with React, Redux, React-Router, and Webpack, and uses Jekyll plugins to export site data as JSON for the React app.
Key Features
- Dual light and dark themes — Toggle between a light theme and a dark theme; screenshots show the dark theme both with and without the push-out menu active.
- Dynamic fuzzy search — Search content with auto-fill suggestions, powered by JSON generated by the jekyll-react plugin.
- Push-out menu — A slide-in navigation that saves horizontal space and keeps focus on the page content.
- Masonry project page — A dynamic portfolio layout that arranges project cards in a masonry grid.
- Static or dynamic pages via front matter — Each page can be set to render as static Jekyll HTML or as a dynamic React-managed page.
- RESTful-like API — The accompanying Jekyll-React plugin outputs site configuration and content into JSON endpoints that Redux actions can fetch.
- Performance optimized — Reports a 99/100 score on Google's TestMySite, using Jekyll Assets and Webpack for asset pipeline.
- Fully responsive — Layout adapts across most devices, including mobile and tablet sizes.
Who is it for?
- Jekyll developers who want to adopt React components without replacing their static site generator; they can reuse the theme's build scripts and plugin setup.
- Bloggers who want a Material Design blog with a dark mode, instant client-side search, and the option to keep posts static for fast loading.
- Portfolio owners who need a masonry-style project gallery and are comfortable configuring the React data source via
_config.yml.
What can you do with it?
- Launch a personal blog — Write posts in Markdown, set the theme to dark or light, and let readers use fuzzy search to find content instantly.
- Build a project portfolio — Use the masonry project page to showcase work items, with each project opened as a static or dynamic page.
- Create a hybrid static-dynamic site — Mark important pages as static so Google crawls the HTML, while navigation and interactive widgets are rendered by React.
How does it work?
The theme splits into a Jekyll site and a React development folder, ./react-dev. Jekyll plugins (Jekyll-pages-api and Jekyll-React) convert content and YAML config into JSON, which is fetched by the Redux actions in ./react-dev/actions/index.js. For production, run ./build-prod.sh; for development, run npm run jekyll in one terminal and ./build-dev.sh in another. The static routes for instant-loading pages are configured in ./react-dev/helpers.js.
Pros and cons
- Pros: Combines static Jekyll SEO with dynamic React interaction; offers light/dark themes and fuzzy search; includes a masonry portfolio layout; performance score of 99/100 on TestMySite.
- Cons: The repository's own TODO list shows that category pages, pagination, and better mobile footer styling are not yet implemented; setup requires both Jekyll and Node.js build steps, which is heavier than a pure Jekyll theme.
FAQ
Does Material Bliss Jekyll Theme support both static and dynamic pages?
Yes. Each page can be set in front matter to render as static Jekyll HTML or as a dynamic React-managed page. Static pages preserve crawler-friendly HTML, while dynamic pages allow richer client-side behavior.
What build tools are required?
You need Jekyll (Ruby) and Node.js with npm. Use ./build-prod.sh for a production build; for development, run npm run jekyll and ./build-dev.sh in separate terminals.
Is the search feature real-time?
The theme ships with a dynamic fuzzy search that provides auto-fill suggestions. It consumes JSON produced by the jekyll-react plugin, so search runs client side without a server.
What improvements are still planned?
The repository's TODO list includes creating category pages, adding pagination, making the footer look better on mobile, implementing sliding on mobile touch, making the expanded search bar more responsive, and saving the theme choice in cookies.
Is the theme free to use?
The theme is published on GitHub as an open-source Jekyll theme; the repository does not mention any paid license or commercial tier, so it is free to use and modify.
