Jekyll posts are displaying content, but not properly formatting the proper layout

Question

so I just started working with Jekyll and GitHub-Pages so I can run my own portfolio website. Since making things pretty is a weak point of mine, I picked up a Jekyll version of the HTML5UP Helios Template to modify for my purposes. Here is the current website (work in progress I know)

I decided to make my project pages each into posts, such that it'd be easy to add a new one if need be; each post would also have the left sidebar layout as its template, which you can see on the nav-bar.

I thought it would be easy enough to just link the markdown files to their own pages, and just use the template. Here is an example of what I was trying to do with one of the "carousel" posts:

---
layout: left-Sidebar
title: C++ Big Int Class
desc: This is a sample post that is added under the "desc" part of the YAML.
img: pic01.jpg
categories: carousel
---

and here is where I link it in the carousel:

{% for post in site.categories.carousel %}
    <article>
        <a href="{{post.url}}" class="image featured"><img src="images/{{ post.img }}" alt="" /></a>
        <header>
            <h3><a href="{{post.url}}">{{ post.title }}</a></h3>
        </header>
        <p>{{ post.desc }}</p>
    </article>
{% endfor %}

now I'd think that that would work, however I instead get a post that looks like this: (I don't have enough reputation to post more than two links, so you can find it by clicking the carousel link called "C++ Big Int Class")

If anyone could tell me what is wrong (as well as any other errors you may find I'm new to this) that would be very appreciated.

I'd post the file tree structure, but it's way to large, so if you'd like to see the other files, you can check them out in my Github repo here

marcanuy marcanuy · Accepted Answer · 2017-08-28T19:02:28

Pages are losing the style because you are including css and js with relative paths, e.g.:

in https://joe-mccann.github.io/carousel/2015/02/01/carousel1.html

<script src="js/jquery.min.js"></script>

That script would be expected to be at https://joe-mccann.github.io/carousel/2015/02/01/js/jquery.min.js.

To fix it, include them with the full path using this filter absolute_url:

<script src="{{ 'js/jquery.min.js' | absolute_url }}"></script>

Jekyll posts are displaying content, but not properly formatting the proper layout

1 Answers