CODEWITHSUNDEEP
jekyllgithub-pages
oFca
oFca

Reputation: 2830

Jekyll on Github pages not displaying images and has broken links

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"

Upvotes: 7

Views: 12669

Answers (2)

Mykel
Mykel

Reputation: 1764

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.

Upvotes: 0

David Jacquel
David Jacquel

Reputation: 52789

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

Upvotes: 21

Related Questions