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 a pre-made template up for my webcomic, Just Gorly Things, to make it easier to update and faster to load than my current .js template Rarebit.

This test page is my final result.

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 for free.
• I pay $15 for my domain name on Porkbun, but you don't need a domain name unless you want your url to look pretty.
• I have no idea what I'm doing. I just know how to install Minecraft mods so I know what folder structure is, and how to see file extensions.
• You should read Eleventy's official documentation if you're going to do anything more complex than copying a template. For now, my gorilla brain only understands how to copy a template.
• One of the frustrating things about SSGs that I've come across is that it simply will not build your site if you have a mistake in your HTML. Like if you spell sophi.png instaed of sophie.png, it will not even try to build the rest of the webpage. Whereas if you were to just type regular HTML, the rest of the page would load even if you spelled something wrong. I hate this very much.

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. Look at that fork button!
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! It's a lot easier to manage each comic page per .md file, rather than having 300 pages in one messy .json files.

1. Replace images like favicon.png and logo.png with your own images.
2. This template has some sort of image processing plugin that absolutely destroys the quality of your images. I went to eleventy.config.js and underneath eleventyConfig.addPlugin(eleventyImageTransformPlugin, {, I added formats: [“auto”], so it didn't convert to ugly crusty webps. Sorry I already optimize my images for web??? You may need to refresh your localhost server to see the changes.

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 something similar to [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. Click on the button on the left bar that looks like 3 circles with veins. That's the git button. Type in what you changed/added so if you need to revert your changes, you know what you did this time.
4. Press “Sync Changes”.
5. Visit your repository on github to see if it synced everything over. It should say something like “updated 3 minutes ago” or whatever above all your folders and files.
6. Log into Vercel.
7. Click the top-right button that says Add New, and press New Project.
8. Import the github folder containing your site. I named mine “eleventy-webcomic-justgorlythings”.
9. Edit whatever you need to for the name, and press the big button that says Deploy.
10. 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”.
9. Wait then refresh the page. It took me a couple minutes. It might take you longer. Eventually it should say “Valid configuration”
10. Click on your domain name.
11. You should see your site. Now everyone can visit your site if you share your link. Yippee!

This is for my own reference because I will never remember this shit. Run these in the terminal. I'm using VScodium, this option is ctrl+shift+`

• npx @11ty/eleventy --serve: live preview
• npx @11ty/eleventy: run eleventy and make all those gay files for you to upload.