Jekyll Material Theme

Jekyll Material Theme is a Jekyll theme that recreates Google's Material Design look using the Materialize CSS framework, distributed as a Ruby gem and configurable entirely through _config.yml.

What is Jekyll Material Theme?

Jekyll Material Theme is an open-source Jekyll theme built on Material Design principles and the Materialize CSS framework. It takes a standard Jekyll site as input, requiring only a gem installation and a _config.yml entry, and produces a static site with Material-styled components, a portfolio section, parallax backgrounds, and integrated analytics. The theme is maintained by James Hamann and other contributors on GitHub, and is released under the MIT License.

Key Features

• Material Design styling — Implemented with Materialize CSS, giving buttons, cards, navigation, and forms the standard Material look without custom CSS.
• Portfolio section — Supports up to four projects, each configured via project_one through project_four variables with name, description, URL, and a Materialize icon (e.g. location_on, photo_camera).
• Portfolio display modes — Choose between a card grid or a carousel layout by setting portfolio_type to cards or carousel.
• Parallax backgrounds — Two configurable images (parallax_image_one, parallax_image_two) create scrolling depth on the page.
• Skills and experience section — Renders icons from the Devicon set for tools like AWS, Android, React, and Docker; external icon URLs can be added per skill via a uri field, and icon_size controls their font size.
• Cookie policy notice — Displays a configurable accept dialog, with the confirmation message set via cookie_accept_message.
• Analytics integration — Supports both Google Analytics (google_analytics_tracking_id) and Google Tag Manager (tag_manager_id); if both are set, Tag Manager takes precedence.
• Built-in plugins — Includes jekyll-feed for RSS, jekyll-assets for asset bundling, and jekyll-minifier for minified output, all defined in the sample _config.yml.
• Customization flags — Toggle syntax highlighting with syntax_highlighting, hide footer text with display_footer, and set icon color via colored.

Who is it for?

• Jekyll site owners who want a Material Design aesthetic without hand-writing CSS, since all theming comes from the gem and config.
• Developers and designers building a personal portfolio who need project cards, a skills matrix, and parallax hero images out of the box.
• Bloggers who need a feed, syntax-highlighted code blocks, and analytics/cookie-consent features already wired into the template.
• Teams or individuals managing multiple static sites who benefit from a gem-based theme that can be updated via Bundler instead of copying files.

Use cases

• Freelance developers: Set up a portfolio with four project showcases, each linking to a GitHub repo with a Material icon, plus a skills section listing their tech stack.
• Tech bloggers: Publish posts with syntax highlighting enabled and have an RSS feed via jekyll-feed, while tracking visitors through Google Analytics.
• Personal sites: Use parallax images and a carousel portfolio to create a visually distinct landing page, and control footer attribution with the display_footer option.

FAQ

How do I install Jekyll Material Theme?

Add gem "jekyll-material-theme" to your Gemfile, set theme: jekyll-material-theme in _config.yml, and run bundle. The README also allows installing the gem directly with gem install jekyll-material-theme.

Is Jekyll Material Theme free?

Yes, the theme is open source under the MIT License, so you can use, modify, and redistribute it freely.

How do I customize the portfolio?

Edit the project_one through project_four keys in _config.yml, setting the name, description, URL, and a Materialize icon name. You can also change portfolio_type between cards and carousel.

Can I add custom skill icons?

Yes, in the skills list you can use any Devicon icon name like react or docker. For an icon not in Devicon, add a uri field pointing to an external or local image file, like uri: /assets/my_icon.jpg.

Does the theme support Google Analytics?

Yes, set google_analytics_tracking_id in _config.yml. If you also set tag_manager_id, Tag Manager will take precedence and you should set up Analytics through GTM.