eleventy-rarebit-template

eleventy-rarebit-template is a starter template for Eleventy that's built to replicate the functionality found in geno7's Rarebit webcomic template.

Features

Fully Static: Built from Liquid templates, pages no longer require JavaScript to fully load. (Why does this matter?)
Drag and Drop: No more fiddling with JavaScript to add updates; comic pages can be added with Markdown through custom front matter.
Beginner Friendly: eleventy-rarebit-template maintains the same philosophy as Rarebit to be as beginner friendly as possible. Files are commented extensively with constant references to the Eleventy Docs and other relevant documentation.
Go Further With 11ty: Eleventy is a simpler static site generator whose functionality can be extended with plugins such as RSS, Image, and i18n.

Getting Started

If you're new to Eleventy, make sure you go over its Getting Started guide.

This template is built assuming you'll be deploying your site to Neocities. If that isn't the case, feel free to delete the repository's .github folder and skip steps 2 & 3. Otherwise, setting up your site goes as follows...

Create a new GitHub repository from this template
From your account settings in Neocities, generate an API key for your site by clicking Manage Site Settings (of target site) > API > Generate API Key
Add the API key as an action secret to your repository with the name NEOCITIES_API_TOKEN
Download GitHub Desktop and clone the repository to your computer
Open the cloned repository in a terminal window and, assuming Node.JS is installed, type npm install
In the same terminal, start a local webserver by entering npm start

You now have a hot-reloading preview of your website! Go ahead and start tailoring the template for your comic. When you're ready to publish, just commit and push your changes in GitHub Desktop; your site should update on Neocities shortly afterwards!

Usage

Comic pages can be stored in any subfolder within your Eleventy project's input directory. You can specify their custom data - whether that be titles, images, or thumbnails - through template and directory data files or front matter data.

// Directory Data
{
  "tags": ["comic"],
  "thumb": "/img/thumbs/default.png",
  "layout": "layouts/strip.liquid"
}

---
# Front Matter Data
title: The First Page Title
images: ['/img/comics/pg1.jpg']
alt: Here's some alt text!
thumb: '/img/thumbs/pg1.png'
tags:
  - chapter1
---

Layouts can then be applied to define how the page and its data are rendered.

<!-- `strip.liquid` (Snippet) -->
<div class="comic">
  <h1></h1>
  



<div id="comicPage">
  
  <div id="textcomment">
    
  </div>
</div>







<div class="comicNav">
  
    <a href="/comic/01/#comicPage">First</a>
  
  
  
    <a href="/comic/28/#comicPage">Last</a>
  
</div>


</div>

Still curious? Start exploring the template or see it working for yourself!