Remove trailing slash on GitHub page hosted website - html

I have a website that is now hosted on Github and works fine: https://www.r-graph-gallery.com
Unfortunately, that kind of URL ending with a slash does not work:
https://www.r-graph-gallery.com/heatmap/.
It redirects toward my 404.html file, but without the css loading.
Note that currently both https://www.r-graph-gallery.com/heatmap
and
https://www.r-graph-gallery.com/heatmap.html work properly.
How can I make the slash ending URL work? It is crucial for me since google search always links to slash ending URLs...
I've tried to add a .htaccess file with redirection rules, but after some research it looks like this is not supported by gh pages.
Thanks for any hint or solution!

You can use a service like Cloudflare [https://www.cloudflare.com/] with GH Pages. They are completely free for a single site.
[https://dispiro.com/] is hosted on GH Pages and all traffic is routed through Cloudflare - and trailing slashes work just fine.
EDIT:
Unfortunately there is not much available in the way of configuration on GH Pages. If you don't mind modifying your directory structure, you may be able to get it to work without a third party service.
When you go to https://www.r-graph-gallery.com GH Pages searches for index.html in your root directory. When you go to /heatmap Pages is looking for heatmap.html. When you go to /heatmap/ it is looking for a /heatmap/ directory. One solution would be to place another index.html file inside a /heatmap/ directory and Pages should find the file.
/index.html
/heatmap/index.html
The issue is known Apparently

Related

My CSS doesn't render at all when I host my jekyll on gh-pages with my own domain

When I test my site on local host, the CSS and JavaScript are looking perfect. But when I push it to github repo I only see the HTML. No style. https://github.com/jaubut/website I've tried to change my URL to https://chanvrequebec.com in my config.yml. I've also try to change my href="/css/main.css" to href="css/main.css". BUT NOTHING happens at all. I don't know what to do. Please help. Thanks
your website is beautifully displayed at http://chanvrequebec.com/ - not https:// as described in your question!
If you have a SSL/TLS certificate for this domain, you'll need to change the url on _config.yml to the same protocol https://chanvrequebec.com
Things to be aware of:
1st. in you _config.yml you've set:
markdown: redcarpet
But from May 1st on, GitHub Pages will not support redcarpet anymore. So, I suggest you to change it to:
markdown: kramdown
2nd. Your website should be also completely accessible under http://jaubut.github.io/website, but it's not, due to mistaken configuration of GitHub Pages. You created a project website, so you'd need to set the baseurl to baseurl: '/website' to correct that. Or set the url to http://jaubut.github.io/website. But this not the best approach here, as all your internal links would redirect the pages to the github.io subdomain.
So, finally, to fix this properly, the best approach would be:
Create a new repository called jaubut.github.io (User website)
Transfer the content of your repo website into the master branch of the repo created on the previous step
Keep your _config.yml the way it is now
Your website will be accessible under http://jabot.github.io and also under http://chanvrequebec.com/
Delete website repository
If you have a SSL/TLS digital certificate for your domain chanvrequebec.com, don't forget to change the url on your _config.yml from url: "http://chanvrequebec.com" to url: "https://chanvrequebec.com"
Done!
I hope to have helped!
Your website is hosted in the subfolder 'website'. The correct link for the css is href="/website/css/main.css". The correct address seems to be: http://jaubut.github.io/website. If you want a custom domain, you should use a CNAME file, see: https://help.github.com/articles/setting-up-your-pages-site-repository/.

Why is just the HTML showing after I push my changes from Jekyll to Github Pages?

I am creating a blog on Jekyll for the first time and I am at the point where I'm trying to deploy what I have so far to github pages. When I serve the site and view it locally, it looks fine - so I thought that all I had to do was push all of the files to a gh-pages branch. Now that I have done this, all that is showing is the HTML.
To troubleshoot, I downloaded just the template files and pushed those to a Github page to see if the issue had to do with how I was editing the CSS, but when I did that I got the same results.
I came across an article that was specifically about how to use github pages to store a jekyll site, and it said to remove the slash before the css folder in the linked stylesheets on the HTML if your page isn't styled correctly. After reading that I thought that the slash was for sure the issue, but after removing the slash... I got the same result.
I have been trying for hours and I feel like its probably something very simple(such as the slash).
Here is the repo:
https://github.com/pacalabre/blog-site/tree/gh-pages
Here is the output:
http://pacalabre.github.io/blog-site/
Thank you in advance for any answers!
You need to add/edit:
baseurl: /blog-site
to the config file. Note there is no trailing slash. 'blog-site' is the name of your project, the project name becomes a sub directory that serves your site. Without the baseurl setting, your relative urls are trying to fetch things from http://pacalabre.github.io/ when they are really at http://pacalabre.github.io/blog-site/.
GH is serving your site as a subfolder to the domain and your references are not taking that into account.
Once you add the baseurl setting, you then need to add {{site.baseurl}} in front of your assets like images, css and js.
Also, once you do the baseurl setting, when you serve locally it will not be quite correct, you will need to add the /blog-site to the end of the localhost url for it to work properly.
You also should try using the dev tools inspector in Chrome to help you troubleshoot, it will clearly tell you right now that it cannot load all your js files or images, and it will show where it is trying to load them from.
Look, there's something wrong with your site/repo.
I didn't find your _config.yml at the site root ( gh-pages branch). It should be there.
There's a binary file there (probably Mac's file if I'm not mistaken). It shouldn't be there.
There are both Jekyll's folders (_posts, _drafts, _layouts, etc) and _site folder there. You need to choose. Or you upload the _site content (not the folder itself) or you upload the Jekyll project. Usually you upload just Jekyll folders and GH build the site for you, unless you use some plugins which are not allowed by GitHub. In this case, you upload just the _site content, which is the compiled site (html, CSS, js only).
On the previous answer, you were instructed to add a baseurl to your site configuration. It's the best approach, but if your template uses just url and doesn't even mention baseurl, the best way is adding the project name to the end of the url, not searching for every link to call {{ site.baseurl }} via liquid. So, instead of giving yourself all this trouble, better do like that in your _config.yml:
url: http://username.github.io/projectname
If you indeed go for setting up the baseurl, you can view your site locally via localhost:4000 by adding this flag when serving Jekyll: --baseurl "". So, jekyll serve --watch --baseurl "". This means like "Jekyll, ignore the baseurl set in the config". Got it?
Serving Jekyll with bundler is the right way to do that, specially when deploying to GH Pages. But this is another story, I can add a comment later if you're interested.
Suggestions. Read a little more about how Jekyll works. Also look for .gitignore so you won't upload to GH anything unnecessary (like that binary file).
After that, if your site doesn't build or display correctly, let me know and I'll help you out if you want.
Hope to have helped!

Hiding page names in the browser

When we launch a website, we usually see webpage name (menu.php or admin.aspx) but I would like to hide that name and show only virtual path or just website name. I don't want it for the first page because I did that with default.aspx but I want to implement it for the whole website.
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
Note: My code is not MVC code and server is Apache.
Use .htaccess to rewrite the URL. Millions of tutorials are out there for that ;)
What you are asking is achieved using (for xampp, wamp, lamp or any other apache powered webserver setup) htaccess rewriterules. The rules take the URL and break it into parts that can be modified or used as variables to feed other pages - whilst still keeping the URL you typed. Neat huh!
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
call the file placed into the folder faq simply index.html (not faq.html) and then www.abcd.com/faq/
will display the page without the filename. (Make sure, you have defined index.html as a valid Directory index.)
There are more options with using mod_rewrite etc - but since you seem to use a prety static directory based navigation layout, that would be the easiest way.

Do I need slashes before links?

When I code my website, on my local computer i can use
blablabla.
However, I also can see this type of thing on other places as
blablabla.
I am not sure what I will need when my site goes live. If I try to do this on my local computer, it doesn't understand it. My question is, if I post my site up like this, will it work?
Ok, if I have all of the files of my site in the root directory that the main index.html file is located in, will it work when it is being hosted?
If you do not use a slash, the link will point to index.html in the same folder as the page the link is on.
For example, if you have a link to index.html on the page www.example.com/page2.html then the link will take you to www.example.com/index.html. If you include a slash, it will do the same thing.
However, if the link is in a page in a subfolder, like www.example.com/projects/page2.html, then the first link will take you to www.example.com/projects/index.html while the second link will still take you to www.example.com/index.html.
The slash denotes the "web root."
Note that these are still considered "relative" links: they refer to a resource on the same server, regardless of the server's name. If your domain name changes or you upload it to another server, relative links will still work provided they have the same folder structure.

Why aren't my images showing up on my github page?

I've setup a github page, but my images are not loading.
The site and
The Site's Repo
I saw this question Images in github pages and relative links where it said that GitHub is run on Linux servers, thus case-sensitive. I can checked that the href directory is the same case.
Files with underscores are treated specially by GitHub pages. You need to add a .nojekyll file in the root path, to turn off jekyll.
Look at this page for details
First of all you could try removing the tailing slashes in your <img>-tags (and all the others that have it) as this violates the HTML 5 specification.