Folks, help is needed and MUCH appreciated with a fuzzy behaviour of Jekyll site deployed to Github.
The site works perfectly when putting it up and using it in the local machine (through 'jekyll serve'). The surprise came up upon deployment to Github, the HTML 'posts.html' page created to show the post list does not get rendered at all. The rest of the site is up and running fine, but once the link is clicked to reach the mentioned page the browser is trying to DOWNLOAD the file, instead of rendering.
If you need to have a peek at the code:
https://github.com/zekdeluca/zekdeluca.github.io
And the site can be seen at:
http://zekdeluca.github.io/
Thanks in advance!
It has to do with the permalink and how the extension-less urls are working. If you add a trailing slash to your url it will work. If you are trying to do it without the trailing slash, I was under the impression that what you did would work on GH.
Something like permalink: /my-page/ will work and it creates a folder called my-page with an index.html file in it. The url will show as /my-page/ without the index.html - pretty except the trailing slash.
If you do permalink: /my-page it should be making a file my-page.html, but in your case it seemed to have made just my-page with no extension, which is then being served as a file by github and it doesn't seem to know what it is so it is downloading it instead of serving it.
There seems to be a lot of conflicting info on this, I think the behavior has changed recently, and maybe the version GH is using is able to output a file with no extension? I did not think that was the case.
more reading:
http://overengineer.net/pretty-extensionless-urls-in-github-pages-using-jekyll/
Jekyll extension-less permalinks with markdown
Related
I Have seen several posts regarding this feature to preview HTML file on GitHub. Some suggest prepending https://htmlpreview.github.io/ before the real URL and some suggestions to create GitHub pages that I don't want to do now because then I have to re-create most of the thing on .yml
But my confusion is why this link showing HTML preview but not mine when I prepend the same string on my repo's HTML page. Please let me know If any other way I can see the HTML preview on github
Working:
https://htmlpreview.github.io/?https://github.com/bartaz/impress.js/blob/master/index.html
Not Working:
https://htmlpreview.github.io/?https://github.com/sany2k8/setuptools/blob/master/How_to_Install_Spark_on_Ubuntu.html
Showing 404 Not Found
Error: Cannot load
https://raw.githubusercontent.com/sany2k8/setuptools/master/How_to_Create_Github_Pages.html:
404 Not Found
Check these steps:
-Your repository is public.
(Settings>General>Danger Zone>Change repository visibility>Make public)
-The size of the files are not very large.
-The Repository link is in HTTPS and not in SSH.
EDIT:
I found this question about the private repository and preview, if you want to take a look.
When your html file is excessively big then often github may fail to open the file. In such cases you can check the raw version of the HTML file.
I've got a gist which contains a markdown file and an image.
Is there a way to do a relative link to this image?
Something like  instead of 
Here is an example
As of now, relative image links are working for me, in both a repository and a wiki. I'm using syntax like this:
Here's an example:
https://github.com/mark-anders/relative-image-url
According to http://blog.rodneyrehm.de/archives/35-Including-Data-From-Github.html, the problem in using
https://gist.github.com/user/605560c2961cb3025038/raw/b75d2...6e8/img.png
is that the b75d2...6e8 part varies per file (a quick experimentation confirms it is the git blob id). However you can drop that part resulting in a URL pointing to the latest version:
https://gist.github.com/user/605560c2961cb3025038/raw/img.png
or to take a working example:
https://gist.githubusercontent.com/cben/46d9536baacb7c5d196c/raw/dodgetocat_v2.png
Relative path?
This also works as relative path raw/dodgetocat_v2.png!
However (as of late 2017) github can render the same gist from 2 URLs:
When viewed from https://gist.github.com/cben/46d9536baacb7c5d196c/ (with trailing slash), the relative path is appended, resolves to https://gist.github.com/cben/46d9536baacb7c5d196c/raw/dodgetocat_v2.png — works :-)
When viewed from https://gist.github.com/cben/46d9536baacb7c5d196c (no trailing slash), the relative path replaces the last part of the URL, resolves to https://gist.github.com/cben/raw/dodgetocat_v2.png — broken :-(
[UPDATED Dec 2017. Previous problems of raw files served as Content-Type: application/octet-stream and rewriting src attributes of images to camo.githubusercontent.com no longer happen, at least not for images from same gist.]
Alas, we can't just use the first URL and trust it to always work.
Currently neither form returns a redirect, nor serves a rel=canonical link. I wouldn't bet on Github to never change this!
All internal gist links (e.g. from user's page https://gist.github.com/cben/) omit the trailing slash :-(
Gists in Google search results omit the trailing slash :-(
(You could use relative path 46d9536baacb7c5d196c/raw/dodgetocat_v2.png that would only work without trailing slash, but that's also questionable idea, and less worth it — not really more flexible than full URL.)
Using a proxy?
Both can be worked around with a proxy fixing the Content-Type, e.g. Rawgit or Bl.ocks.org (not by Github, don't abuse them). Unfortunately Rawgit doesn't render Markdown, only serves files as-is, and Bl.ocks.org does render markdown but the URL structure is such that relative links won't work. This means you can either reference full external URL in Markdown, or relative in HTML :-(
See https://gist.github.com/cben/46d9536baacb7c5d196c/ forked off your gist,
and its index.html viewed via:
http://rawgit.com/cben/46d9536baacb7c5d196c/raw/index.html
http://rawgit.com/cben/46d9536baacb7c5d196c/raw/
http://bl.ocks.org/cben/raw/46d9536baacb7c5d196c
http://bl.ocks.org/cben/46d9536baacb7c5d196c
Yes, the relative link is working for me. I am using pancake.io to host my pages.
http://pancake.io/2c8aa8/topics/cpp/cpp.md
The images on that page are in the cpp folder.
The markdown code used for the first image is
The markdown code (actually html) used for the second image is
<div style='float: center'>
<img style='width: 600px' src="prefixpostfixincrement.png"></img>
</div>
NOTE: I missed the gist part. Try the html way if gist doesn't support the markdown relative image path syntax.
tested just now...
i was unable to use relative urls on the github wiki.
i had to add the image to the wiki repo, then browser the repo and have github show it to me (so i could grab the url). then use the full url in the markdown. but luckily, the urls are simple to predict: https://github.com/*username*/*reponame*/wiki/*imagename.png*
i submitted this isse to the github support.
No, the relative URL to an image from markdown doesn’t work, so you’ll have to stick with the long, static URL:
https://gist.github.com/mattborn/c346c8689a5eaf86e823
However, relative URLs to some files work:
http://bl.ocks.org/mattborn/c346c8689a5eaf86e823
After scratching my head around this for good 15 minutes I realized:
Relative paths to images do work, but when you're writing a markdown file directly from the github web app, the images don't show up in preview. Once you commit the file the images are visible as expected
Since the GitHub wiki does not support directories, I want to put my md files into GitHub pages. However when I open them I found they are not interpreted at all. GitHub just gives me the raw file. See http://greenlaw110.github.com/Rythm/en/index.md. Any idea?
The documentation isn't particularly clear on this, but given that the Markdown rendering is done by Jekyll, I believe you need what they call "YAML front matter" for it to compile the page. So try putting this at the top of your file:
---
title: Document Center
---
That should be enough to trigger Jekyll. (And then you can get fancy and start using layouts, etc.)
Another reason (found by experience) why you might get a raw index.md file, is if you happen to also have a similarly-named index.html file. This blocks GH Pages.
Deleting index.html produces (on the site) a new index.html with parsed markdown. The original index.md is then no longer accessible.
I've got a repository on github with a .css file in it. Is there any way to have github serve this file in a way that I can consume it in a web page?
In other words, I'd like to be able to reference this source file at github directly, from an HTML file on my local computer or a live domain. Something like:
<link rel="stylesheet"
type="text/css"
href="http://github.com/foouser/barproject/master/xenu-is-my-lover.css"
/>
I've tried including a<link> to the "raw" source file (http://raw.github.com...), but github serves its Content-Type as text/plain, and consequently, Chrome and FF are not adding its content as CSS styles to the page—the file's data is being discarded and a warning is shown in the debugger consoles of the browsers.
Important: rawgit.com is shutting down. Read more about other alternatives here - https://rawgit.com/
Found something really cool. You get the raw link as: http://raw.github.com/...
Simply fetch the files from rawgit.com (or cdn.rawgit.com) instead of raw.github.com and DONE!
UPDATE:
You can also use raw.githack.com if you want to serves raw files directly from Bitbucket or GitLab
GitHub repos aren't web hosting, you should push that stuff up to a service specifically designed to serve files, like pages.github.com.
Check out https://gitcdn.link/ . Seems to work well.
Rawgit.com has shut down.
First Visit RawGit as suggested earlier
Next copy your file path from github into the RawGit box
RawGit will automatically produce two refrences to your web page
The Development and Production refrence
refrence the development link in your webpage if you are still developing
save/upload then reload your webpage
if there was no change it means your browser has saved your former refrence
clear your browser data then reload
Hope that helps?
You have to use RawGit which, is a part of MaxCDN, serve files directly from the GitHub repository with the correct content type header.
Full tutorial, click here
The root of the site http://example.com correctly identifies index.html and renders it. In a similar manner, I want, http://example.com/foo to fetch foo.html present in the root of the directory. The site that uses this functionality is www.zachholman.com. I've seen his code in Github. But still I'm not able to find how it is done. Please help.
This feature is actually available in Jekyll. Just add the following line to your _config.yml:
permalink: pretty
This will enable links to posts and pages without .html extension, e.g.
/about/ instead of /about.html
/YYYY/MM/DD/my-first-post/ instead of YYYY-MM-DD-my-first-post.html
However, you lose the ability to customize permalinks... and the trailing slash is pretty ugly.
Edit: The trailing slash seems to be there by design
It's actually the server that needs adjusting, not jekyll. Be default, jekyll is going to produces files with .html extensions. There may be a way around that, but it's unlikely that you really want to do go that route. Instead, you need to let your web server know that you want those files served when a URL is called with the file's basename (and no extension).
If your site is served via an Apache web server you can enable the "MultiViews" option. In most cases, you can do that be creating an .htaccess file at your site root with the following line:
Options +MultiViews
With this option enabled, when Apache receives a request for:
http://example.com/foo
It will serve the file:
/foo.html
Note that the Apache server must be setup to allow the option to be set in the htaccess file. If not, you would need to do it in the Apache config file itself. If your site is hosted on another web server, you'll need to look for an equivalent setting.