Missing CSS and Templates?

Help
1

I used to have a user-name jekyll website hosted on github pages. The name of the repo and the site was: “molecule [dot] github [dot] io”.

However, I found a need to install some plugins beyond what github-pages will allow w/ jekyll in --safe mode, so I thought I’d just move my generated _site/ folder to the gh-pages branch, rename the repo to “molecule”, and have my new site up and running as a “project page” at molecule[dot]github[dot]io/molecule (complete w/ more plugins).

However, since moving over to a “project page” github page, it seems that all the formatting is gone. Here’s a screenshot where you can see broken image links and janky formatting: https://www.dropbox.com/s/cw89mn335c4fal0/Screenshot%202018-04-12%2018.50.40.png?dl=0

Here’s how it’s supposed to look: https://www.dropbox.com/s/vqt2m80mi5a7iuo/Screenshot%202018-04-12%2019.45.34.png?dl=0

Specifically, it looks like:

  • CSS is no longer being rendered, and
  • whatever templating jekyll had been doing is missing as well.

I’m pretty new to web dev so not sure I can diagnose the issue beyond that, so any suggestions for more data to gather would be most welcome.

2

your css link is probably incorrect.

Did you update the baseurl to the name of the repo? you probably had no value for the baseurl before as it was a username based repo and those are served from the root. Now what it is a project repo the project name is a sub folder under your username and that needs to be reflected in the path for your css. Usually that is handled by the baseurl setting in the config.

3

Oooh interesting. Ok, so I’ve added baseurl: /new-posts to my _config.yml on the master branch. I then do ‘jekyll serve -w’, and it tells me to visit the url: “http://127.0.0.1:4013/new-posts/”, but unfortunately everything still appears the same.

I’m guessing I haven’t properly configured my URLs, so the baseurl isn’t being used where it should be. For example, I have an image inside of a div, and the img-src looks like this:

<img src="/src/img/1-jacket-glasses-chin-up.JPG"/>

Do I need to update that link to include “baseurl” somehow?

All the examples I’ve seen are using Liquid tags. (For example, this one). I’m not quite sure I understand what needs to change.

4

yes.

what is the name of the project repo? new-posts? or molecule? seems like your first post says it is molecule which is what you should have the baseurl - /molecule

Basurl should always have a leading / but no trailing /.

yes, all your links to css/images/js and internal pages etc should have baseurl in them - kind of even if you don’t use baseurl just in case you ever do. If you don’t use baseurl and it is empty in the config then it doesn’t effect anything.

Here is an example of a link to css:

href="{{site.baseurl}}/assets/css/site.css"> other people use prepend not sure what the difference is. If baseurl is empty the link just renders as /assets/css/site.css which is what I want. if baseurl is set to /molecule then you end up with /molecule/assets/css/site.css.

5

The name of the repo is molecule, but the name of the url I want is new-posts. Do they have to match? (edit: I just tried both and yes, it seems they have to match. Please correct me if I’m wrong).

Ok, so my baseurl is /molecule now, and I’ve updated all the links to include {{site.baseurl}}. So the image example earlier:

<img src="/src/img/1-jacket-glasses-chin-up[dot]JPG"/>

Became this:

<img src="{{site.baseurl}}/src/img/1-jacket-glasses-chin-up[dot]JPG"/>

All my subdirectories are working! So localhost[port]/molecule/research/ works fine.

Unfortunately, the main page index.html, available at localhost[port]/molecule/ doesn’t work! Specifically, the CSS is completely janked: https://www.dropbox.com/s/b6cc31dfyycaze5/Screenshot%202018-04-15%2012.14.54.png?dl=0

index.html has all updated everything. It is also using the default.html file as a templater (apologies if my terminology is incorrect), and I updated default.html to look like this:

I added site.baseurl everywhere that had a relative path…but I’m still seeing messed up formatting (but only on the main page! Everything else is working great). Any ideas?

6

what does the chrome inspector say? right click on the page, inspect, console tab should show you errors.

Easier to help when there is a repo and a live site to see…