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!