I am working on the odin project and make my first html project, the first recipe project. I have now finished it and upload it to my repo on github. If I want to see it with live preview the index.html page is working well. But if I click on a link at the index page it does not working. Can u check my html file? Or is it maybe that I have make failure with github workflow. I have changed/finished my coding on MS VisualStudio and then add the following statements in the terminal:

git add .
git commit -m "something"
git push origin main

My Repo: https://github.com/ztrk-dev/odin-recipes/tree/main/recipes

CodePudding user response：

You are hosting what Github Pages refers to as a Project site, which means the page is being hosted at "username.github.io/repository".

The reason the pages with images aren't loading as expected(if I'm misunderstanding the question let me know) is because they are linked as /images/spaghetti-napoli.jpeg, which is a relative file path for the file spaghetti-napoli.jpeg that is located in a folder "images" located in the root directory. The problem is that the root directory / isn't the base directory of your project site. /{repo-name}/ is (so that you could have many different projects with their own websites if you wanted to).

If you want the repository to be the root of your site, you'd need a User site, which would require a repository named ztrk-dev.github.io to host the projects files. If you'd rather use a project site, you would need to link the images as /{repo-name}/{path-to-file} instead of /{path-to-file}.

That is to say, /images/spaghetti-napoli.jpeg would become /odin-recipes/images/spaghetti-napoli.jpeg or ../images/spaghetti-napoli.jpeg

CodePudding user response：

Lasagne and for images as well wrong link Here is explanation how use tag "a href": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a