I am working through the Eleventy SSG tutorial, “MAKING A SIMPLE WEB SITE WITH THE SIMPLEST STATIC SITE GENERATOR, LEVEL 1” (https://www.zachleat.com/web/eleventy-tutorial-level-1/). The coding is a mix of JS and HTML. I am at the “MAKE IT DATA DRIVEN” section. I am copy/pasting the code where “front matter” is created. There are two index.html files and I’ve tried pasting in both. I get an error either way. When I try to run it I get the error: Cannot GET / .
Thanks
And Eleventy is supposed to be the simplest and most intuitive static site generator.
Let’s give it a go.
It seemed to go fine for me.
You said that there are two index.html files. That might be where the problem occurs.
What are you recognising as being the two index.html files in the data-driven section that you are trying to paste?
Thanks for responding. Yes, the second index.html was successfully created in an earlier step. Here are current screen shots:
why is the index file you’re highlighting inside your img directory?
EDIT: It’s not, it’s inside the _site directory. Blind me.
What you have there looks… partially correct? I wasnt aware that an ellipsis had 3 different hex codes for the three different dots…
Everything I’ve done so far is just copy/paste from the tutorial. Does it work for you? Thanks.
UPDATE: I have no idea why but things seem to be working now. Here is a screenshot of the output. Does it look ok to you?
Looks to me like the CSS for your unordered list’s a bit wonky, but at least you can access it now.
In what way do you think it’s wonky? Also, I moved on to the next section of the tutorial but it’s not working. I just copy/paste. Might there be something wrong with the writeup of the tutorial?
I didn’t say that your version differed from whatever tutorial you’re following, I said it looked wonky to me because it appears to be attempting to produce a ‘folder view’, which i would associate with a list proceeding vertically down the page, not horizontally across it.
okay
Here is the current situation:
I am in Level 2 of the tutorial, https://www.zachleat.com/web/eleventy-tutorial-level-2/
I am trying to add a filter which will display the file sizes of the images in the output file.
Here are screenshots of the relevant files:
The config file:
The input index.liquid file:
and the output index.html file:
I used the following command to run Eleventy: --config=myConfig.js --formats=liquid,html,gif,jpg
As you can see no file sizes are in the output file. Do you see any errors in the files? Thanks.
From what I saw in your previous effort, you haven’t actually used any images. So getting any kind of image file size will be somewhat difficult.
I don’t understand. The 3 images have been included since the beginning. They appear in both the input and output files. The tutorial was able to get the file sizes.
You have image files called ???.jpg, and ….jpg ?
What I see from your examples is that you have HTML code with IMG references, but you have failed to modify the example so that it works with real image files.
I quote from the tutorial:
Let’s add some images to our site.
and
Save these image files into an img folder inside of our giffleball directory.
Based on what you’ve shown us, I believe that you haven’t done some parts of the tutorial.
You are not supposed to blindly use the exact code in the tutorial. Instead, you are supposed to use your own images and modify what’s given in the tutorial to work with your own images.
Every tutorial I have ever followed worked fine when I copy/pasted the online code step by step. This is the first tutorial that doesn’t seem to work for me. If the code works in the tutorial, it should work for me on my computer. I don’t see anything wrong with using their images.
Do you expect the tutorial to give you the images that you are supposed to use?
It seems to be flawed tutorial.
They did provide the images. I don’t see anything wrong with that. The images are real files and I downloaded them (???.jpg, ….jpg and parrot.gif) from the photo site they referenced in Part 1 of the tutorial. I can view them. They do exist.
The tutorial only provided one animated image from bukk.it
The other images that you have come from the full finished source code, which is not a valid tutorial resource.
Why is it not valid? It’s cheating, in the same way as a cooking show doing a bad job on a cake, then saying “And here’s one I produced earlier.”
Sorry, but all three images come from bukk.it. I was able to download and view all three. I do agree that there are problems with the tutorial but their images are valid.
