Is there a specific way to route to different pages on a GitHub Pages site?

Question

I have a GitHub Pages site hosted here . The splash page to open displays just fine, but once you click in the circle to transition to the next page, landing.html , you are met with a 404 error. I have tried every possible way I can think of to fix this; Absolute references, local references, completely rearranging my whole file organization system, and nothing is working.

Here is my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" type="text/css" href="./css/title.css"></link>
</head>
<body>
    <div class="container">
        <div class="x-shape" id="x-left"></div>
        <div class="x-shape" id="x-right"></div>
        <div class="ripple" hidden="true"></div>
        <div class="white-line" id="line-ver"></div>
        <div class="white-line" id="line-hor"></div>
    </div>
    <div class="title">AVRIE LATTA</div>
    <script src="jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/title.js"></script>
</body>
</html>

Here is my title.js file:

const openLanding = () => {
    window.location.href = "/html/landing.html";
};

const closeTitle = () => {
    $(".container").animate({
        width: `${$(".container").width() * 0.1}`,
        height: `${$(".container").height() * 0.1}`
    }, 750, () => {
        $(".container").animate({
            width: `${$(".container").width() * 1000}`,
            height: `${$(".container").height() * 1000}`
        }, 1000, () => {
            $(".container").animate({
                opacity: "-=1"
            }, 1000, () => {
                $(".title").animate({
                    opacity: "-=1"
                }, 1000, () => {
                    $(".title").animate({
                        width: '5%'
                    }, 1000, openLanding());
                });
            });
        });
    });
};

$('.container').click(() => {
    closeTitle();
});

My files are organized as follows:

site
- index.html
- html
  - landing.html
- js
  - title.js

Answer 1

See: https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites

In your case, you are hosting a page from the repository webdevportfolio . This would be a 'project' site. This means that the files in that repository start from the root page https://avrielatta.github.io/webdevportfolio/

In your js/title.js file, you have the following line:

window.location.href = "/html/landing.html";

This navigates to https://avrielatta.github.io/html/landing.html

Thus, GitHub Pages is tries to find a landing.html in a html repository, or html/landing.html in your 'user' site repository avrielatta.github.io .

To access the proper files/pages from your webdevportfolio repository, you can do something like:

// relative location
window.location.href = "html/landing.html";

// direct location
window.location.href = "/webdevportfolio/html/landing.html";

Is there a specific way to route to different pages on a GitHub Pages site?

Question

1 answers

solution1
0 2021-10-29 02:00:42

Is there a specific way to route to different pages on a GitHub Pages site?

Question

1 answers

solution1 0 2021-10-29 02:00:42

solution1
0 2021-10-29 02:00:42