I’m having a weird issue with my Jekyll site on GitHub Pages. Everything works fine when I test it locally, but once it’s deployed, I’m seeing strange behavior with the theme.
The main page loads perfectly with all the styling applied. But when I click on navigation links to go to other pages, those pages show up without any theme styling at all. It’s like the CSS just disappears.
The strange part is that if I open those same subpages directly in a new browser tab by typing the full URL, the theme loads correctly. It only fails when navigating through internal links from the homepage.
Has anyone encountered this before? I’m not sure if it’s a configuration issue or something with how GitHub Pages handles the theme files.
This exact issue bit me a few months back. The problem was my theme’s JavaScript handling page transitions. Some Jekyll themes load pages dynamically without full refreshes, which breaks CSS loading if it’s not configured right for GitHub Pages. I found my theme was trying to load stylesheets using document.write() during navigation - doesn’t work reliably on GitHub Pages. I fixed it by disabling smooth page transitions in my theme config and letting the browser handle normal page loads. Also check your theme’s docs for GitHub Pages settings - lots of popular themes have special configs for this hosting that’re different from local development.
Sounds like a relative path issue - super common with Jekyll deployments. When you jump between pages, the browser looks for CSS files relative to where you are instead of the site root. Check your _config.yml and make sure your baseurl and url settings match your GitHub Pages setup. Also check that your layout templates use absolute paths or Jekyll variables like {{ site.baseurl }} for stylesheet links. I hit this exact problem last year - my theme was using relative paths in the head section. Fixed it by updating CSS links to {{ '/assets/css/style.css' | relative_url }} instead of just the filename.
Same thing happened to me - turns out it was a subdirectory config issue. GitHub Pages serves from a subdirectory unless you’ve got a custom domain, which breaks asset loading when you navigate around. I fixed it by updating my _config.yml with the right baseurl that matches my repo name. The trick was changing my layout file to use {{ site.baseurl }}{{ site.url }} for all assets instead of hardcoded paths. Also check if your theme has navigation JavaScript - some use AJAX loading that breaks CSS imports if it’s not set up right for GitHub Pages.
same thing happened to me! check if your theme loads via cdn or locally. github pages sometimes caches stuff weird and css won’t load when you navigate. clear your browser cache first, then make sure the theme files are served from the right spot in your repo.