Back to templates

Template details

Quartz

A crystalline Jekyll theme for blog with light/dark mode, MathJax, Disqus, and Google Analytics support.

About this template

Quartz is an open-source Jekyll theme for blogs that packages a minimal design with built-in support for math rendering, comments, analytics, and archive pages. It takes standard Jekyll content — posts, pages, and YAML data files — and outputs a static blog styled with Sass, requiring no JavaScript framework. The theme is published by vfvong under the MIT License and is distributed both as a Ruby gem (jekyll-theme-quartz) and through the jekyll-remote-theme plugin for GitHub Pages.

What makes Quartz stand out?

  • Light and dark mode — Automatically follows the visitor's operating system preference using the CSS media query prefers-color-scheme; no manual toggle needed.
  • MathJax support — Render LaTeX math on any page by setting math: true in that page's front matter; MathJax is disabled by default to keep pages lightweight.
  • Disqus comments — Enable by adding your Disqus shortname to _config.yml; the integration loads the Disqus embed where the layout places it.
  • Google Analytics 4 — Add a Measurement ID (format G-XXXXXXXXXX) to _config.yml and the theme injects the GA4 snippet into the site head.
  • Pure Liquid archive pages — Create archive pages grouped by years, categories, or tags by creating a page with layout: archive and type: years (or categories/tags) in front matter; no JavaScript or plugins required.
  • Font Awesome icons — Social links defined in _data/social.yml reference Font Awesome icon classes (e.g. fab fa-twitter), so you don't need to bundle custom SVG files.
  • Easy head customization — Add a _includes/custom-head.html file to your repository and its contents are automatically merged into the theme's <head> without copying the entire head include.
  • Sass variable overrides — Change colors and fonts by copying _sass/quartz/_variables.scss into your project and editing the variable values, rather than overriding whole stylesheets.

Who should use Quartz?

  • Jekyll bloggers who want a minimal, text-focused theme and are comfortable editing YAML data files for navigation and social links.
  • Technical writers who need MathJax for equations and a clean layout for code-heavy posts.
  • GitHub Pages users who want a free theme installed via remote_theme with no Gemfile overhead.
  • Developers building a personal site who want light/dark mode, comments, and analytics pre-integrated without writing those services from scratch.

What can you do with Quartz?

  • Publish a personal blog — Configure navigation in _data/navigation.yml and social links in _data/social.yml, then write posts in Markdown with front matter.
  • Create category and tag archives — Use the archive layout with type set to categories or tags, and link them from posts via categories_path and tags_path in _config.yml.
  • Enhance posts with math — Set math: true on individual posts to enable MathJax for inline and display equations.
  • Add engagement and tracking — Plug in Disqus for comments and Google Analytics 4 for visitor metrics by setting two simple keys in _config.yml.

How does Quartz work?

Quartz is installed like any Jekyll theme: add gem "jekyll-theme-quartz" to your Gemfile, set theme: jekyll-theme-quartz in _config.yml, and run bundle. For GitHub Pages, add the jekyll-remote-theme plugin and set remote_theme: vfvong/jekyll-theme-quartz instead. The theme then reads your posts, front matter, and _data files to generate static pages, applying the configured layout, navigation, and integrations during Jekyll's build step.