Jekyll Theme CS50

Jekyll Theme CS50 is a Bootstrap-based Jekyll theme maintained by @cs50 for building course websites, offering a responsive sidebar layout, custom Liquid plugins, and extensive _config.yml options.

What is Jekyll Theme CS50?

Jekyll Theme CS50 is a Jekyll theme developed by CS50 (Harvard University's introductory computer science course) and inspired by the Hyde theme. It takes a Jekyll site's content and configuration and produces static HTML pages with a responsive sidebar layout, optional alert banners, and course-specific features such as embeddable YouTube videos, Google Calendars, SmugMug albums, and time-zone-aware dates. The theme is distributed as a Ruby gem, jekyll-theme-cs50, and the source lives on GitHub at https://github.com/cs50/jekyll-theme-cs50.

Key Features

• Responsive sidebar layout — On laptops and desktops, pages render an aside sidebar (with header, nav, and footer) next to the main content; on phones, the sidebar collapses to the top and a button reveals the nav and footer.
• Configurable alert banner — Setting cs50: alert: warning in _config.yml and creating _includes/alert.md displays an alert at the top of every page; adding "dismissible" makes it dismissible, with the user's choice remembered via localStorage.
• Time-aware content blocks — The after and before Liquid blocks hide or show content until a specified date and time in the site's time zone, using CSS (so they should not hide sensitive content).
• Built-in Liquid plugins — Includes tags and blocks: after, before, local, video, calendar, album, spoiler, and a Bootstrap alert block accepting types like primary, warning, and info.
• Bootstrap and Font Awesome — The theme integrates Bootstrap 5.1 components and includes Font Awesome free icons by default; a Pro kit can be enabled with cs50: fontawesome: KIT_ID.
• Sass customization — Create assets/page.scss with front matter and @import "page"; to override Bootstrap variables and theme styles, such as changing the link color or sidebar background.
• Markdown extensions — Supports *, +, and - for normal bullets, collapsed subtrees, and expanded subtrees; # Title *Subtitle* creates a subtitle; Mermaid and scratchblocks render inside fenced code blocks.
• Multi-site builds — Use cs50: assign to define global variables (e.g., college: true) and build separate sites from one source with bundle exec jekyll build --config _config.yml,_college.yml --destination _site/college/.

Who is it for?

Jekyll Theme CS50 is aimed at instructors, students, and developers who want a polished Jekyll site for course materials or documentation without building the layout from scratch. Course staff can publish assignments, schedules, alerts, and embedded videos; Jekyll developers can extend the theme with custom Sass, plugins, and page includes; and multicampus programs can use assign variables to render course-specific text from the same source pages.

What can you do with Jekyll Theme CS50?

• Course website managers: display an urgent alert at the top of every page by configuring cs50: alert: warning and authoring _includes/alert.md.
• Event hosts: embed a public Google Calendar in agenda mode with the calendar tag, or a SmugMug album with the album tag.
• Educators and tutorial authors: hide hints behind clickable spoilers with spoiler "Hint" and embed YouTube lectures with the video tag.
• Multi-campus sites: define different content for separate audiences with cs50: assign and per-campus YAML configuration files.

Alternatives

Hyde — the Jekyll theme that inspired this one; it offers a similar two-column layout but fewer built-in plugins and configuration options.

FAQ

How do I install Jekyll Theme CS50?

Add this line to your Gemfile: gem "jekyll-theme-cs50", group: :jekyll_plugins, git: "https://github.com/cs50/jekyll-theme-cs50", branch: "develop". Then run bundle install and set a cs50 configuration key in _config.yml as needed.

What does the after block do?

The after block hides its content until a specified date and time, e.g., {% after "2001-01-01 00:00:00" %}. Content is hidden only via CSS and still present in the DOM, so it should not be used for sensitive material like exam links.

Can I customize the theme's colors?

Yes. Create assets/page.scss with front matter and @import "page";, then override Sass variables like $link-color before the import. You can also style the aside element directly.

Does the theme work with other Jekyll plugins?

The theme automatically enables a fixed set of plugins (after, album, alert, before, calendar, local, spoiler, video) as defined in its constants.rb. You can enable additional Jekyll plugins in your Gemfile.

What is the default time zone?

The default is America/New_York. Change it with cs50: tz: America/Los_Angeles in _config.yml, and the local tag will render times in the user's own time zone based on their device clock.