Jekyll on Github pages not displaying images and has broken links

Question

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: [email protected]

#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"

Plantagenet

Answer 1

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">
<a href="{{ site.baseurl }}/linkto/">Link</a>

See Jekyll documentation here

Kincaid

This is spot on, but It would be nice to include some additional context on why this is the solution, e.g. GH pages paths include the project name. This answer is a great reference – Demodulation

The real solution is that people RTFM. My answer is short because I'm a little bit bored to answer the same question again and again – Kincaid

@DavidJacquel I also ran into this issue, seems like the manual might need a bit more clarity, as I read it and still wasted some time on this. +1 though as your answers (on multiple questions) have been fantastic guidance in getting jekyll set up and working as I wanted. – Garfieldgarfinkel

I was about to leave Jekyll and fortunately found this. Thanks – Porpoise

I tried almost everything this is the only thing that helped which's adding the: {{ site.baseurl }} – Sheree

Answer 2

For me, I went from building the site locally with .nojekyll present to having Github Pages build on push. This broke a handful of my images. What ended up working was renaming the file, pushing, naming the file back, and then pushing that.

e.g. If this-image-is-broken.jpg is not displaying.

1. this-image-is-broken.jpg file name is changed to this-image-is-broken1.jpg
2. push to Github.
3. this-image-is-broken1.jpg file is named back to this-image-is-broken.jpg
4. push to Github.

Should be fixed.

Flugelhorn