Jekyll on Github pages not displaying images and has broken links - jekyll

I'm trying to host my Jekyll blog on Github pages. The blog is currently live here.
As you can see, the images are missing + when you click on the blogposts, it shows 404. How to fix this? Here's the link to my public blog repo, and here's my _config.yml file:
# Build settings
markdown: redcarpet
highlighter: pygments
# Site settings
title: "Sam Yonski"
description: > # this means to ignore newlines until "email:"
Reading and writing...
email: sam.yonski#gmail.com
#blog logo
logo: "/assets/images/sam_yonski_logo.png"
# blog cover
cover: "/assets/images/cA4aKEIPQrerBnp1yGHv_IMG_9534-3-2.jpg"
name: 'Sam Yonski'
author: 'Sam Yonski'
author_image: "/assets/images/author.jpg"
paginate: 5
url: "https://ofcan.github.io" # the base hostname & protocol for your site
baseurl: "/sam_yonski"

In _config.yml set baseurl: /sam_yonski
and call you resources with :
<link rel="stylesheet" href="{{ site.baseurl }}/css/css.css">
<script src="{{ site.baseurl }}/js/scripts.js"></script>
<img src="{{ site.baseurl }}/path/to/img/toto.jpg">
Link
See Jekyll documentation here

Related

Changing personal site configuration with jekyll

I'm trying to build a site with jekyll. I managed to make math work and upload some files. Now the overall distribution of content is not optimal.
I get a link to "HEAD" that lists a series of updates of Jekyll. I would like to get rid of that.
The main url redirects to some blog entries while you have to click on "About" in order to go to some general information about me. I would like to do it in the opposite way, i.e. having the about section shown in the main url of the page https://rjraya.github.io/ and the blog in some derived url like https://rjraya.github.io/blog
Here are the sources of the page. How can I do this simple changes? I understand that I'm using the Minima template.
Re: HEAD
I think the "HEAD" is coming from the History.markdown file. It is strange that the "HEAD" does not show up in a local jekyll serve development environment. I suspect the code below is picking up History.markdown in jekyll, along with about.md when rendering header.html.
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L20-L27
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
RE: Page Title URL Computational reflections
Change the href from / to /blog in this line
https://github.com/rjraya/rjraya.github.io/blob/ddc6a2f5c5804961da6ac79472b7f77052bef267/_includes/header.html#L7
<a class="site-title" rel="author" href="{{ "/blog" | relative_url }}">{{ site.title | escape }}</a>
RE: About URL
Remove the permalink : /about/ from the about.md page. The about.md will be come the homepage (e.g. /) in the next step.
https://github.com/rjraya/rjraya.github.io/blob/gh-pages/about.md
RE: Show about.md information on homepage rjraya.github.io and show _posts markdown files under rjraya.github.io/blog
Let jekyll use the default behavior of assigning permalinks based on the markdown filename.
Rename index.md to blog.md. This will move the list of _posts files from / to /blog.
Rename about.md to index.md. This will move the content of about.md from /about to /.

md (markdown) pages giving 404

I've recently started using GitHub pages and I'm facing the following issue. As you can see in my repository, I have a _posts to store my blog markdowns. I have used the naming convention of YYYY-MM-DD-title-of-my-post.md.
Now, as you can see with 2017-12-25-shivang-bhatt-site-launched.md, the content inside is as follows:
---
layout: post
title: "Shivang Bhatt, Launches Site"
date: 2017-12-25
---
Well...some text.
Now for the layout part of this, my _layouts contains a post.html with the following content:
---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date_to_string }}</p>
<div class="post">
{{ content }}
</div>
The issue I am facing is this. The URL which should host this post page, http://s-bhatt.github.io/2017/12/25/shivang-bhatt-site-launched, is giving a 404 - File not found.
I would be extremely grateful for any help or pointers regarding this issue.
In your _config.yml you have set the permalink:
permalink: /post/:year/:month/:day/:title
so following the filename convention for posts, 2017-12-25-shivang-bhatt-site-launched.md will be at http://s-bhatt.github.io/post/2017/12/25/shivang-bhatt-site-launched, that is, inside the post folder.
If you want to make it work with the url you tried, just remove post from permalink like:
permalink: /:year/:month/:day/:title
The right address is
http://s-bhatt.github.io/post/2017/12/25/shivang-bhatt-site-launched
Note /post in the middle of it.

Baseurl not applying to jekyll posts.

All pages are working correctly with baseurl except my posts.
What I'm getting
url
https://pizzapgh.github.io/general/2016/08/29/example-post-three/
What I need isntead, "/katietest" before general
https://pizzapgh.github.io/katietest/general/2016/08/29/example-post-three/
In my config I have:
baseurl: /katietest
url "http://pizzapgh.github.io"
Repo
https://github.com/pizzapgh/katietest
Suggestions? I've worked with this before and all I had to do was set the baseurl. I can't seem find out what it is that's not making my post not show.
Thanks.
In _includes/post_list.hmtl you can replace two occurrences of :
<h5><a href="{{ page.url }}"...
by
<h5><a href="{{ site.baseurl }}{{ page.url }}"...
And you can do the same in _includes/post_list.hmtl.

jekyll blog permalink breaks and yields "404 not found"

I have started a small website with a few pages and a couple of blog posts. It is hosted on my organization's server and I ftp'ed all contents of _site/ directory into a subdirectory of the website. Hence the Jekyll site is at http:// myusername.foobar.foo/thiswebsite/ .
In my _config.yml
baseurl: "/thiswebsite"
url: "http:// myusername.foobar.foo"
Now all pages show up correctly. But blog posts don't.
In YAML front matter of each blog post:
permalink: /:title.html
Then I ended up generating links on index.html page to blog posts at http:// myusername.foobar.bar/blog-title.html but the actual blog posts are found at http:// myusername.foobar.bar/thiswebsite/blog-title.html. So if people click on the links found on index.html they will see 404.
On index.html I have:
{% for post in site.posts %}
<h2>{{ post.title }}</h2>
<blockquote>
{{ post.excerpt }}
</blockquote>
{% endfor %}
I would have thought {{ post.url }} would automatically insert correct URL for the posts, but apparently that's not happening. :(
Where did I screw up?
(Jekyll version 3.1.2)
Note: blank space after http:// is intentional as StackExchange thinks I'm posting links and that's apparently not allowed. In my actual markdown and html they are proper URLs.
Link to a collection item (post are collections items) or pages :
eg : {{ post.title }}
or {{ post.title }}
And it's the same for resources links (image, script, css, ...).
eg : <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
or <script src="{{ site.baseurl }}/js/script.js"></script>

How do I define a custom collection in Jekyll?

Following the Jekyll Collections documentation, I wrote the following code in _config.yml
_config.yml
collections:
- popular_posts
So when I print {{ site.collections }}, the output is "popular_posts".
I also made a folder called "_popular_posts" at the same level as "_posts".
_popular_posts contains two .md files with some YAML front matter, same as a post.
However, if I print {{ site.popular_posts }} or {{ site.collections.popular_posts }}, there is no output.
How do I have Jekyll recognize the .md files in that directory so that the following code will work?
{% for popular_post in site.popular_posts %}
<a href="{{ popular_post.link }}">
<h1>{{ popular_post.title }}</h1>
<img class="pop-img" src="{{ popular_post.image_url }}">
</a>
<span id="pop-order"><span class="pop-current-popular_post-number">{{ popular_post.number }}</span>/5</span>
{% endfor %}
It's quite easy! You're on the right track. In your _config.yml:
collections:
- popular_posts
This will tell Jekyll to read in all the files in _popular_posts.
If you want each of those two files to have a corresponding output file (like how _posts works now), you'll want to change your _config.yml to:
collections:
popular_posts:
output: true
This will produce files at /popular_posts/filename1.html and /popular_posts/filename2.html, one page for each post.
Collections are only recently up on GitHub Pages so if you were trying this there, it would have failed.
Check out jekyll-help for more help if you need it!