Jekyll Theme Prologue screenshot

Jekyll Theme Prologue

Author Avatar Theme by Chrisbobbe
Updated: 15 Feb 2021
444 Stars

A Jekyll version of the "Prologue" theme by HTML5 UP

Categories

Overview:

Prologue is a simple, single page responsive site template that has been converted into a blog-aware Jekyll theme by Chris Bobbe. It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. The theme includes various features such as blogging and multi-page capabilities, integration with Formspree.io for contact forms, customizable homepage sections with cover photos, and automatic search engine optimization (SEO) meta tags. It also comes with built-in Google Analytics and a custom 404 page.

Features:

  • Blogging and Multi-page Support: Prologue includes the features you expect from Jekyll, allowing you to create blog posts and multiple pages for your site.
  • Formspree.io Integration: Easily integrate a contact form into your site by adding your email to the configuration file.
  • Customizable Homepage Sections: Build your homepage by adding custom scrolly sections in the “_sections” folder. Each section can have a cover photo with alt text for screen readers and SEO optimization.
  • Social Profile Integration: Add your social profile links easily in the configuration file.
  • Automatic SEO Meta Tags: Prologue generates SEO meta tags automatically based on the information provided in the configuration file and frontmatter.
  • Google Analytics: Built-in support for Google Analytics. Simply add your Tracking ID to the configuration file.
  • Custom 404 Page: Prologue includes a customizable 404 page that you can activate by moving it to your project directory.

Installation:

There are two ways to get started with Prologue:

  1. Install the jekyll-theme-prologue gem. Instructions can be found in the Jekyll documentation. After running bundle install, you can locate the theme files by running open $(bundle show jekyll-theme-prologue). A sample \_config.yml file is included with the gem, and you can activate it by moving it to your project’s root directory.
  2. Fork or clone the Prologue repository from GitHub. If you’re planning to use GitHub Pages, create a branch named “gh-pages” and replace theme: jekyll-theme-prologue with remote_theme: chrisbobbe/jekyll-theme-prologue in the provided \_config.yml. Make sure to set the url and base_url for your own website in \_config.yml. For local testing, leave them blank. You will also need to add a photo/avatar to your project and specify its path in the \_config.yml file.

To build your homepage with Prologue, make sure your \_config.yml file includes the line collections: [sections]. This tells Jekyll to look for content in the \_sections folder that you can create in your project’s root directory. You can add content to your homepage by creating HTML or Markdown documents in the \_sections folder. Each section can have a cover photo by adding cover-photo: path/to/photo.jpg and providing an alt text with cover-photo-alt.

Summary:

Prologue is a Jekyll theme based on the Prologue HTML5 UP template. It offers a clean and minimalistic design, with a sticky sidebar for easy navigation. The theme includes various features such as blogging support, integration with Formspree.io for contact forms, customizable homepage sections with cover photos, automatic SEO meta tags generation, built-in Google Analytics, and a custom 404 page. Installation can be done either through the gem or by cloning the GitHub repository. With Prologue, you can quickly create a responsive and feature-rich website or blog.