Why is just the HTML showing after I push my changes from Jekyll to Github Pages?

I am creating a blog on Jekyll for the first time and I am at the point where I'm trying to deploy what I have so far to github pages. When I serve the site and view it locally, it looks fine - so I thought that all I had to do was push all of the files to a gh-pages branch. Now that I have done this, all that is showing is the HTML.

To troubleshoot, I downloaded just the template files and pushed those to a Github page to see if the issue had to do with how I was editing the CSS, but when I did that I got the same results.

I came across an article that was specifically about how to use github pages to store a jekyll site, and it said to remove the slash before the css folder in the linked stylesheets on the HTML if your page isn't styled correctly. After reading that I thought that the slash was for sure the issue, but after removing the slash... I got the same result.

I have been trying for hours and I feel like its probably something very simple(such as the slash).

Here is the repo: https://github.com/pacalabre/blog-site/tree/gh-pages

Here is the output: http://pacalabre.github.io/blog-site/

Thank you in advance for any answers!

Solution

You need to add/edit: baseurl: /blog-site to the config file. Note there is no trailing slash. 'blog-site' is the name of your project, the project name becomes a sub directory that serves your site. Without the baseurl setting, your relative urls are trying to fetch things from http://pacalabre.github.io/ when they are really at http://pacalabre.github.io/blog-site/.

GH is serving your site as a subfolder to the domain and your references are not taking that into account.

Once you add the baseurl setting, you then need to add {{site.baseurl}} in front of your assets like images, css and js.

Also, once you do the baseurl setting, when you serve locally it will not be quite correct, you will need to add the /blog-site to the end of the localhost url for it to work properly.

You also should try using the dev tools inspector in Chrome to help you troubleshoot, it will clearly tell you right now that it cannot load all your js files or images, and it will show where it is trying to load them from.