Live Demo HERE
A webcomic theme for Jekyll based on my Slim-Pickins Jekyll theming framework.
All content included for the demo page is duplicated from my wife's webcomic site and is availabe via Creative Commons.
Includes the following variables for easy customization:
Base Colors
Links
Text
Primary Navbar Settings
Socials Navbar Settings
Comic Settings
Utility
Footer
Uses minimal sass from Zurb Foundation:
A fully responsive navigation bar with the following features:
This theme is configured with a 'wrap' of 1920px so banner images look best at that width.
First it checks a pages yaml frontmatter for the header image, if none is found then it checks for a site-wide default in your config.yml, if none is found then no banner image is displayed.
Site-Wide
You can set a site-wide default banner image by adding the following to your _config.yml:
header_image: "path/to/image.jpg"
Per Page
You can also override it per page by adding the following code to a pages yaml front matter:
header_image: path/to/image.jpg
I like my footers to stay on the bottom of the page no matter what. You can easily edit the size and color using the supplied sass variables.
The only thing in the theme that uses Javascript is the optional use of google analytics.
Includes the following custom tasks:
These 3 tasks have been bundled into custom build and deploy tasks
jekyll build
followed by minify_html
s3_website push
and then notify
For things to work properly you'll need to do the following:
Front Page
The main page will always show the most recent comic and will autopopulate the navigation for next/previous/archives. You can disable the sidebar by adding "sidebar:false" to the yml frontmatter.
Character Bios
This page uses Jekyll's data feauture to populate the page. It offers the following data inputs:
Edit _data/characters.yml to fit your needs and it will autopopulate the character bios page.
Thumbnail Archive
In order to use the thumbnail archive page you'll need to add "thumbnail: /path/to/thumb.jpg" to the yml front matter for your comic posts.
The _includes/category.html template will automatically pull the thumbnails from the posts and display them.
About Page This page uses Jekyll's data feauture to populate the page. I feel like I'm abusing it's intended purposes, but it works nicely.
It offers the following data inputs for information about the comic:
It offer the following data inputs for information about the creators:
Thumbnailer
A thumbnailer plugin is icluded by default. You'll need to add this to your config.yml:
# Autogenerate thumbs for comics
mini_magick:
#Create Thumbs for the Archive Page
thumbnail:
source: images/comics/
destination: /images/comics/thumbs
resize: "182x280"
#Autogenerate smaller size for small screens
small:
source: images/comics/
destination: /images/comics/small
resize: "350x535"
This will create 2 sizes of 'thumbnails' from any images in the /images/comics
directory:
SEO
Google Analytics (optional)
google_universal_analytics
ID to the config.yml fileFacebook Opengraph Fill out the following in your config.yml
facebook_app_id: #enter your App ID
facebook_locale: en_US
facebook_page: #the URL of your Facebook Page
facebook_image: #enter a default image (at least 200x200px) to use here for posts/pages that don't have one.
Twitter Cards Fill out the following in your config.yml
twitter_user:
twitter_card: true
twitter_image: #enter a default image (at least 200x200px) to use here for posts/pages that don't have one.
Keywords You can set default sitewide keywords or keywords per post/page. Keywords will show up in the metadata of the page/post.
keywords: stuff, things, comics
to your config.ymlkeywords: new stuff, other things, comics
to the frontmatter of your page/postFor now it's best to start fresh or install the theme and then transfer over any old files (posts, images, etc) from your previous site.
Git clone this repo, and cd into the directory.
run bundle install --binstubs --path=vendor
to install the required dependencies.
Transfer over any old stuff.
Edit your config.yml file
Update your navigation
_data/nav.yml
file as neededUpdate your social links
_data/socials.yml
file as neededUpdate your about page
_data/about.yml
file as neededUpdate your characters page
_data/characters.yml
file as neededFor google analytics just add your google_universal_analytics ID to the _config.yml file
I use S3 to host my site and the s3_website plugin to deploy, if you don't do both of these, delete the s3_website.yml
file and edit the deploy raketask to fit your needs.
If you plan on using S3 make sure you edit the configs:
s3_id
. s3_secret
, and s3_bucket
site = "www.YOUR-URL.com"
with your actual url.The comic posts included are duplicated from my wife's webcomic site and are availabe via Creative Commons.