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:
Primary Navbar Settings
Socials Navbar Settings
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.
You can set a site-wide default banner image by adding the following to your _config.yml:
You can also override it per page by adding the following code to a pages yaml front matter:
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.
Includes the following custom tasks:
These 3 tasks have been bundled into custom build and deploy tasks
jekyll buildfollowed by
s3_website pushand then
For things to work properly you'll need to do the following:
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.
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.
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:
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
Google Analytics (optional)
google_universal_analyticsID to the config.yml file
Facebook 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, comicsto your config.yml
keywords: new stuff, other things, comicsto the frontmatter of your page/post
For 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.
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.ymlfile as needed
Update your social links
_data/socials.ymlfile as needed
Update your about page
_data/about.ymlfile as needed
Update your characters page
_data/characters.ymlfile as needed
For 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:
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.