How can I make the pages Without the HTML extension

[PLK1984-003]

Select Topic Area

Question

Body

What I want to Do

1. I want to make the website load without html extension e.g. www.example.com/rIndex.html > www.example.com/rIndex
2. I want to make everyone cannot use html access anymore For Example: use this url will show 404 page "www.exaple.com/rIndex.html" only " www.example.com/rIndex" can work properly

---

I try :

1. Use Jekyll but it can't do the 2nd work
2. try to remove the file extension, I mean rIndex.html rename it to rInedx
   it actually work for me but after a few moments later it start automatically to download the pages without loading

Edit need screenshot required I will upload
Thanks for your help

[sitescript]

Simple dont use Jekyll.
You could also use this script to redirect the url to hide the .html

<script>
  // Check if URL ends with ".html"
  if (window.location.pathname.endsWith('.html')) {
    // Redirect to the same page without ".html"
    window.location.href = window.location.pathname.replace('.html', '');
  }
</script>

Will end up like this. "https://example.com/rIndex"

[azizulabedinazmi]

Hi @PLK1984-003,

To achieve what you're trying to do (remove the .html extension from your URLs and make only the extensionless URLs work), there are a few approaches you can consider:

1. Using Jekyll Permalinks:
   Since you’re using GitHub Pages, Jekyll is one of the easiest ways to manage this. You can configure permalinks in Jekyll by adding a permalink setting to your _config.yml file:

   permalink: /:basename/

   This will remove .html from your URLs when the site is built. However, this will not automatically cause a 404 error for anyone trying to access the .html version.

2. Redirect .html pages to extensionless URLs:
   You could use JavaScript or a meta redirect on the .html pages to automatically redirect users to the extensionless version. For example:

   <script>
     if (window.location.href.endsWith(".html")) {
       window.location.href = window.location.href.replace(".html", "");
     }
   </script>

3. Create a 404 rule:
   GitHub Pages doesn’t allow server-side configurations like .htaccess to enforce redirects. However, you can create a custom 404.html page that can check for .html URLs and provide users with a proper redirection or a custom message.

4. Check for page download issues:
   Renaming rIndex.html to rIndex might cause browsers to interpret it as a file to download instead of a web page. This happens because the server (GitHub Pages) expects the .html extension. Sticking with Jekyll's permalink solution is a better way to manage clean URLs without running into these issues.

Let me know if you need more help or clarification on any of the above approaches. Good luck with your project!

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[tomcomtang]

If it’s a frontend code implementation, you can directly refer to the principles of react-router. If you’re looking for some of the simplest tools, you can use https://pages.edgeone.ai/use-cases/html-to-url Just upload your HTML file, and it will automatically generate an accessible URL link without any file extension.

[frijal]

as per default action, github pages can automatically detect url, without html extension.