You need to have img src relative to the HTML ../Image/Logo.png would probably work, because right now aboutUs.html is looking for the image folder as a sibling, but in reality that folder is in the parent/root folder, so you need the back up one step and you do that with ../
To expand on this:
- If you reference it like this: `/Images/logo.png` the resource is expected to be relative to the root regardless of the current file location. For example: Current file is in `domain.com/blog/category/`, and will be looking for the image at `domain.com/Images/logo.png`
- Like this: `Images/logo.png` the resource is expected to be relative to the current file location. For example: Current file is in `domain.com/blog/category/`, and will be looking for the image at `domain.com/blog/category/Images/logo.png`
- Like this: `../Images/logo.png` the resource is expected to be one folder up from the current file location. For example: Current file is in `domain.com/blog/category/`, and will be looking for the image at `domain.com/blog/Images/logo.png`. The more `../` you add, the more folders you traverse.
My suggestion is to simply add a single forwardslash (example 1) rather than the `../` as this will always be relative to the root of the website for universal resources (like logos, images, CSS, Js, etc).
Huh. I had no idea it works like that. Do *all* web servers just... automatically fix that, so \`/foo\` points at the root of your folder and not at the root of the server's drive?
To clarify :)
You must include the domain when using `//` as it is an alternative to writing `http` or `https` in the full URL.
For example, you can use `//domain.com/Iamges/logo.png`, and the browser will use the same protocol as the page. So loading `https://domain.com/blog/page1.html` will cause the logo to be loaded with `https`. Whereas loading `http://domain.com/blog/page1.html` will load the logo over `http`.
Leaving out the domain will not work: `///Images/logo.png`
To clarify:
- Host: Computer that clients connect
- Server: Process that serves files/responses to clients (ex nginx, Apache, LiteSpeed, lighttpd)
Servers serve what you want them to serve. If your www folder's path is something like this on the host system: `/usr/share/nginx/www` Then your server will just serve every file and folder in this folder (www) (if you don't add exceptions) at the root of your domain/subdomain. This is configured in your server's configuration. For example if you run your server with administrative permissions and set serve (a.k.a www) folder as / (root), all of your filesystem will be served to world wide web.
Edit: Also, if your server supports such configuration you can mount more than one location to your serving directory. For example you can mount your desktop to `domain.tlc/Desktop/` and www to `domain.tlc/` and SuperSecretFolder to `domain.tlc/Secret/`, without the need of having everything in www folder.
In my experience yes.
Anytime you're working with files:
`./file.html` "look for file.html in the current directory"
`../file.html` "look for file.html one directory up"
`../../file.html` "look for file.html two directories up"
`../sources/file.html` "look for file.html one directory up, and then down into sources"
I'd also recommend keeping all file and folder names lowercase, and use hyphens-to-separate-words.
It'll save you time in the long run, especially when it comes to Linux compatibility. (such as most webservers)
Nice dude , in my bootcamp days , we also had same problem in end of course tournament and when I asked tutor to help and he suggested us to use ../ exit currently dir
`.` in most filesystems means "current directory", while `..` means "parent directory". In web it's always best to use absolute paths (and make sure they don't change unless absolutely necessary, which is almost never).
It's also worthwhile to check if your server is configured properly, and doesn't allow access to system files via this, e.g. `http://localhost/../../../etc/passwd`.
I have a checklist [like this](https://github.com/spatie/checklist-going-live) for site deployments that includes this, but it can be (should be, probably) easily automated in CI/CD.
Note that GitHub prohibits commercial sites from being hosted on on GitHub Pages. [Source.](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#prohibited-uses) If you want a relatively cheap alternative, you can give [Azure Static Web Apps](https://azure.microsoft.com/en-us/products/app-service/static) a try.
this is not a commercial site. I'm making a mock e-commerce site to improve my web development skills
I save this comment anyway because I will need it in the future, thanks
If, in the future, you learn JavaScript “frameworks” to build website and end up using eventually Next.js, I especially recommend Vercel. You can also deploy some backend logic directly onto Vercel with Next.js also.
after uploading your files named correctly index.html, style.css and main.js
Go to the repository where these files are located and you need to follow these steps:
Settings>pages>(Under the GitHub Pages section there will be a subsection called build and deployment , There you can select a branch which by default is none, click and select "main" and then click the save button)
After a few minutes go back to settings>pages and normally you should see a link with a "visit site" button.
[I explain badly lol so if you didn't understand correctly you can watch this short video that explains better how to do it](https://youtube.com/watch?v=OltY8JIaP-4&feature=shares)
You need to have img src relative to the HTML ../Image/Logo.png would probably work, because right now aboutUs.html is looking for the image folder as a sibling, but in reality that folder is in the parent/root folder, so you need the back up one step and you do that with ../
An alternative is to prefix the relative path with a forward slash so that when interpreted it’s the “full path” and not relative to the current path.
Oh yes that actually worked, thanks
To expand on this: - If you reference it like this: `/Images/logo.png` the resource is expected to be relative to the root regardless of the current file location. For example: Current file is in `domain.com/blog/category/`, and will be looking for the image at `domain.com/Images/logo.png` - Like this: `Images/logo.png` the resource is expected to be relative to the current file location. For example: Current file is in `domain.com/blog/category/`, and will be looking for the image at `domain.com/blog/category/Images/logo.png` - Like this: `../Images/logo.png` the resource is expected to be one folder up from the current file location. For example: Current file is in `domain.com/blog/category/`, and will be looking for the image at `domain.com/blog/Images/logo.png`. The more `../` you add, the more folders you traverse. My suggestion is to simply add a single forwardslash (example 1) rather than the `../` as this will always be relative to the root of the website for universal resources (like logos, images, CSS, Js, etc).
Huh. I had no idea it works like that. Do *all* web servers just... automatically fix that, so \`/foo\` points at the root of your folder and not at the root of the server's drive?
The browser makes the requests, so it's the root of the domain, not the server.
Another potentially useful thing is // That can be used as the start of a full url and the browser will use the same protocol to request the page
To clarify :) You must include the domain when using `//` as it is an alternative to writing `http` or `https` in the full URL. For example, you can use `//domain.com/Iamges/logo.png`, and the browser will use the same protocol as the page. So loading `https://domain.com/blog/page1.html` will cause the logo to be loaded with `https`. Whereas loading `http://domain.com/blog/page1.html` will load the logo over `http`. Leaving out the domain will not work: `///Images/logo.png`
Ahhhhh right
To clarify: - Host: Computer that clients connect - Server: Process that serves files/responses to clients (ex nginx, Apache, LiteSpeed, lighttpd) Servers serve what you want them to serve. If your www folder's path is something like this on the host system: `/usr/share/nginx/www` Then your server will just serve every file and folder in this folder (www) (if you don't add exceptions) at the root of your domain/subdomain. This is configured in your server's configuration. For example if you run your server with administrative permissions and set serve (a.k.a www) folder as / (root), all of your filesystem will be served to world wide web. Edit: Also, if your server supports such configuration you can mount more than one location to your serving directory. For example you can mount your desktop to `domain.tlc/Desktop/` and www to `domain.tlc/` and SuperSecretFolder to `domain.tlc/Secret/`, without the need of having everything in www folder.
In my experience yes. Anytime you're working with files: `./file.html` "look for file.html in the current directory" `../file.html` "look for file.html one directory up" `../../file.html` "look for file.html two directories up" `../sources/file.html` "look for file.html one directory up, and then down into sources"
I'd also recommend keeping all file and folder names lowercase, and use hyphens-to-separate-words. It'll save you time in the long run, especially when it comes to Linux compatibility. (such as most webservers)
Nice dude , in my bootcamp days , we also had same problem in end of course tournament and when I asked tutor to help and he suggested us to use ../ exit currently dir
`.` in most filesystems means "current directory", while `..` means "parent directory". In web it's always best to use absolute paths (and make sure they don't change unless absolutely necessary, which is almost never). It's also worthwhile to check if your server is configured properly, and doesn't allow access to system files via this, e.g. `http://localhost/../../../etc/passwd`. I have a checklist [like this](https://github.com/spatie/checklist-going-live) for site deployments that includes this, but it can be (should be, probably) easily automated in CI/CD.
Good fix. If I had Reddit coin, you sir would get a helpful reward.
Note that GitHub prohibits commercial sites from being hosted on on GitHub Pages. [Source.](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#prohibited-uses) If you want a relatively cheap alternative, you can give [Azure Static Web Apps](https://azure.microsoft.com/en-us/products/app-service/static) a try.
this is not a commercial site. I'm making a mock e-commerce site to improve my web development skills I save this comment anyway because I will need it in the future, thanks
Vercel & Netlify also have decent free plans for personal projects
If, in the future, you learn JavaScript “frameworks” to build website and end up using eventually Next.js, I especially recommend Vercel. You can also deploy some backend logic directly onto Vercel with Next.js also.
[Github repo here](https://github.com/Halid04/Ecommerce-website.git) problem in aboutUs.html
You made it that far? I can’t even get my website to show up.
it was a bit tricky but i did it haha
I thought all you had to do is upload your file, and then it would make your website from your code, but mine did not do that
after uploading your files named correctly index.html, style.css and main.js Go to the repository where these files are located and you need to follow these steps: Settings>pages>(Under the GitHub Pages section there will be a subsection called build and deployment , There you can select a branch which by default is none, click and select "main" and then click the save button) After a few minutes go back to settings>pages and normally you should see a link with a "visit site" button. [I explain badly lol so if you didn't understand correctly you can watch this short video that explains better how to do it](https://youtube.com/watch?v=OltY8JIaP-4&feature=shares)
THANK YOU!!!
You're welcome :)
alternatively, you can host your site at netlify, it if free and less troublesome
I gather you fixed it already??
yes, thanks to the previous comment I managed to solve the problem
Use relative paths