Search code examples
jekyllliquidhttp-status-code-403

Jekyll images won't load: 403 error

New to Jekyll.

Not using github pages.

Trying to include an image in a post on my blog:

---
layout: post
title:  "myTitle"
date:   2018-06-03 17:45:00 -0400
categories: asdf
---

![My helpful screenshot]({{ "/assets/screenshot.jpg" | absolute_url }})

Confirmed that image file is correctly named and placed in assets folder in root directory (same dir as index.html in _site dir both locally and on my site server).

The image appears on localhost:4000 and will appear on my actual site so long as I do bundle exec jekyll serve and have the local server running on my system... once I stop the local server the image on my site server fails to load, weirdly enough. When I switch to using relative_url the image fails to load.

screenshot of inspect element DOM image failing to load

I also tried loading an image with the following, all failing on my site server even when local server is running:

![My helpful screenshot]('assets/screenshot.jpg')

<img src="{{ site.baseurl }}/assets/screenshot.jpg">

_config.yml:

baseurl: ""
url: "" # also tried putting https://myBlogUrl here
markdown: kramdown
plugins:
  - jekyll-feed

Looks like the assets won't GET because of a 403 error:

screenshot of inspect element network pane failed GET request

My site loads everything else over http just fine (html and css docs). Why won't the images load? How can I give permission to load them insecurely?

Solution

  • For some reason the image files on my server had group and public read permissions disabled by default. Enabling these specific permissions fixed this issue.

    I set my files' permissions with chmod 644 <filename> (644 = -rw-r--r--).

    Note that depending on various things like your server setup (i.e. if you're on a shared server) you need to be careful about what permissions you set for your files/folders. I'm in no position to advise on the matter, do your homework!