Error 404 with the movies and tv shows page's

[GabiMuresan22]

Select Topic Area

Question

Body

https://gabimuresan22.github.io/Flixx-Movie-Website/

Here is my repository. The website is not displaying the highlight functions, movies from the API, and also I have a problem with the TV Shows page.
I don't understood why, on my laptop everything is fine

[seyLu]

Hi @GabiMuresan22,

I've deployed a copy of your site. Things to note:

• Add a base href on every html file:

    <title>Flixx</title>
+   <base href="/Flixx-Movie-Website/" />
  </head>    

• Update all links to be relative to the current page. Examples:

-  <div class="logo"><a href="/">FLIXX</a></div>
+  <div class="logo"><a href="#">FLIXX</a></div>

...

-  <a class="nav-link" href="/shows.html">TV Shows</a>
+  <a class="nav-link" href="shows.html">TV Shows</a>

...

-  <form action="search.html" class="/search-form">
+  <form action="search.html" class="search-form">

...

-  <img src="../images/no-image.jpg" class="card-img-top" alt="" />
+  <img src="images/no-image.jpg" class="card-img-top" alt="" />

• Since we added base href on our html file, window.location.pathname will return the base href + path. So we have to update that part to remove base href:

  const global = {
-   currentPage: window.location.pathname,
+   currentPage: window.location.pathname.replace(
+     "/Flixx-Movie-Website/",
+     "/",
+   ),
  };

PS: If you don't want to deal with manually fixing broken links when deploying to Github Pages, I'd suggest using a Static Site builder like Astro, Gatsby, etc. or a js library/framework like React, Vue, etc. These options, they have a build step which takes care of resolving routes and links. And you can then use an NPM package, gh-pages, to take care of building and deploying to github pages.

[joselouisz]

It sounds like your repository for the Castle app needs some debugging and troubleshooting. Make sure to check the website's code for any issues affecting the display of highlight functions and movies from the API, and address the problem with the TV Shows page to ensure a smooth user experience.