Remove html extension from GitHub Pages

StackOverflow https://stackoverflow.com/questions/21244910

  •  30-09-2022
  •  | 
  •  

Question

I'm using GitHub pages to host my latest site:

http://mysite.github.io/

I was wondering if there was a way to remove the .html extension from the end of sub-pages:

http://mysite.github.io/contact.html

since there is no access to the server.

Was it helpful?

Solution 2

I would assume you would have to use subdirectories (but there may be a simpler way):

/index.html            => http://jasonhoffmann.github.io
/contact/index.html    => http://jasonhoffmann.github.io/contact

However, you may have more control using CNAME to redirect the GitHub page to your own domain. Sorry I don't have a definite answer for you, but hopefully this can get you started.

OTHER TIPS

It already works and you don't have to do anything

I'm not sure if you are already aware of that or not but to remove .html extension from GitHub Pages all you have to do is remove .html extension from your links.

In other words it already works and you don't have to do anything. You don't have to use subdirectories, CNAME, redirects, Jekyll _config.yml, YAML front-matter or any other hack suggested in all of the answers here.

Examples

For example you can use:

instead of:

and it displays the same file. Just change the links in your links and that's it.

Tests

I made some tests to demonstrate how it really works where you can click links and it highlights which file is loaded with which URL, including warnings about insecure redirects in certain cases.

For eaxample, the link:

shows that it is displayed by the test1 in the URL but actually displays the file test1.html: enter image description here

Problems with other solutions

Using things like index.html in special subdirectories as suggested here in other answers will not do what you want, which is simply serving the example.com/name.html when asked for example.com/name, but would instead give you a 301 redirect to example.com/name/ (note the trailing slash) which in turn would give you the contents of example.com/name/index.html file.

That leads to the following problems: you are in a different directory and you need to use <a href="../name"> instead of just <a href="name"> for links to other pages on the same level and the same goes for all assets (or you can use absolute paths as someone suggested which is not a good idea on GitHub pages - especially project pages - because after forks and projects renaming you have to remember to update all of the links and js/css assets in all of the html files).

The other thing is that now you have a useless redirect for every navigation - which incidentally redirects from HTTPS to HTTP (from secure URLs without the slash to insecure URLs with a slash), e.g. see:

which (at the time of writing) redirects to:

and NOT to:

as you might expect, so make sure that you are aware of that. See: Insecure redirect (Note that this image is linked to a secure HTTPS URL but you end up using an insecure HTTP connection - you may need to use incognito mode to see that.)

This is how the headers look like, as of June 17, 2016:

$ curl -I https://rsp.github.io/gh-pages-no-extension/dir
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: http://rsp.github.io/gh-pages-no-extension/dir/
...       ^^^^

Hopefully GitHub will fix that in the future. (I discovered it when I was writing this answer almost a year ago and this problem is still present as of June 2016.)

Though strangely enough, as of June 17, 2016 (I'm not sure if it always was the case because I noticed it recently while updating this answer) this URL:

redirects to:

as it should. See the headers:

$ curl -I https://rsp.github.io/gh-pages-no-extension
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: https://rsp.github.io/gh-pages-no-extension/
...       ^^^^^

The only difference is that it is a project root URL and not a deeper directory inside the project (see the project structure) so the buggy redirect seems to be present only in deep links inside a project's GitHub Pages and on one browser I tested only when you use incognito mode.

The bottom line is that you need to be careful. My advice would be to avoid all redirects altogether and only use those URLs that don't result in any redirects at all.

You can do this through Jekyll, a static site generator built into GitHub Pages. It has some permalink settings that can be set in either the _config.yml (which will affect all Pages and Posts on your site) or in the YAML front-matter for each Page/Post.

For example, you could add the following code to your contact.html file:

---
permalink: contact/
---

This would be inserted before <!DOCTYPE html>, but Jekyll will take care to strip it out when it's served on GitHub Pages. When you do this, you'll be able to access the page at jasonhoffman.github.io/contact instead of jasonhoffman.github.io/contact.html. What Jekyll is actually doing is creating a directory called contact and putting an index.html file inside of it with your contact.html content. If you install and run Jekyll locally, this is what you'll see:

.
|- _config.yml (optional)
|- contact.html
|- index.html
|- css
   |- styles.css
|- img
   |- image.jpg
|- _site
   |- index.html
   |- contact
      |- index.html
   |- css
      |- styles.css
   |- img
      |- image.jpg

If you don't install Jekyll locally, you'll see all of that, minus the _site folder. When you push this to GitHub, their servers will run Jekyll and generate and serve the equivalent of a _site folder for you (but it won't be visible in your GitHub repository).

You could also skip Jekyll and create a contact subdirectory with an index.html inside. Either way, you'll also need to make sure any links to assets (img, css, js) in your site have a preceding /. For example,

<link rel="stylesheet" href="css/style.css">

Should instead be

<link rel="stylesheet" href="/css/style.css">

I'm using the arctic fox theme, which uses following link strings:

<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>

The solution is to add remove: '.html' as filter, which results in

<a class="page-link" href="{{ page.url | remove: '.html' | prepend: site.baseurl }}">{{ page.title }}</a>

Local serving with Jekyll currently does not work, but is promised for Jekyll 3.0: https://github.com/jekyll/jekyll/pull/3452

For now, all you need to do is just add permalink: /your-pretty-url

The other answer doesn't work. I've tried. You need to add the '/' prefix.

For example:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2017-04-29 22:04:31 +0700
categories: jekyll update
permalink: /welcome
---

As user rsp has mentioned that pretty permalinks are already implemented by GitHub Pages and one does not have to do anything, this will not be done when running the Jekyll server locally or in Jekyll by default. If you want to remove html extension from pages using Jekyll in your own non Github Pages site (still served with Jekyll) or have a local development site that is similar to Github Pages as much as possible before pushing to GitHub,

You just need to add this to the _config.yml file:

permalink: pretty

This removes the .html from link by making all posts have their own folder and the posts named as index.html.

Removed .html extension by changing permalink as

permalink: /:title/

Don't forget the last /

There is one simple thing you can do, which is to make a folder that has your html file name... in your case it will be /contacts. Then rename your contacts.html to index.html then move it into the /contacts folder that you created.

output: http://mysite.github.io/contact

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top