Jekyll URLs add leading slash when pushed to Github Pages - jekyll

I have successfully hosted on Github Pages. Today I was trying to run the site through browser-sync so I could view my changes faster, and noticed that my urls were different when served locally than on the actual website. Here's what the local url looks like:
<a href="blog/post-title/">
Which when clicked on brings me to the page
http://localhost:3000/blog/blog/oven-baked-fajitas/
This same link, once it has been pushed to the Github repo and processed by them, turns into
<a href="/blog/blog-title/">
Which works correctly.
I link to individual posts in my archive like this:
<a href="{{ post.url }}">
And my _config.yml is as follows:
name: Adam Hammes
description: Adam Hammes' Website
author: Adam Hammes
url: http://hammes.io
permalink: blog/:title/
excerpt_separator: <!--more-->
exclude: ["README.md", "gulpfile.js", "package.json", "node_modules"]
What I have tried:
I added baseurl: "" to my _config.yml; no effect.
I added baseurl: "/"; no effect.
I added baseurl: "/", and changed the link format to {{ site.baseurl }}{{ post.url}}; this fixed the links locally, but resulted in 2 leading slashes live thus breaking the links.

I was using an old version of Ruby. By updating to Ruby 2 and then running gem install Jekyll I was able to get consistent behavior.

Related

How to change the URL of the title in Jekyll?

Is it possible to change the target URL when clicking on the value title defined in _config.yml ?
To define the context, I have my static HTML website hosted on GitHub, it's a one page website. I have on the same repository the Jekyll blog accessible on mysite.github.com/blog.
When I click on the header title, the Jekyll blog redirect me to / which is my website and I would like to be redirected in /blog.
What is the simpliest method ?
You need to rewrite the header.html of the minima theme template. The goal is to change the target of the link in the header.
To do that :
Create a folder _includes and a file header.html inside
Copy and paste the original code for the official repository
https://raw.githubusercontent.com/jekyll/minima/master/_includes/header.html into the header.html file
replace the content of href="{{ "/" | relative_url }}" by href="{{ "/blog" | relative_url }}"
Have you tried setting url and baseurl in the config for the blog? Baseurl should be used for the "home" page.

Jekyll not showing the same pages in _site folder as compared to running it locally

I am new to making website using jekyll. When I run the website on local server using jekyll serve, it runs perfectly. I used jekyll build to build files for FTP server. Problem is the pages built in _site folder are without themes and images shown while running it locally.What can be its solution?
You have to customize and override your CSS styles, images or pages in Jekyll. That's why theme changes are not applied and "Jekyll Serve" command resets your changes.
Look at this Official Github Help page: Customizing CSS and HTML in your Jekyll theme
And Tom Kadwill's Page How to Override CSS Styles in Jekyll
Locally, your site is served at http://127.0.0.1:4000/ which the root.
Your _config.yml baseurl: "" is empty.
Once you publish you site from something else than the root, say, https://example.com/blog/, you need to check two things :
that your baseurl: "/blog" is set accordingly to path.
that you call your resources using {{ site.baseurl }}{{ post.url }} or with filter {{ image.url | relative_url }}

Links to files in assets not working in github project page using jekyll

I am setting up a github project pages blog using jekyll, and the links to my assets files do not work properly. I have seen several other posts with similar issues, but none seem to apply to my case. Before marking as duplicate, please check that I have not already tried the solution suggested in the other question.
When trying to add an image to my post the image does not show. When I try to link to a pdf for download I get a dead link (as in http://nikosdaniilidis/github.io/assets/all-pdf/Daniilidis2014-surface-noise.pdf)
I tried the following configurations:
Case 0
In _config.yml
baseurl: "/projectname"`
url: "http://username/github.io/projectname"
In _posts/some-post
![image here]({{ site.url }}/assets/path/to/image.png)
[pdf here]({{ site.url }}/assets/path/to/some.pdf)
Resulting link paths (not working):
http://nikosdaniilidis/github.io/altblog/assets/all-pdf/Daniilidis2014-surface-noise.pdf
Case 1
In _config.yml
baseurl: "/projectname"`
url: "http://username/github.io"
In _posts/some-post
![image here]({{ site.baseurl }}/assets/path/to/image.png)
[pdf here]({{ site.baseurl }}/assets/path/to/some.pdf)
Resulting link paths (not working):
http://nikosdaniilidis/github.io/assets/all-pdf/Daniilidis2014-surface-noise.pdf
Case 2
In _config.yml
baseurl: "/projectname"`
url: "http://username/github.io"
In _posts/some-post
![image here]({{ site.baseurl }}{{post.url}}/assets/path/to/image.png)
[pdf here]({{ site.baseurl }}{{post.url}}/assets/path/to/some.pdf)
Resulting link paths (not working):
http://nikosdaniilidis/github.io/assets/all-pdf/Daniilidis2014-surface-noise.pdf
I am running out of ideas and really appreciate some help! Here is the repo, and here is the resulting page (look under Test links and other asset material post, currently configured with the last of the above cases).
Thanks
Github pages user repository url pattern is username.github.io and NOT username/github.io
Try :
url: http://nikosdaniilidis.github.io
baseurl: /altblog

github pages is not picking up my front matter defaults for jekyll

My _config.yml is defined thus
# Site settings
title: XTargets
email: bradphelan#xtargets.com
description: "XTargets - Technical blog of Brad Phelan"
baseurl: "/xtargets"
url: "http://xtargets.com"
# Build settings
markdown: redcarpet
permalink: pretty
defaults:
-
scope:
path: ""
values:
layout: "post"
https://github.com/bradphelan/xtargets/blob/gh-pages/_config.yml
and when I run the jekyll server locally my posts get wrapped with the post layout. However when checked into gh-pages branch on github the pages are not wrapped.
See
http://bradphelan.github.io/xtargets/2012/03/29/simple-javascript-powered-inline-confirm/
Why would this occur?
It looks like github pages has not yet updated jekyll version. pages.github.com/versions/. It's at jekyll version 1.5.1 currently.
This issue is not related to Front Matter defaults or GitHub Pages not running the latest Jekyll version. It's your stylesheet not being linked correctly.
Your site looks for the CSS file in http://bradphelan.github.io/css/main.css, but it is located here: http://bradphelan.github.io/xtargets/css/main.css
In head.html, change this accordingly:
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

GitHub pages and relative paths

I have created a gh-pages branch for a project that I am working on at GitHub.
I use Sublime text to author the website locally and my problem is that when this is pushed to GitHub, all the links to javascrips, images, and css files are invalid.
For instance, I have this in my head section.
<link href="assets/css/common.css" rel="stylesheet">
This works great locally, but it does not work from GitHub as the links are not resolved using the repository name as part of the URL.
It asks for:
http://[user].github.io/assets/css/common.css
when it should have been asking for:
http://[user].github.io/[repo]/assets/css/common.css.
I could of course put the repo name as part of the URL, but that would prevent my site to work locally during development.
Any idea how to deal with this?
You'll need to use Jekyll.
Copying verbatim from the relevant documentation:
Sometimes it’s nice to preview your Jekyll site before you push your
gh-pages branch to GitHub. However, the subdirectory-like URL
structure GitHub uses for Project Pages complicates the proper
resolution of URLs. Here is an approach to utilizing the GitHub
Project Page URL structure (username.github.io/project-name/) whilst
maintaining the ability to preview your Jekyll site locally.
In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.
When referencing JS or CSS files, do it like this: {{ site.baseurl}}/path/to/css.css – note the slash immediately following
the variable (just before “path”).
When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between
the two variables.
Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty
string to the --baseurl option, so that you can view everything at
localhost:4000 normally (without /project-name at the beginning):
jekyll serve --baseurl ''
This way you can preview your site locally from the site root on
localhost, but when GitHub generates your pages from the gh-pages
branch all the URLs will start with /project-name and resolve
properly.
(Apparently someone figured this out only a few months ago.)
Which browser are you using? Are you sure that this happens? Because it shouldn't. If you include a relative URL in a link, it will get resolved relative to the URL of the document that contains the link. In other words, when you include
<link href="assets/css/common.css" rel="stylesheet">
in an HTML document at http://www.foo.com/bar/doc.html, the link to assets/css/common.css will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css, not to http://www.foo.com/assets/css/common.css as you claim.
For example, view the source of the Twitter Bootstrap webpage: http://twitter.github.io/bootstrap/. Notice the style links at the top, specified as <link href="assets/css/bootstrap.css" rel="stylesheet">. That link correctly resolves to http://twitter.github.io/bootstrap/assets/css/bootstrap.css, i.e. it does include the repo name.
You could just put this
<base href="/[repo]/">
inside of the <head> tag, and it solves the problem.
You could also improve this solution by setting:
<base href="{{site.baseurl}}" />
and then set site.baseurl to empty string for the local testing.
This should not be an issue anymore in Dec. 2016, 3 and an half years later.
See "Relative links for GitHub pages", published by Ben Balter:
You've been able to use relative links when authoring Markdown on GitHub.com for a while.
(that is from January 2013)
Now, those links will continue to work when published via GitHub Pages.
If you have a Markdown file in your repository at docs/page.md, and you want to link from that file to docs/another-page.md, you can do so with the following markup:
[a relative link](another-page.md)
When you view the source file on GitHub.com, the relative link will continue to work, as it has before, but now, when you publish that file using GitHub Pages, the link will be silently translated to docs/another-page.html to match the target page's published URL.
Under the hood, we're using the open source Jekyll Relative Links plugin, which is activated by default for all builds.
Relative links on GitHub Pages also take into account custom permalinks (e.g., permalink: /docs/page/) in a file's YAML front matter, as well as prepend project pages' base URL as appropriate, ensuring links continue to work in any context.
And don't forget that since August 2016, you can publish your pages right from the master branch (not always the gh-pages branch)
And since Dec. 2016, you don't even need Jekyll or index.md. Simple markdown files are enough.
It seems that Github Pages is not very responsive. Though it makes new files available immediately, modified files would not appear immediately due to caching or something.
After waiting 15 minutes or so, everything is fine.
Another option is to create a new repo specifically for the github.io webpages. If you name the repo as [user].github.io on github then it will be published at https://[user].github.io and you can avoid having the repo name in the URL path completely. Obviously the downside is that you can only have 1 repo like this per github user, so it may not suit your needs, I'm not sure.
The best option is now the relative_url filter:
<link href="{{ '/assets/css/common.css' | relative_url }}" rel="stylesheet">