Newsletter
Join the Community
Subscribe to our newsletter for the latest news and updates
CS50's Bootstrap-based Jekyll theme with custom layouts, plugins, and Sass configuration for course sites.
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.
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.
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.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.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).after, before, local, video, calendar, album, spoiler, and a Bootstrap alert block accepting types like primary, warning, and info.cs50: fontawesome: KIT_ID.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.*, +, and - for normal bullets, collapsed subtrees, and expanded subtrees; # Title *Subtitle* creates a subtitle; Mermaid and scratchblocks render inside fenced code blocks.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/.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.
cs50: alert: warning and authoring _includes/alert.md.calendar tag, or a SmugMug album with the album tag.spoiler "Hint" and embed YouTube lectures with the video tag.cs50: assign and per-campus YAML configuration files.Hyde — the Jekyll theme that inspired this one; it offers a similar two-column layout but fewer built-in plugins and configuration options.
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.
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.
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.
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.
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.
