Does GitHub Pages have a shortcut way of linking to files in its git repository?
-
21-12-2019 - |
Question
I have a git repository with a bunch of code at https://github.com/ozzyogkush/solitaire-webapp, and a GitHub pages branch (at https://github.com/ozzyogkush/solitaire-webapp/tree/gh-pages) all set up for that repository. The question is, does GitHub pages (when rendered at http://ozzyogkush.github.io/solitaire-webapp/) 'see' the main repository in any way? Meaning if I want to include a stylesheet (say, stored in {repository}/somedir/css/somecss.css
), is there a shortcut way of doing it (that also sends the correct MIME type) or do I have to link to the full raw data URL?
If you look at the source of the GH Pages you'll see I'm grabbing some CSS and JS from the repo, using the full path to the raw source, and both of them are returned in plain text rather than text/css
and application/javascript
as expected.
Solution
Github raw url like https://raw.githubusercontent.com/ozzyogkush/solitaire-webapp/master/prodbuild/css/bootstrap.css will always return a text/plain mime.
Some Stack Overflow answers are talking about services like https://rawgithub.com/ that returns the right mime for both css and javascript. But they are out of control and can be a real security problem because you have to trust them to send the original content. Not an option for me.
This answer with a post commit hook that sends your modified assets from master to gh-pages seems to be a good solution.
You can also look on the side of mixing Grunt with Jekyll and keep all you code on the same branch.
OTHER TIPS
If the css or js file is also in the gh-pages
branch, using relative links should works fine.
<link rel="stylesheet" href="/assets/themes/mark-reid/css/syntax.css" type="text/css" />
You can first merge these css and js files into your gh-pages
branch, then use relative link to reference them.
To answer your first question, no. A gh-pages branch does not have access to the main repo branches by definition, because it's an orphan branch. At least not from jekyll.
As an aside, you can access the github based path of the file in the gh-pages branch from jekyll with the following structure:
https://github.com/username/reponame/commits/master/{{ page.path }}
For example, @benbalter uses this structure on his personal blog to render a link so users can edit his content and open a pull request.
From what I understand, GitHub repos aren't for hosting (per this other SO article)
It's not clear what kind of work you've already done on your gh-pages
branch, but maybe this guide will help you make sure everything is configured correctly. The article outlines how to set things up so shortcuts like <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" >
are possible.
You might be interested in the fact that, in the meanwhile, you do not need a gh-pages
branch to serve GitHub Pages. You could just serve these pages from the master
branch. You need a README.md
file or index.md
or index.html
. From there, you can reference all the files in your repository, with the correct content-type header.