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.
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.
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.
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
Related
I'm attempting to set up a basic Jekyll site on github pages. The site in question currently is:
https://kculmback.github.io/kcfeatures-v2/
Here is the repo:
https://github.com/kculmback/kcfeatures-v2
My problem is that the site is not loading images or the css files from my assets folder, even though the link seems to be correct (as far as I can tell).
Example link to image:
kculmback.github.io/kcfeatures-v2/assets/img/Logo.svg (currently not working)
Here is the image in the repo:
github.com/kculmback/kcfeatures-v2/blob/master/assets/img/Logo.svg
This is my first time setting up a Jekyll site but as far as I can tell from everything I've read I've done it all right...
Here is the siteurl/url settings from my _config.yml file:
# Serving
url: "http://kculmback.github.io"
baseurl: "/kcfeatures-v2"
Here is an example of how I wrote the link to CSS file:
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
And here is the resulting link when rendered by Github Pages:
https://kculmback.github.io/kcfeatures-v2/assets/css/app.css
Any help would be greatly appreciated!
The problem is not the url, but what it is excluded in the _config.yml:
exclude:
- "/assets/"
The above line tells Jekyll to exclude directories and files from the conversion.
So the website is being generated without the assets directory, while the urls are ok.
You have to remove assets from the exclude list and it works.
I have recently started using github pages and so far I am using the default index.html as my main page. How do I use another page as my default page? For example if in my gh-pages branch I have my html in a folder src/. How do I set ./src/index.html as my default instead of ./index.html?
Create dummy index.html and put this in the header
<meta http-equiv="refresh" content="0; url=http://mysite.github.io/folder/index.html" />
Change http://mysite.github.io/folder/index.html to your desired url.
I though Steven Penny's comment was good, but on Windows it was not super straightforward to create a symlink inside git. Only more recent versions of git-for-windows support symlinks.
If you enable support via the core.symlinks config variable you can mklink index.html src\file.html and gh-pages will show file.html as the landing page.
I'm trying to use GitHub pages to host a Doxygen site. Ideally, I'd like to be able to push the generated files and directories to GitHub without having to tweak them at all.
This, however, means that my index.html is in a subfolder of the repository and GitHub Pages isn't picking it up (I get a 404 when I try to access the Pages site). Is there a way to make GitHub recognise that index.html when it's in a subfolder?
It is a project site.
Create a dummy index.html at the root and put this in your header:
<meta http-equiv="refresh" content="0; url=https://repo.github.io/folder/index.html">
Be sure to change the destination URL. This will instantly redirect from index.html to your folder/index.html.
Maybe you want to push a subtree. For instance, let's say you have the build/dist directory and there the Doxygen site is built.
After building, to make sure to commit all changes in that folder, then do the following.
git subtree push --prefix build/dist origin gh-pages
It's important that you don't have anything on the gh-pages branch, on local or origin.
All credit goes to: https://gist.github.com/cobyism/4730490
Initially I also thought of a redirect. But redirects feel like code smells, even HTTP redirects. Although sometimes unavoidable, here may be a cleaner solution, and it is probably what you were looking for.
You now have the option to use the /docs folder of the master branch as the root of your GitHub Pages website.
To use Doxygen and gh-pages, you need to:
Create the file .nojekyll in the root of your gh-pages branch
Make sure you removed .png, .html, and similars from your .gitignore file
And finally, create the index.html file in the root of your project:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url=html/index.html">
<title>Page Redirection</title>
</head>
<body>
If you are not redirected automatically,
follow the link to the documentation
</body>
</html>
References:
GitHub Pages (github.io) doxygen generated page not found (404)
How to automatically generate doxygen documentation using Travis
Auto-deploying Doxygen documentation to gh-pages with Travis CI
https://help.github.com/categories/github-pages-basics/
Publish Your Project Documentation with GitHub Pages
How to make an introduction page with Doxygen
The answer by David Jacquel is awesome.
But if you're trying to serve your whole SPA personal blog from the /dist or /build folder of GitHub Pages as I do, there's a beautiful dirty hack by Raphael Pedicini.
He suggests that you create a proxy index.html page and custom 404.html page. If your user enters the direct URL of a subpage, e.g. https://example.github.io/blog/, the GitHub Pages server will serve 404.html with scripts that pass the URL as a set of parameters to a proxy index.html, which launches the SPA.
I won't duplicate his code here, as it very well might change over time.
Try transferring your index.html file and all its dependencies into a new repository and then use that repository as a sub-module in you current repository. Currently GitHub Pages expects to find an index.html file in the root of your repository which it can't.
For example, let’s say your current repo is 'test'. You create anew repository say, 'website', transfer your .html and other files which are required to the 'website' repository. Now you need to use 'website' repository as a sub-module inside the 'test' repository.
Mote: in the above schema you only need to use the 'gh-pages' branch-name in your 'website' repository while 'test' can still retain the master branch.
A little example tutorial on Git submodules.
I recently wanted to publish my Jekyll site on Github pages, but it seems that putting everything in a subdirectory is giving some issues, even after I change the source to the correct directory.
My structure looks like this:
- site
- src (contains all Jekyll stuff)
- README.md
- GruntFile.js
- ...
Locally my site builds perfectly and when I go to http://localhost:4040 I can see it just nicely, but when I commit this to my Github and visit username.github.io I get a 404, if I go to username.github.io/src I can see part of my site, however all {% include %} are ignored.
In my _config.yml I updated the source: source: ./src, but that doesn't seem to help.
Is there a way to make Github Pages handle subdirectories properly? Basically I want to tell it that my Jekyll site is inside /src, and I want the url to just be username.github.io instead of username.github.io/src
I know i can use the pages branch and commit to there, but I would prefer if it could happen automaticly.
If it helps anyone, I attempted to run Jekyll on GH Pages from a subdir (and modified source) and was banging my head against the wall over these errors:
A file was included in subdir/index.html that is a symlink or does not exist in your _includes directory. For more information, see https://help.github.com/articles/page-build-failed-file-is-a-symlink.
After much searching on this, the definitive answer was right there in the docs:
Configuration Overrides
We override the following _config.yml values, which you are unable to
configure:
safe: true
lsi: false
source: your top-level directory
Keep in mind that if you change the source setting, your pages may not
build correctly. GitHub Pages only considers source files in the
top-level directory of a repository.
I contact Github support and they gave me 2 solutions.
Move all my Jekyll source files to my top-lever directory.
Use a different branch and update it manually each time.
I created a "jekyll new xx" site locally. When I run Jekyll serve it works very nicely.
Now, I create a new github repo and a branch gh-pages: https://github.com/pitosalas/deleteme
However when it is rendered as a github page it looks all wrong, like style sheets and other assets are missing.
Update
Steven Perry: Thanks for your response, but I had a typo. I wanted to point to the github repo containing the Jekyll "input" files which are then regenerated into the stuff that is served to the browser. The extra slash in the CSS file is an excellent clue but it is in a file generated by Jekyll I think. I can't edit it directly I need to figure out how to get Jekyll to generate it correctly. Do you know?
<link rel="stylesheet" href="/css/syntax.css">
<!-- ^
/
remove this slash ---
-->
Example
For more info, your problem file is here
default.html