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