lief's eleventy-webcomic

I'm lief and I'm a comic artist by night, software QA and SEO analyst by day! This repository is my adaptation of Katedee's Eleventy-webcomic, which is a template, built off of the Rashon's eleventy-rarebit, which itself is built to replicate the functionality found in geno7's Rarebit webcomic template.

I'm keeping this repository public so my good friends in the Comix Accountability Club can use my work to make their own websites. I've made a few main changes to Katedee's work (with a few more underway!). First, I've added a gallery collection and content page. This is for my more professionally inclined colleagues who might have an illustration portfolio they'd like to share alongside their comics. I've also added an archive selector to the index/comics pages, so readers can jump to any page without going to the archive page. Coming soon are some modifications to the archive page to allow more customized arc names, as well as a blog functionality.

Features (This text is cloned from katedee's readme)

• Mostly Static: Built from Liquid templates, pages core functions no longer require JavaScript. (Why does this matter?). There are some "additional" features (comments, navigating with keyboard arrow keys, archive drop down selection) which require javascript, but the core reading experience functions just fine!

• 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. In addition, I'm working on a setup tutorial over here.

• RSS Feed: An RSS feed of your comic is automatically generated after some very slight setup. I've added this because people still frequently use them (especially for webcomics), and some webrings require you to have one in order to be listed with them.

• more “neutral” default styling (mostly done for my site, but why not 🤷‍♀️)

• revamp of the archive. It is explicitly divided by chapters, and only shows one image per chapter (and using 11ty img to output it at a smaller size). Additionally, there's a dropdown selection to go to a page for chapter

• added explicit date setting in the post, in case folks copy a file to make a new page, using the github repo as a pseudo-CMS.

• ability to add comments, leveraging google forms (big shout to the jekyll guy). We've even got emojis! 💅

• added back arrowkey navigation, because folks seem really set on it

Deployment

Netlify

1. Make sure you have a Github account setup first.

2. Click this button:

Neocities

1. Create a new GitHub repository from this template
2. 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
3. Add the API key as an action secret to your repository with the name NEOCITIES_API_TOKEN
4. Download GitHub Desktop and clone the repository to your computer
5. Open the cloned repository in a terminal window and, assuming Node.JS is installed, type npm install
6. 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 & Eleventy

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

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" class="paperDiv">

      <h1></h1>

  

<p style="text-align: center">posted on undefined Date, undefined</p>
</div>








<div class="comicNav">
  
    <a href="/comic/01/"><img src="/img/comicnav/nav_first.png" alt="First"></a>
  
  
  

<select class="archive-select" onchange="window.location.href=this.value;">
    <option value="" disabled selected>Select a comic...</option>
    <option value="/comic/01/">Adventures in Hermitville - 1</option><option value="/comic/02/">Adventures in Hermitville - 2</option><option value="/comic/03/">Adventures in Hermitville - 3</option><option value="/comic/04/">Blood Bowl - Cover</option><option value="/comic/05/">Blood Bowl - 1</option><option value="/comic/06/">Blood Bowl - 2</option><option value="/comic/07/">Testosterone Tuesday - Cover</option><option value="/comic/08/">Testosterone Tuesday - 1</option><option value="/comic/09/">Testosterone Tuesday - 2</option><option value="/comic/10/">Testosterone Tuesday - 3</option><option value="/comic/11/">Acolyte - 1</option><option value="/comic/12/">Acolyte - 2</option><option value="/comic/13/">Acolyte - 3</option><option value="/comic/14/">Acolyte - 4</option><option value="/comic/15/">Hourly Comics 2025 - 1</option><option value="/comic/16/">Hourly Comics 2025 - 2</option><option value="/comic/17/">Hourly Comics 2025 - 3</option><option value="/comic/18/">Hourly Comics 2025 - 4</option><option value="/comic/19/">Hourly Comics 2025 - 5</option><option value="/comic/20/">Hourly Comics 2025 - 6</option><option value="/comic/21/">Slice of Lief - 1</option><option value="/comic/22/">Slice of Lief - 2</option><option value="/comic/23/">Slice of Lief - 3</option><option value="/comic/24/">Slice of Lief - 4</option><option value="/comic/25/">Slice of Lief - 5</option><option value="/comic/26/">Slice of Lief - 6</option><option value="/comic/27/">Slice of Lief - 7</option><option value="/comic/28/">Slice of Lief - 8</option><option value="/comic/29/">Slice of Lief - 9</option><option value="/comic/30/">Slice of Lief - 10</option><option value="/comic/31/">Slice of Lief - 11</option><option value="/comic/32/">Slice of Lief - 12</option><option value="/comic/33/">Slice of Lief - 13</option><option value="/comic/34/">Slice of Lief - 14</option><option value="/comic/35/">Slice of Lief - 15</option><option value="/comic/36/">Slice of Lief - 16</option><option value="/comic/37/">Slice of Lief - 17</option><option value="/comic/38/">Slice of Lief - 18</option><option value="/comic/39/">Slice of Lief - 19</option><option value="/comic/40/">Slice of Lief - 20</option><option value="/comic/41/">Slice of Lief - 21</option>
</select>

  
  
    <a href="/comic/41/"><img src="/img/comicnav/nav_last.png" alt="Last"></a>
  
</div>

<script>
  function keyNav() {
    document.addEventListener("keydown", (e) => {
      if (e.key == 'ArrowRight') { //right arrow goes to next page
        window.location.href ="";
      } else if (e.key == "ArrowLeft") { //left arrow goes to previous page
        window.location.href ="";
      } 
    });
  }

  keyNav();
</script>
</div>

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