Introduction

This is to provide artists (or anyone whose needs overlap) a pre-packaged art gallery, with pages for OCs (and their own individual galleries) similar to my own website.

Being able to see a folder setup for reference, is one of the things that would've helped me back when I was getting started with 11ty/Eleventy.

Folders

1. Markdown folder: Where you'll edit your pages; the welcome page, gallery entries, blog posts, your "about me" page, etc.
2. _data folder:
   • .json files can be used to store information which your pages can then output for you quickly in a list or as a shortcut.
     • e.json is the setup I use for emoji shortcuts. Visitors on my website will see HTML in place of emojis if they inspect my code, but I use a shortcode as I'm editing my pages. You can add more by copypasting the lines. Remember commas after each new emoji, except the very last on the list.
     • navigation.json is where you add or remove which pages you want to be accessible from the menu/navigation. This is seperate from the sitemap (edited through sitemap.md) page, which is intended to contain everything, meanwhile the navigation can be limited to the most important links.
3. _includes folder:
   • All your .md files in the Markdown folder has layout: at the top. You can change that, either per page, or (for example in VSCode) by going to edit > replace in files, then "find" = layout: default-main.njk and "replace with" = layout: simple-main.njk
     • Since using "replace all" affects all the files, be specific. If you just "find" = default and "replace with" = simple it's also going to mess with any regular text you've written.
       • Keep spaces in mind. If you "find" = cool and "replace with" = super , (There's a space at the end!) it's no longer "wow thats cool man" it's "wow thats superman". Yeah I'm speaking from experience...
4. _site folder: This is the "output" that 11ty generates for you. It's the files that'll make up your entire website once they're online.
5. IGNORE folder: These files are ignored by 11ty. They won't be processed for the _site folder; they're not intended to be uploaded. Storage, reference, whatever else.
6. img folder is where you'll be sorting your image files. js folder is for javascript. assets is for any other files, like fonts, audio, what have you.
7. css folder already has some files, such as default.css, which is to style the default layout. You can change the colors for both dark mode and light mode here. You can also add backgrounds, borders, or style the whole thing all over though it takes know-how.
8. "root" folder: This refers to the folder all of the above are stored in. So the folder you extracted after downloading the starterpack.
   • The first 2 lines in the robots.txt file is set to disallow all bots (indicated by *) from root (indicated by /) and up, meaning your entire site. By "all" bots, it means both search engines and AI scrapers. Even then, some won't respect the robots.txt file.
     • Beyond line 3, it's all AI. If you have the first 2 lines remain as they are, the rest are rebundant, but I kept these in case you want to allow search engines to index your website, but disallow AI scrapers.
   • You can put a favicon.ico in root. If your layout is set to include a favicon (The default one is), it'll show up. You can use some PNG-to-ICO converter, like this one.

Editing

Adding to the gallery

Markdown

• In the Markdown folder, make a new .md file. You can sort the Markdown folder however you want.

• Copy-paste the content from an older gallery entry, and fill out the info (title, file extension, tags, permalink, date) as shown in the image below.

Image files

• Prepare your images. You'll need 2 per gallery entry; 1 for the full view image, and 1 for the thumbnail.
• Gallery images go in /img/gallery which then splits into folders per year. Drawings from 2025 would be in /img/gallery/2025, and corresponding thumbnails would be in /img/gallery/2025/thumb
• Both images should have the same name, and be the same as the "title" you gave it except slugified. Basically, all lowercase, spaces and special characters are replaced with -, etc. ... If that sounds wack, copy the "title" which you entered on line 2 (e.g. in the example image, this would be man shell sea sand) and paste the text in (for example) this slugify converter thinger. It'll output man-shell-sea-sand, which means our images would be named man-shell-sea-sand.png and yeah, there you have it.

slugify

In the above example, it seems repundant, yeah.

But say you made a drawing, and you wanted to title it He/him Lesbians Are Cool!!, the issue you'd run into (without slugify) would be that you can't add slashes (or exclamation points) in an image file name. But with slugify, 11ty will look for a file named he-him-lesbians-are-cool.png. Win!!

Tags

The wonders of "tags" isn't shown here, but they're what tells 11ty to add the page to the a collection named gallery (which is the main gallery) and a collection named ocSteellion (which is OC-specific). More on OC-specific here.

Updating the "cool sites" page

In your _data folder you have a .json file for "cool sites". Like with gallery.md, you generally don't need to edit cool sites.md to add more.

Instead, you go to _data/coolsites.json...

...and there's then a list of different cool sites. All of which, by default, are Wikipedia.

Edit them, make more, add more fields, whatever you want. For example, you could add a line called "description":"" and then write "description":"Learned about the dancing plague of 1518. Very interesting. Thank you Wikipedia. 10/10."

Then, add {{feature.description}} in my links.md, somewhere between line 9 and line 13. Then, it'll also output descriptions you've made for all sites.

navigation

The same goes for navigation.json, where you can add/remove categories and subcategories from the navigation in the left sidebar. You can add as many categories as you want, but the layout holds max 7 subcategories by default.

In one of the cheatsheets, I've included a snippet you can copypaste, which generates your navigation. If you know some HTML/CSS, you could implement that into a new layout.

Common pitfalls

Which means pitfalls I've personally fallen in several times...

Uppercase/lowercase characters

Permalink already in use

If you (after copypasting to make a new page) forget to change the permalink:, it might mess with the 11ty preview, since several .md files are trying to write to the same permalink: ! If this happens, stop 11ty, adjust the new page's permalink, save the file, then run 11ty again.

And slashes... Oh my god, slashes. The way I've set up permalink: the value be for example home/ or home.html.

• home/ becomes home/index.html
• home.html becomes... home.html
• As far as I know, home or /home doesn't work in my setup.

Images not showing up

If you're having trouble with images not showing up as expected, right-click > open image in new tab. Then you can see where 11ty is trying to search for the file. Compare it to figure out where it went wrong.

A lot of the time, it ended up being the file extension, where I told 11ty to search for a /img/cool image.png and then my "cool image" wasn't even a PNG. Those times, you may feel like you have bricks for brains, but I extend to you bricks-for-brains solidarity.

File paths

Only relevant in Version 1

Confound those file paths. Oh, how I hate them. They drive me to drink!!! *glug glug glug* Anyway, so few hours after posting this, I realized I'm stupid. And I'm owning up to it, because hopefully then you'll then feel less stupid whenever you mess up.

So, in the demo, when you go to the characters page, yeah? It only states the character names. (Currently, there's only Steellion, but y'know, imagine there's 50 horses or whatever.)

It was supposed to show an avatar along with it... And why doesn't it show up...?

C'mere. Lemme show ya.

See this?

That's the beginning of steellion.md which contains Steellion's character page.

Now, in the folder you've extracted on your computer, find characters.md and take a look.

This is what it looks like, yeah? Nice. So far so good. The src= in <img> (so, the image source) is set to output /img/avatar/characters/Steellion/clopsiverse/avatar.png

Which... should be it, right?

Ding dong, I are wrong!!

Because this is where the image is actually located:

Yeah... Seriously. The "world" folder (Clopsiverse) starts with a capital C. Meanwhile, "clopsiverse" in Steellion's info, was spelled with a lowercase C.

In steellion.md, change world: clopsiverse to world: Clopsiverse.

Boom baby. Day saved.

Tools & Services

Useful stuff

• Bulk Resize Photos to resize images in bulk. Useful if you have gallery entries in bulk and need smaller versions and/or thumbnails for them. I keep "full view" gallery entries at a maximum of 1000 pixels wide.
• TinyPNG to compress PNG files. Usually it shaves 50% to 70% off and I very rarely see any loss in quality.
  • JPG files get super crusty, and personally I find the PNG files end up taking up less space anyway.
  • EzGif to compress (optimize) GIF files.

Webhosts

Check my bookmarks for a list of webhosts along with other useful stuff. You can also check this webhost list by Kale and this post by Snake. Snake's post focuses on webhosts that allow adult content.

If you wanna talk about oatmeal in a very Normal way, and only post drawings of your Normal human OCs smiling happily at the camera while they polish their white picket fence, finding a webhost ain't hard.

But if you plan to post anything which conservative bootlickers might find obsceneErotica, queer art, fairy wings, cat-eared anime girls, ASMR, fantasy, lolisho/cub, feral, furries, noncon, incest age gap yaoi, toxic yuri, etc. ... your options are slimmed down. But it's the options that are worth supporting.

What you get with this starterpack is a static website, so you don't need a lot of power to get it running.

Domains

I use Namecheap and I've been happy with them. I've also heard people use Porkbun.

Tips & Advice

• If you host adult content on your website, I suggest adding an RTA label. I've added it on mine even if I don't post porn.
  I just don't care to be some 14 year old's favorite philosopher, lol...

Changelog

Version 2

• URL outputs now use "slugify". Instead of being restricted to file names and gallery titles to be the exact same, a gallery entry that's titled Man, Shell, Sea, Sand will be translated to man-shell-sea-sand + .png or whatever file extension you use. This prevents uppercase/lowercase errors in the file path.
  • You'd still need to name your images and folders accordingly. The instructions have been updated to explain this.
• The navigation can now hold more subcategories by default. In navigation.json, if you leave any subcategory's "Hyperlink" fields empty, they won't show up. You can add or remove categories by copypasting or deleting.
• Fixed an issue where the oldest gallery entries were at the top... Oops...!?
• The gallery now includes the option for CWs by default.
• Added another page (Found in the blog!) with snippets of code to give people some reference or copypaste opportunities.
• Added the option for a logo image on top of the header background. If you don't want the image, open site.json, change "LogoPath":"/img/layout/logo.png", to "LogoPath":"", or remove the line entirely!
• Tweaked the CSS a little.