Comical Template

Features

• Out of the box, this free HTML webcomic template includes:
  • a comics view subpage, with page navigation,
  • an archive subpage, listing all the comics by chapter,
  • an about subpage for the comic and characters descriptions.
• The comics data are stored in a standard RSS file;
  • The comics view and archive pages are automatically generated from it.
  • Visitors can also subscribe for comics updates in their RSS reader app.
• It’s made for both mobile and desktop;
  • The layout automatically adjusts to the size of the screen.
  • Pages can be turned using the arrows keys on desktop.
  • Comics are preloaded in the background for snappy reading, even on slow networks.
  • Each comic page gets its own address that can be bookmarked and shared.
• All the page rendering is done in JavaScript in the browser;
  • There’s no software installation, no recurring maintenance or updates.
  • Any basic web hosting will do.
• It uses HTML and plain CSS for the layout and styling;
  • It uses clean and modular templating elements.
  • It’s documented with beginner-friendly comments.
  • It can be customized all in HTML and CSS, without needing to touch the JS part.
• It adapts to many comic formats;
  • A comic page can be made of one or multiple split images for vertical comics.
  • Animations and video files are also supported.
  • Comic pages can optionally be grouped in chapters.
  • Each comic page can be given a thumbnail, a text summary, a transcript, …
• It’s free and open-source;
  • The template is released under the MIT License.
  • It’s forever free to use and adapt.

Getting started

This is a beginner-friendly walkthrough for setting up a new webcomic site and getting familiar with the different files to plug in your own comics, step by step.

1. Download comicaltemplate_2_0.zip and unzip it. You’ll obtain these files:

comicaltemplate/
├── assets/
│   ├── comicaltemplate.engine.js -- The rendering engine (JavaScript)
│   ├── icons.sprite.svg ----------- Navigation arrows sprites
│   ├── PepperCarrot.font.woff2 ---- Some custom font
│   └── style.css ------------------ Page stylesheet (CSS)
├── comics/
│   ├── char_carrot.webp ----------- A character portrait (for the about page)
│   ├── char_pepper.webp
│   ├── page_0001.thumbnail.webp --- Thumbnail for the first comic page
│   ├── page_0001.webp ------------- Image file for the first comic page
│   ├── page_0002.thumbnail.webp
│   ├── page_0002.webp
│   ├── page_0003.thumbnail.webp
│   └── page_0003.webp
├── comics.rss.xml ----------------- RSS XML file of all the comic items
├── index.html --------------------- Main HTML page (layout & static content)
├── license.md
└── readme.md

2. To preview it (and to publish your site live later), you’ll need to upload those files to a web server. (Popular hosting options on the IndieWeb are Neocities and Nekoweb). Once that’s done, you should have a fully working copy of your own of the Comical Template demo website with the demo comics, viewable in your web browser.

3. Let’s start by editing a few details about your webcomic series;

   1. Open the comics.rss.xml file in a text editor. (Make sure you’re opening the file on the server, not a local copy of the file). The file contains comments explaining its content and its format.
   2. Change the information in this file to match your website’s address, the title of your comic series, your name, the copyright, and so on. Then, save the file.
   3. Refresh the page in your web browser. If everything went well, the site should now display the title of your comic series in the header, your name and copyright in the footer, etc.

4. Let’s put your own comic pages on it;

   1. Upload some comic images in the comics folder on the server.
   2. Open the comics.rss.xml file in a text editor, like before.
   3. Copy-paste the <item>...</item> block snippet provided in the file to create a new entry and fill in its details. You can use the existing demo items as examples before replacing them. Once done, save the file.
   4. Refresh the page in your web browser. If everything went well, you should be able to see your own comic pages, navigate through them, and view them listed in the “Archive” section!

5. Let’s edit the “About” subpage;

   1. Open the index.html file on the server in the text editor. This file also contains comments explaining its content.
   2. Locate the <main name="about">...</main> block. This is the content of the “About” subpage.
   3. Edit the description of your webcomic series, introduce your characters, and so on. (This is written in HTML. For beginners: Mozilla has a very good HTML tutorial). Once done, save the file.
   4. Refresh the page in your web browser to see your changes.

6. You know how to edit the content. You can also customize everything else as desired;

   • Change the style and font of the website in the style.css file. This is plain CSS. (For beginners: Mozilla has a very good CSS tutorial).
   • Add new subpages or tweak the existing ones in the index.html file. This is standard HTML augmented with a few templating elements. All of those are explained in comments.