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:47] – [Eleventy] 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 25: Line 31:
   - 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''.   - 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''.
   - The alt text is finicky as always.  You can't use characters like '':'' or ''"''.  So keep it simple.   - The alt text is finicky as always.  You can't use characters like '':'' or ''"''.  So keep it simple.
-  - Wow!  It just works!+  - 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.
  
 ===== 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}} 
 +  - Press "Sync Changes". {{.:images:20250812-045150.png}}  
 +  - 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.
   - Log into Vercel.   - Log into Vercel.
   - Click the top-right button that says ''Add New'', and press ''New Project''. {{.:images:20250812-043404.png}}   - Click the top-right button that says ''Add New'', and press ''New Project''. {{.:images:20250812-043404.png}}
Line 54: Line 64:
   - Save your work.   - Save your work.
   - Go back to the Vercel Domains page.  It will probably say "Generating SSL Certificate". {{.:images:20250812-044559.png}}   - Go back to the Vercel Domains page.  It will probably say "Generating SSL Certificate". {{.:images:20250812-044559.png}}
 +  - Wait then refresh the page.  It took me a couple minutes.  It might take you longer.  Eventually it should say "Valid configuration" {{.:images:20250812-044820.png}}
 +  - Click on your domain name.
 +  - [[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.