Getting 404 on the relative paths for my website after adding another repository with gh-pages #50269

aadictive · 2023-03-16T19:47:45Z

aadictive
Mar 16, 2023

Select Topic Area

General

Body

Hi All,

So I have my portfolio website hosted on GitHub pages. Here is the repository: https://github.com/aadictive/aadictive.github.io
The website is hosted on a custom domain, so it can be seen at https://adityachaudhari.dev/

Now when I click on the pages or tabs on my portfolio it takes me to the proper URL and displays the correct results. But when I refresh, I get a blank page or a 404 Not Found page. For example https://adityachaudhari.dev/about or https://adityachaudhari.dev/project

I recently added another repository called test-app as I wish to add a few project repositories to my website. It opens up at https://adityachaudhari.dev/test-app

I am not able to resolve the issue with 404 for my /about, /project, /resume links due to this new addition of repositories, it looks for repos with names 'about', 'projects', etc. Can someone help me resolve this issue?

I see a similar Issue for a month-old discussion: here

Answered by aadictive

Mar 21, 2023

To wrap this thread up!

I found the solution to my problem in the comment in a separate discussion. This solution is a temporary fix, but it worked like a charm!

FYI, the routing issue is a known issue in GitHub pages!

So first you will need to add a new page named 404.html to your repo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GitHub Pages Issue</title>
    <script type="text/javascript">  
 
      var pathSegmentsToKeep = 0;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split…

View full answer

Anmol-Baranwal · 2023-03-17T04:28:55Z

Anmol-Baranwal
Mar 17, 2023

Check your routing configuration: Review your website's routing configuration to ensure that it is correctly handling requests for the /about, /project, and /resume pages. Make sure that the routing rules are not conflicting with the new repository names.

Check your file names and paths: Make sure that the files for the /about, /project, and /resume pages exist and are located in the correct directories. Check the file names and paths to ensure that they match the routing configuration.

you may have noticed, that we can visit those pages from home but cannot go it directly through the route URL. It may be a problem related to Tech Stack,

2 replies

Anmol-Baranwal Mar 19, 2023

@aadictive
I just wanted to check in and see if you had any further questions or concerns about my answer on GitHub. If you have no further doubts or if your doubts have been resolved, would you mind marking my answer as accepted?

It would be greatly appreciated and it will also help other users who might be looking for a solution to a similar issue.

aadictive Mar 19, 2023
Author

It is still not working for me. Everything works correctly on my local machine as well as when deployed to Heroku. It is something to do with the GitHub pages I guess. /about is simply checking for another repository.

Make sure that the routing rules are not conflicting with the new repository names.
^^ Thinking out loud what do you mean by this?? and how do I check that?

aadictive · 2023-03-19T16:13:45Z

aadictive
Mar 19, 2023
Author

I think I found the solution. For my project, all the relative links that have the repository name in them can route properly. I might have to do some additional settings with custom domain configs.
But essentially - When you have multiple pages or repositories hosted over Github Pages, make sure to follow this rule:
{github-username}.github.io/{repository-name}/{page-name}
For me if my main website has multiple pages like /about, /resume, etc. My URL looks like
aadictive.github.io/aadictive.github.io/about to be able to be correctly routed.
If I have another page in test-app-repository. The URL would be -
aadictive.github.io/test-app/about

Now if you find the repeating repository name in the first scenario like aadictive.github.io/aadictive.github.io/ to be annoying, simply put a static page in the base repository and then keep portfolio or other projects in separate repos, so the URL would look a bit decent like - aadictive.github.io/portfolio/about

1 reply

aadictive Mar 21, 2023
Author

Unfortunately, this did not work as well!

aadictive · 2023-03-21T17:19:31Z

aadictive
Mar 21, 2023
Author

To wrap this thread up!

I found the solution to my problem in the comment in a separate discussion. This solution is a temporary fix, but it worked like a charm!

FYI, the routing issue is a known issue in GitHub pages!

So first you will need to add a new page named 404.html to your repo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GitHub Pages Issue</title>
    <script type="text/javascript">  
 
      var pathSegmentsToKeep = 0;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );
    </script>
  </head>
  <body>
  </body>
</html>

If you are not using a custom domain on GitHub Pages set pathSegmentsToKeep = 0, otherwise set pathSegmentsToKeep = 1.

Copy this script and add to your index.html.

<script type="text/javascript">
  (function(l) {
    if (l.search[1] === '/' ) {
      var decoded = l.search.slice(1).split('&').map(function(s) { 
        return s.replace(/~and~/g, '&')
      }).join('?');
      window.history.replaceState(null, null,
          l.pathname.slice(0, -1) + decoded + l.hash
      );
    }
  }(window.location))
</script>

On your build folder need to have this file 404.html, and thats is it.

4 replies

aadictive May 27, 2024
Author

@HunterCoders You can put it under the public folder in you repo

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Getting 404 on the relative paths for my website after adding another repository with gh-pages #50269

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

GitHub Community

Getting 404 on the relative paths for my website after adding another repository with gh-pages #50269

aadictive Mar 16, 2023

Select Topic Area

Body

Replies: 3 comments · 7 replies

Anmol-Baranwal Mar 17, 2023

Anmol-Baranwal Mar 19, 2023

aadictive Mar 19, 2023 Author

aadictive Mar 19, 2023 Author

aadictive Mar 21, 2023 Author

aadictive Mar 21, 2023 Author

cchanyu Mar 31, 2023

Tarungarg98 May 19, 2024

HunterCoders May 26, 2024

aadictive May 27, 2024 Author

aadictive
Mar 16, 2023

Replies: 3 comments 7 replies

Anmol-Baranwal
Mar 17, 2023

aadictive Mar 19, 2023
Author

aadictive
Mar 19, 2023
Author

aadictive Mar 21, 2023
Author

aadictive
Mar 21, 2023
Author

aadictive May 27, 2024
Author