WEBCOMIC JEKYLL THEME!

Download Website Files

This is the guide for how to use a webcomic theme for Jekyll. If you already know how to use Jekyll and Bootstrap, go ahead and just download the code here.

If you’re more of a beginner, this guide is for you!

Edit your Site

This site is built using Bootstrap. If you want to make extensive changes, I recommend you take the HTML/CSS course and the Bootstrap course on Codecademy. It’s REALLY easy if you have even basic knowledge of HTML/CSS and/or Bootstrap.

What do you want to do?

I want to update content to the info pages!

The theme comes with two info pages: About and Extras. You can edit the content by opening the markdown files called about.md or extras.md

Markdown files are text files that are meant to be converted to HTML. You'll need to write your content using Markdown syntax so it will properly convert to HTML. [Read about Markdown Syntax](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf). Don't worry, Markdown is really easy to write in. In fact, the whole point of it is that it's easier to write than HTML.

For example, if you want to make a bullet list, format it like so:

 

My Cats

  - Loki
  - Meeko
  - Parking Lot Cat

It will look like this:

My Cats

  • Loki
  • Meeko
  • Parking Lot Cat

If you want to add a link, format it like so:

[I want to learn more code!](https://www.codecademy.com/)

It will look like this: I want to learn more code!

I want to upload pages!

This is pretty cool. All you need to do is drop your image file into the images folder, then

  1. Name your image file after the page number. For example: 003 (Keeping your names and numbering consistent will make it easier for you to update in the future.)
  2. Drop your new page into the images folder.
  3. Go into the _posts folder and create a new Markdown file.
  4. Paste the following content, only replace the {page number} with the actual page number. It’s faster if you duplicate an existing page and just update the page numbers wherever they appear.
---
layout: comic
title:  "1"
date:   2017-04-23 11:42:56 -0700
categories: page
---
![](/pages/001.png)

That’s it! Rebuild your site and it’ll appear along with the rest of your pages. It will also appear in your Archives page.

If you’ve already pushed your site to live on Github Pages, you can just add the image file and the markdown file to your repository.

Change the page's background or the page's fonts

This will require you to edit the CSS file. It’s not necessary, but I recommend you learn a tiny bit about CSS syntax.

  1. Open your directory and open the css folder. Then, open comic.css.
  2. Ctrl+F “HEADER” to quickly find the header styles.
  3. To change the header background, replace the background URL.
  4. To change the header fonts, update the font family for jumbotron h1 and jumbotron p.
  5. Make sure each line still ends with a semicolon! Then, save your work and update the file in your repository.

I want to change the header's background or the header's fonts!

This will require you to edit the CSS file. It’s not necessary, but I recommend you learn a tiny bit about CSS syntax.

Next, update your CSS file to tell your website when to use this font.

  1. Open your directory and open the css folder. Then, open comic.css.
  2. Ctrl+F “HEADER” to quickly find the header styles.
  3. To change the header background, replace the backgrould URL.
  4. To change the header fonts, update the font family for jumbotron h1 and jumbotron p.
  5. Make sure each line still ends with a semicolon! Then, save your work and update the file in your repository.

If you're changing fonts, you'll need to embed the font by linking to it in the \ section of your site. This makes sure the website knows where to find the information it needs to display the font.

  1. Get the link for your tag. I recommend using Google Fonts. They have a lot of great fonts and it's easy to embed them into your site. Learn how to use Google Fonts
  2. Open your directory and open the layouts folder. Then, open default.html.
  3. Ctrl+F “Fonts”, then paste your link in under where it says "Google Fonts".
  4. Save your work and update the file in your repository.

Note: You can do a lot more if you know a bit of CSS. Consider learning some!

I want to change my comic’s title and description!

  1. Open your directory and open the config.yml file.
  2. Change the values for title and description. While you’re here, you can also change the text that will appear on the browser tab!
  3. Save your changes, then rebuild your site using jekyll serve. Note: Anytime you make changes to the config.yml file, you’ll need to rebuild your site.

Update social media info or add social media icons.

Add social media

This theme comes with a small HTML snippet that includes icons for Tumblr and Twitter.

To add these icons:

  1. Copy the text below.
{/% include socialmedia.html %}

  1. Paste it into the markup file where you want it to go. This snippet of code tells Jekyll to pull in the bit of HTML code inside a file called socialmedia in the folder called _includes.

  2. IMPORTANT: Remove the slash from the first bracket.

Update social media info

Open the config.yml file and update these fields with your Tumblr or Twitter URLs.

twitter_username:
tumblr_username:

If you want to add other social media accounts other than Tumblr or Twitter, you’ll need to add button code to the HTML code for the social media icons.

  1. First, go to Font Awesome and search for the brand icon you want to use. Click on the icon and get the <i> tag. For example, the <i> tag for Etsy is <i class="fa fa-paypal" aria-hidden="true"></i>. Note: If Font Awesome doesn’t have the icon you want, you’ll need to just make your own.

  2. Go to your directory and open the _includes folder. Then, open the socialmedia file or the authorsocialmedia.

  3. Paste in the following code, but with the <i> tag you got from Font Awesome. <a href=" "> <i class="fa fa-etsy fa-3x" aria-hidden="true"></i> </a> In the tag, enter the URL for the button.

I want to add Google Analytics!

To use Google Analytics to monitor traffic to your site, you’ll need to get a Javascript tracking snippet and put it in your website.

  1. Make a Google Analytics account.
  2. Get the Javascript tracking snippet.
  3. Go to your directory and open the _layouts folder. Then, open your default.html file. Find where it says <!--Google Analytics--> and paste your Javascript tracking snippet underneath.