Eye Gallery from Eye Division is a (work in progress) base theme and configuration for Jekyll version 3.6, based on Bourbon and Neat. It is a fork of the Centratrium custom theme by Ben Centra. Props to Neil C Smith for the original forkage.
Built with these awesome libraries:
- Bourbon v 5 - May 2018
- jQuery v 2.2.4 - May 2019
- Neat - v 3.0.0 - May 2018 - TO BE DEGRADED
- [Font Awesome][fontawesome]
- HighlightJS v 9.12.0
- Lightbox2 v 2.10.0
- Flexslider v 2.7.1
- FitVids v.1.1.0
This theme comes with a number of features, including:
- Easily customizable fonts and colors
- Cover images for your homepage and blog posts
- Pagination enabled by default
- Archiving of posts by categories and tags
- Disqus integration for post comments
- Lightbox for viewing full-screen photos and albums
- Google Analytics with custom page name tracking
- Google Recaptcha for CloudCannon integrated contact form
- Social media integration (Twitter, Facebook, LinkedIn, GitHub, and more)
- SVG icons from Icomoon
- Flexslider for simple slider
- Better Bourbon Buttons Neato add-on
- Designed for use on CloudCannon hosting for customer editing
- uses imgIX as image CDN on staging and production
If you're just getting started with Jekyll, you can use this repository as a starting point for your own site. Just download this project and add all the files to your project. Add your blog posts to the posts/
directory, and create your pages with the proper Jekyll front matter (see posts.html
for an example).
If your site already uses Jekyll, follow these steps:
- Replace the files in the
_includes
,_layouts
, and_sass
directories with those from this project. - Replace your
index.html
with the one from this project, and copy over theposts.html
file as well. - Copy the contents of the
_config.yml
from this project in to yours, and update the necessary information.
Don't forget to install Jekyll and other dependencies:
# cd into project directory
cd eyegallery
# install Bundler if you don't have it already
gem install bundler
# install jekyll and jekyll-sitemap
bundle install
Information on Bundler
If you want change the CSS of the theme, you'll probably want to check out these files in the _sass/
directory:
base/_variables.scss
: Common values found throughout the project, including base font size, font families, colors, and more.base/_typography.scss
: Base typography values for the site (seetypography.html
for a demonstration)_layout.scss
: The primary styles for the layout and design of the theme. This file calls various sub-files for different pages / elements.- various
_layout.scss
files written for specific pages and components_
We're using the SASS writing guidelines by Hugo Giraudel, and SassDOC
Here are the important variables from base/_variables.scss
you can tweak to customize the theme to your liking:
$base-font-family
: The font-family of the body text. Make sure to@import
any new fonts!$heading-font-family
: The font-family of the headers. Make sure to@import
any new fonts!$base-font-size
: The base font-size.$base-font-color
: The color for the body text.$action-color
: The color for links in the body text.$highlight-color
: The color for the footer and page headers (when no cover image provided).
All configuration options can be found in _config.yml
.
- title: The title for your site. Displayed in the navigation menu, the
index.html
header, and the footer. - subtitle: The subtitle of your site. Optionally displayed in the
index.html
header. - email: Your email address, optionally displayed with the Contact info in the footer.
- name: Your name. Currently unused.
- description: The description of your site. Used for search engine results and displayed in the footer.
- baseurl: The subpath of your site (e.g. /blog/).
- url: The base hostname and protocol for your site.
- cover: The relative path to your site's cover image.
- logo: The relative path to your site's logo. Used in the navigation menu instead of the title if provided.
- markdown: Markdown parsing engine. Default is kramdown.
- inter_post_navigation: Whether to render links to the next and previous post on each post.
A sitemap is also generated using jekyll-sitemap.
imgIX provide content resizing and distribution on-the-fly if set up. Set up different Web Folder sources for each CloudCannon site - particularly if using Staging and Production Jekyll environments.
- imagecdn: Staging and production specific URLs from imgIX
You can enable Disqus comments for you site by including one config option:
- disqus_shortname: Your Disqus username. If the property is set, Disqus comments will be included with your blog posts.
If you want to disable Disqus for only a specific page, add disqus_disabled: true to the page's front matter.
You can enable basic Google Analytics pageview tracking by including your site's tracking ID:
- ga_tracking_id: The Tracking ID for your website. You can find it on your Google Analytics dashboard. If the property is set, Google Analytics will be added to the footer of each page.
You can enable Google reCAPTCHA for spam trapping on contact forms using CloudCannon hosting. Set it up on Google, then grab the site key and Secret key and add them to Cloudcannon's site settings menu options.
- recaptcha_site_key: The Site key for your website. If the property is set, Google reCAPTCHA will be added to the contact form.
Your personal social network settings are combined with the social sharing options. In the social seciton of _config.yml
, include an entry for each network you want to include. For example:
social:
- name: Twitter # Name of the service
icon: twitter # Font Awesome icon to use (minus fa- prefix)
username: @eyedivision # (User) Name to display in the footer link
url: https://twitter.com/EyeDivision # URL of your profile (leave blank to not display in footer)
desc: Follow me on Twitter # Description to display as link title, etc
share: true # Include in the "Share" section of posts
You can enhance the posts.html
archive page with descriptions of your post categories. See the descriptions section of _config.yml
:
# Category descriptions (for archive pages)
descriptions:
- cat: jekyll
desc: "Posts describing Jekyll setup techniques."
A bunch of basic font icons from IcoMoon have been included in the _includes/svg folder.
This file is then included in the page layout for every page.
Usage:
<svg class="icon {{ social.icon }}"><use xlink:href="#{{ social.icon }}" /></svg>
MIT. See LICENSE.MD.