Search code examples
jekyllgithub-pages

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"

Solution

  • 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