Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
webdev:eleventy [2025/08/12 04:56] – [Adding my own pages] scumsuckwebdev:eleventy [2025/08/13 02:52] (current) – scumsuck
Line 1: Line 1:
 ====== Eleventy ====== ====== 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.+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 [[https://gorly.scumsuck.com/|my webcomic, Just Gorly Things]], to make it easier to update and faster to load than my current .js template [[https://rarebit.neocities.org/|Rarebit]]. 
 + 
 +[[https://gorlytest.scumsuck.com/|This test page is my final result]].
  
 **Author's notes:**  **Author's notes:** 
Line 7: Line 11:
   * 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 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.   * 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 [[https://www.11ty.dev/docs/|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.
 ===== Set-up process ===== ===== Set-up process =====
   - Using this webcomic template: https://github.com/katedee/eleventy-webcomic   - Using this webcomic template: https://github.com/katedee/eleventy-webcomic
   - 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   - 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
-  - Forked the template to my own github account.+  - Forked the template to my own github account.  Look at that fork button!  {{.:images:20250812-062756.png}}
   - Opened up VScodium and "cloned" the template from the github folder that was just forked.   - Opened up VScodium and "cloned" the template from the github folder that was just forked.
   - Since I already had a rarebit formatted comic, I copied my img folder over.   - Since I already had a rarebit formatted comic, I copied my img folder over.
Line 29: Line 35:
 ===== Editing the styling ===== ===== Editing the styling =====
   - Replace images like ''favicon.png'' and ''logo.png'' with your own images.   - Replace images like ''favicon.png'' and ''logo.png'' with your own images.
 +  - 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.
  
  
Line 36: Line 43:
  
   - Type ''npx @11ty/eleventy'' into the command line to write all the gay files.   - Type ''npx @11ty/eleventy'' into the command line to write all the gay files.
-  - 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.+  - 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.
   - 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.{{.:images:20250812-045033.png}}   - 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.{{.:images:20250812-045033.png}}
   - Press "Sync Changes". {{.:images:20250812-045150.png}}    - Press "Sync Changes". {{.:images:20250812-045150.png}} 
Line 61: Line 68:
   - [[https://gorlytest.scumsuck.com/|You should see your site]].  Now everyone can visit your site if you share your link.  Yippee!   - [[https://gorlytest.scumsuck.com/|You should see your site]].  Now everyone can visit your site if you share your link.  Yippee!
 ===== Commands ===== ===== Commands =====
-Run these in the terminal.  I'm using VScodium, this option is ''ctrl+shift+`''+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 --serve%%'': live preview
   * ''npx @11ty/eleventy'': run eleventy and make all those gay files for you to upload.   * ''npx @11ty/eleventy'': run eleventy and make all those gay files for you to upload.