How to write the file paths when coding a GitHub Pages project site in VS Code?

[KurakamiGenya]

Select Topic Area

Question

Body

Given that I have this file structure of a GitHub repo:

main
--/css
----/styles.css
----/...
--/js
----/home.js
----/...
--/home.html
--/index.html
--/...

In the home.html file, I want to use the styles.css file, so I have this line:

<link rel="stylesheet" href="/css/styles.css" />

The code runs well when I test offline, but when it comes to online, I see the styles not applied at all.
The same problem happens when I try to make it redirect from the index.html page to home.html one, this time I even encounter a 404 error when accessing the URL <my-username>.github.io/<repo-name>, it says my page doesn't exist, while things go well on my offline server.
It took me times to discover that, when running online, the main branch is thought to be <my-username>.github.io, not <my-username>.github.io/<repo-name> as expected. The code could run well when being tested in VS Code offline, as the main branch is thought to start from <repo-name>.
So how should I write the file paths, so it can run properly both in VS Code offline and when published online?
P/s: Somebody said that I should change the file path to /<repo-name>/... to make it work on GitHub, but it can't work in my VS Code offline, which seems uncomfortable to offline test before the online release

[ebndev]

Hi @KurakamiGenya, thanks for posting in GitHub Discussions!

I've gone ahead and moved this post to our Pages category, as this topic may be more relevant there and might help someone give you a nudge in the right direction. 😁

In the meantime, please feel encouraged to explore existing discussions in the category and utilize the search in case other users may have run into the same issue!

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬