问题
I'm using GitHub pages to host my latest site (http://jasonhoffmann.github.io/). I was wondering if there was a way to remove the .html extension from the end of sub-pages (http://jasonhoffmann.github.io/contact.html) since there is no access to the server.
回答1:
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.
回答2:
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:
- https://rsp.github.io/gh-pages-no-extension/test1
instead of:
- https://rsp.github.io/gh-pages-no-extension/test1.html
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:
- https://rsp.github.io/gh-pages-no-extension/test1
shows that it is displayed by the test1 in the URL but actually displays the file test1.html:
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:
- https://rsp.github.io/gh-pages-no-extension/dir (secure HTTPS)
which (at the time of writing) redirects to:
- http://rsp.github.io/gh-pages-no-extension/dir/ (insecure HTTP)
and NOT to:
- https://rsp.github.io/gh-pages-no-extension/dir/ (secure HTTPS)
as you might expect, so make sure that you are aware of that. See: (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:
- https://rsp.github.io/gh-pages-no-extension (secure HTTPS)
redirects to:
- https://rsp.github.io/gh-pages-no-extension/ (secure HTTPS)
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.
回答3:
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">
回答4:
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
回答5:
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
---
回答6:
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.
回答7:
Removed .html extension by changing permalink as
permalink: /:title/
Don't forget the last /
来源：https://stackoverflow.com/questions/21244910/remove-html-extension-from-github-pages