Is there a way to implement proper links using `` with github pages?

Question

How can I make <a href="/"> redirect to https://[username].github.io/[repo] instead of https://[username].github.io/ with github pages?

When serving my multi-page html website, I get a 404 - Not Found every time I click on an <a href="/"> link on my pages. Instead of redirecting to https://mepley.github.io/github-pages-redirect-to-index/ where index.html is found, I am instead redirected to https://mepley.github.io/ and thus I get the 404 - Not Found message.

Here is a link to a github pages site to demonstrate the issue (served from master branch): https://mepley.github.io/github-pages-redirect-to-index/

My end goal is to simply use <a href="/"> from another html document and redirect back to index.html. IMPORTANT: I DO NOT want to settle for any other strategy, such as <a href="/index.html"> or <a href="./"> or <a href="../"> as relative references.

The reason I'm adamant about using just "/" is because I'm creating a boilerplate webpack configuration for building static websites for first-time, beginning coders to deploy a simple website to github pages and I'd prefer not having to explain this idiosyncrasy to people who are just learning and are already confused to begin with.

I've tried using <base href="https://mepley.github.io/github-pages-redirect-to-index"> tags, but this did not fix the issue. I tried other <base> tags as well, to no avail (but maybe I did something wrong?). And as explained in my comment below I also know that relative references from the current page (i.e. <a href="../">) will in fact redirect to the correct homepage, but it still DOES NOT answer my question, unfortunately.

Here are the only two files needed to demonstrate this issue:

index.html

<!DOCTYPE html>
<html>
  <body>
    This is index.html
    <a href="./another-page.html">goto another-page.html</a>
  </body>
</html>

another-page.html

<!DOCTYPE html>
<html>
  <body>
    This is another-page.html
    <a href="/">go back to index.html</a>
  </body>
</html>

Expected result is that I click on the <a href="/"> link in another-page.html and it redirects me back to https://mepley.github.io/github-pages-redirect-to-index/ and finds index.html instead of https://mepley.github.io/ with the 404 error as is currently happening.

Any help on this issue would be greatly appreciated!

Also, here is the repo link for the site: https://github.com/mepley/github-pages-redirect-to-index

J. Smith · Accepted Answer

The best solution is what you did not want to do: <a href="/index.html"/>. Please explain why you do not want to do that. It’s only 10 extra characters.

Is there a way to implement proper links using `<a href="/">` with github pages?

Tags:

html

url

github

uri

github-pages

mepley

1 Answers

J. Smith

Recent Activity

Donate For Us