Eleventy

I am learning how to use Eleventy, also known as 11ty. That is a SSG. It should make building your website easier if you want every page to have the same template. I'll write here how I set it up.

Author's notes: I am using Windows 11 🤮, and running VScodium to type my website up. I use Vercel (connected to github) to host my site. I am not too tech-savvy. I just know how to install Minecraft mods so I know what folder structure is, and how to see file extensions.

1. Using this webcomic template: https://github.com/katedee/eleventy-webcomic
2. But the instructions are all in broken links, so you might have to look at this older file: https://github.com/katedee/eleventy-netlify-webcomic?tab=readme-ov-file
3. Forked the template to my own github account.
4. Opened up VScodium and “cloned” the template from the github folder that was just forked.
5. Since I already had a rarebit formatted comic, I copied my img folder over.
6. Went to the file: “_data>metadata.json” and edited that to have my own info.
7. Copy/pasted npm install @11ty/eleventy in the command line to make it install a bunch of shit.
8. Typed npm audit fix cuz it told me to fix it and it was important.
9. Ran npx @11ty/eleventy --serve in the command line, it gave me the local host url of http://localhost:blah/.
10. Went to the localhost url to see the preview of my website.
11. Cool it works. A lot of the css could be fiddled with, but you can do that on your own time.

1. There's already some example pages in the “comic” folder.
2. Open “01.md”. There are notes on what you can edit.
3. I replaced the “frontmatter” with my own information, such as my own comic images that I copied over from my old Rarebit files, and with the old dates and alt text from my Rarebit comic_settings.js.
4. The alt text is finicky as always. You can't use characters like : or “. So keep it simple.
5. Wow! It just works!

1. Replace images like favicon.png and logo.png with your own images.

If you use Neocities, the template page has instructions for you on there. What I do may or may not be relevant to you.

1. Type npx @11ty/eleventy into the command line to write all the gay files.
2. It should say [11ty] Copied 168 Wrote 13 files in 3.75 seconds (288.2ms each, v3.1.2) to confirm it did it correctly. Hopefully there are no error messages.
3. Log into Vercel.
4. Click the top-right button that says Add New, and press New Project.
5. Import the github folder containing your site. I named mine “eleventy-webcomic-justgorlythings”.
6. Edit whatever you need to for the name, and press the big button that says Deploy.
7. It will deploy after some time. You will be assigned a random URL.

This is so you have a pretty URL. I'm using Porkbun to own scumsuck.com.

1. Go to Project Settings→Domains.
2. Enter the domain you own. Since I own scumsuck.com, I'm going to put my webcomic under a subdomain of gorlytest.scumsuck.com. gorly.scumsuck.com is my main webcomic site that I shan't touch until I have everything ported.
3. There's going to be an error that says “Invalid Configuration”. Click “Learn More”, and take note of the random shit under “Value”.
4. Go to Porkbun.com. Click on Account→Domain Management in the top-right corner
5. Hover over your domain, then click DNS.
6. The Type is “CNAME”. The host is whatever you put as your domain, in my case “gorlytest”. The answer/value is the string of numbers and letters from Vercel.
7. Save your work.
8. Go back to the Vercel Domains page. It will probably say “Generating SSL Certificate”.

Run these in the terminal. I'm using VScodium, this option is ctrl+shift+`

npx @11ty/eleventy --serve: live preview