7

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"
oFca
  • 2,830
  • 6
  • 31
  • 43

2 Answers2

20

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

David Jacquel
  • 51,670
  • 6
  • 121
  • 147
  • 1
    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](http://stackoverflow.com/a/19173888/1048479) answer is a great reference – Nick Tomlin Mar 03 '15 at 00:10
  • 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](https://stackoverflow.com/search?tab=newest&q=user%3a1548376%20[jekyll]%20site.baseurl) – David Jacquel Mar 03 '15 at 08:57
  • 8
    @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. – David Dec 20 '15 at 15:16
  • I was about to leave Jekyll and fortunately found this. Thanks – ShankPossible Aug 23 '20 at 18:29
  • I tried almost everything this is the only thing that helped which's adding the: {{ site.baseurl }} – ShifraSec Jul 07 '21 at 09:42
0

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.

Mykel
  • 1,355
  • 15
  • 25