Hey I have a quick question. When I pushed my repository to git it no longer connects my html documents to my style sheet or corresponding images. When I open the html files from vscode in chrome it works perfectly, but as soon as I pushed it to github and deployed it, it only shows the html. Is there a way I need to change my pathing so that it will work on pages?

For example:

<link rel="stylesheet" href="/CSS/style.css">

or

<img id="frogicon"src="/Images/frogiconpure.jpg" alt="frog icon">

CodePudding user response：

Yeah this is a frustrating issue for me as well. The solution I use relies on running a local NodeJS server during development, which has code to redirect requests starting with /${projectName}/. I then set up all of my URLs for internal assets to work in the GitHub Pages context.

I have a template repo in GitHub that I use as a base for my new projects, which uses this approach. Here's a link to the appropriate section of the Readme: GitHub Pages

This approach works without any extra bits on GitHub Pages, but for it to work with local development it relies on two parts:

1. A local server that redirects URLs starting with /${projectName}/ to the root-relative paths needed for local development (server code).
2. An environment variable configuring the name of my project (the .env file in my setup)

If running a local NodeJS server isn't something that works for your project, there may be other ways in your environment to do the same sort of redirection. And if you're only worried about the single project, then you could hard-code the name of your project instead of having it configured as an environment variable.