Gh-pages site looks good locally but on gh all but home page look wrong

Help
1

I’m a noob at html/css/jekyll etc.

My jekyll/gh-pages blog looks fine on my computer, but I just uploaded it and … not so much. The home page looks great! But my pages and posts have all their content but are missing some important formatting info. I didn’t get any build errors or warnings from the current version.

Can someone tell me what I’m missing here? I would greatly appreciate it.

Repo: https://github.com/NormBirkett/NormBirkett.github.io

Incidentally, I’ve read through the discussion at https://github.community/t/css-not-being-applied-in-pages/10466/9 and tried the only one of the suggestions there that appeared to apply, without effect. Of course, I may have failed to understand something on that discussion.

I’m very sorry to bother all of you but I’m a bit stumped. In particular it baffles me that my local build of the site looks fine but up on github it doesn’t.

One clue, maybe:

When I removed ‘{{ site.baseurl }}’ from my stylesheet links locally, my local site started to misbehave exactly as my github site is doing. So I think I must be misunderstanding the purpose of the baseurl. Removing this part of these lines had no effect up on gh, though.

Late breaking news: I just stumbled upon a fix! Which I don’t understand, but I’ll take it!

When I replaced ‘{{ site.baseurl }}’ in the stylesheet links with ‘{{ site.url }}’, the gh site started working. But this same change breaks my local build! Disables the css completely!

So my revised question is: How am I supposed to set this up so that both local and deployed (on gh) blog will work?

Later breaking news: Not all is working correctly on gh, however. When I go from home to a page or post, then clicking on home or the blog title from there does not take me back to home!

As I said, I’m a noob at this. If someone can give me the key principle I’m missing, I’ll be very very grateful.

2

your site is not a project site - it is your user site - the difference being project sites are served from within a sub directory of your user name - those are the ones that need the baseurl set to the name of the repo.

Since yours does not need that the baseurl should be empty - I would do:
baseurl: ''

you currently have a slash in there - that is not empty and will likely break the url for loading stuff.

Don’t put site.url in front - keep it the way it was with baseurl.

There is also relative_url which I think is the new better way.

A little more info here:

or look at the url filters.

1 Like
3

Thanks! You gave me the key insights here and started me on the path to solving my problems.

The purpose of site.baseurl was what had eluded me before seeing your answer. Empty is indeed what I needed.

Using ‘{{ site.baseurl }}’ prefixed to my paths worked OK on gh-pages, but not on my computer under jekyll --serve. I don’t yet understand why not.

But when I switched to using e.g.

{{ ‘public/css/whatever.css’ | relative_url }}

then everything started working on both gh and my own computer.

I gather that jekyll --serve on my machine substitutes c:/blah/blah/blah/preview_site for site.url. And then baseurl being ‘’ works with that, as well as after my gh site url – because mine is a user site.

I really appreciate your help here!

4

right, as I understand it a limitation of baseurl was that locally it would break your site since locally it was not being served from a sub directory - so people would use 2 config files and load the dev one locally and it would not have a baseurl and use the main config on GH pages. Something like that. I don’t use GH pages that much so I didn’t have much experience with that.

the relative_url is smart and knows if you are working locally and doesn’t use the baseurl if that is the case, so it is a much better choice if you are working locally.