Pages in folder will not load

Problem description

When I try to run my code it will not load if I have my pages in a folder.

Expected behavior

The page is supposed to load even if my pages are in a folder.

Actual behavior

Instead, it will only load if all of my pages are out of a folder

Steps to reproduce

Go and create a set of code that uses multiple pages then organize them in a folder.

Browser

Google Chrome

OS

Chromebook

Device if mobile

iphone

Plan

Free plan

1 Like

I’m going to guess you’re using the HTML/CSS/JS template? If so, you always need an index.html file, though that can be just a simple link to a folder.

1 Like

When you move your files into a folder, you’re changing their file path, so you need to update any links to reflect that change.

You have

<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="account.html">Account</a>
<a href="delivery.html">Delivery</a>
<a href="menu.html">Menu</a>

Change them to

<a href="foldername/about.html">About</a>
<a href="foldername/contact.html">Contact</a>
<a href="foldername/account.html">Account</a>
<a href="foldername/delivery.html">Delivery</a>
<a href="foldername/menu.html">Menu</a>

Replace foldername with the actual name of your folder.

You should keep your index.html file where it is outside of the folder though.

2 Likes

That change isn’t necessarily mandatory (If there’s no starting slash, then the pages refer to the same directory), and also you should have another / at the beginning of all those paths, lest you fall into /pages/pages/page.html.

3 Likes

The slash in the middle of the link indicates that the file is located within a directory other than the current directory of the page containing the link. It instructs the browser to navigate to that specific directory and then look for the file within it. So, in the example, “foldername/about.html”, the presence of “foldername/” indicates that the “about.html” file is located within the “foldername” directory relative to the current directory of the page containing the link.

If your index.html file is located in the homefolder directory and the linked pages are located in a subfolder within homefolder, you wouldn’t need to use the starting slash in your relative paths. Simply specifying the path as “subfolder/file.html” would suffice, as the browser will interpret this as relative to the current directory of index.html, which is homefolder.

I think this is right? I might be misunderstanding what you mean.

I would then use the starting slash <a href = "/index.html">Page</a> or <a href = "../index.html">Page</a> to go back to index.html from mylinks/newpage.html

1 Like

Yes, but lest someone uses the folder/page.html links while in the folder.

Also, why redirect to /index.html and not just /?

2 Likes

I guess I should have been more specific, I meant to only use the folder/page.html type links for the index.html file, when we have the file tree like so:

.
├── foldername
│   └── newfile.html
├── index.html
├── replit.nix
├── script.js
└── style.css

and not for the files within that folder.

and

I actually didn’t know that would work.

Thank you again for the helpful info.

3 Likes