On any edit, CSS stops working

I have a very simple Jekyll site that work fines on the first run and when I edit anything, even space.

everything gets broken locally.

my _config.yml is

name: Junaid Farooq
title: Junaid Farooq
description: Ruby, Elixir, DevOps
meta_description: "Ruby, Elixir, DevOps"

aboutPage: true
github: [metadata]

markdown: kramdown
highlighter: rouge
livereload: true

plugins: [jekyll-paginate]
paginate: 20
baseurl: /
domain_name: 'https://ijunaidfarooq.com/'

permalink: /:year/:month/:day/:title/

            path: "" # empty string for all files
            type: pages
            layout: default
            path: "" # empty string for all files
            type: posts
            layout: post
            path: ""
            type: drafts
            layout: post

this is how folder structure looks

my Gemfile

source 'https://rubygems.org'

group :jekyll_plugins do
  gem 'github-pages'

gem 'pathutil', :github => 'motevets/pathutil', :branch => 'fix-issue-4'
gem "webrick", "~> 1.7"

and this is my default.html

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.name }}</title>
  <link rel="shortcut icon" href="/assets/images/favicon.png">

  <link rel="stylesheet" href="/assets/css/remarkdown.css">
  <link rel="stylesheet" href="/assets/css/highlight.css">
  <link rel="stylesheet" href="/assets/css/style.css">

<body class="{{ page.class }}">
  <div class="container" data-rmd="hr-center ul-star">
      <span><a href="/">Junaid Farooq</a></span>

        <a href="/about">About</a>
        <a href="/">Articles</a>

      {{ content }}
    Copyright 2021 Junaid Farooq
    / Built with <a href="https://fvsch.com/code/remarkdown">ReMarkdown</a>

this works fine online, but when I edit anything locally it stopped working.

this is how I start the Jekyll server

using make start command.

all: help

install: ## Install dependencies
	which ruby || asdf install
	which bundle || gem install bundler
	bundle install

start: ## Start development server at port 4444
	bundle exec jekyll server --incremental --livereload --watch --future --port 4444

	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-15s\033[0m %s\n", $$1, $$2}'

In what way is it broken? Can you add a screenshot? Like CSS is broken in browser logs (oh I see that is the topic subject) or Jekyll server is stuck?

Open up your browser in inspect mode and look at console or network tab to see exactly what CSS file is requested and is giving a possible 404

Go to a simple jekyll new site and see if that worked then copy your changes over one file at a time until you find the cause of the break

Removing the slash for baseurl in your _config.yml should do the trick.

Clue came from looking at the server address:

LiveReload address:
    Server address:  👈Note extra slash
  Server running... press ctrl-c to stop.

Indeed baseurl should be "" or "/repo/"

1 Like

removed but still no effect of that, its still broken

PS regarding Makefile, the pattern across projects is “default” to do “install”. And “all” to do say install and build. So an empty project could have all run, or do it prepush.

I like to have an alias for help

h help:
  @grep ...


make h

And I don’t bother grepping comments. It is obvious what install and serve do from their names in the context of Jekyll so comments don’t add value.

when I goto new Jekyll site.

server wont even run with some error due to utilpaths.

as well as nothing is on 404 in console. everything is loaded and every css file is rendered as well but it has 0 effect.

What happens if you refresh the page after the auto reload? It is possible that the incremental or reload is causing the page to refresh before the CSS file is rebuilt completely so the browser thinks the file is missing.

Also try serve with no flags. Go back to basics and add flags one at a time to see which one breaks

proper site looks like this.

It works fine for a moment, when I edit something, it gets broke.

everything is fine console as well as terminal.

bundle exec jekyll server

it works for 1 or 2 minutes then I edit something and it stops working.

when I create a new test jekyll site

junaid@ijunaid8989:~/testpath$ jekyll server
Configuration file: /home/junaid/testpath/_config.yml
            Source: /home/junaid/testpath
       Destination: /home/junaid/testpath/_site
 Incremental build: disabled. Enable with --incremental
       Jekyll Feed: Generating feed for posts
                    done in 0.845 seconds.
jekyll 3.9.1 | Error:  no implicit conversion of Hash into Integer
/home/junaid/.rvm/gems/ruby-3.0.0/gems/pathutil-0.16.2/lib/pathutil.rb:502:in `read': no implicit conversion of Hash into Integer (TypeError)
	from /home/junaid/.rvm/gems/ruby-3.0.0/gems/pathutil-0.16.2/lib/pathutil.rb:502:in `read'

google this:

and it looks like it might be a problem with ruby 3? can you downgrade to 2.7?

This thing, I have already sorted out.

my issue is not that.

I have downgraded the pathutil to be used from a repo that has fixed this.

my issue is: my css works for a moment but then it gets broke after a while on edit.

Would you post a repo link? So we can reproduce.

If you create a new directory and add the Gemfile, config and one page, is that sufficient to cause the bug?


this is my repository and you can test it on either branch


1 Like

I was able to reproduce locally by editing a file and look at the page again.

I did File > Save As… before and after to compare the results.

It turns out that style.css starts like this originally, for 133 lines, exactly as in assets/css/style.css

body {
  font-family: Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace;
  font-size: 14px;
  background: #eee;

.container {
  max-width: 700px;
  padding: 10px;
  margin: auto;
  background: #fff;
  border: 1px solid #ddd;
// ...

And then the bad style page has CSS like this for 2800 lines. It pulls in normalize.css but lacks your custom CSS.

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
// ...

I am figuring out a fix

Oh I see the problem.

Something in Jekyll is creating Normalize CSS as assets/css/style.css in addition to your own file. When you serve your site, then your custom one comes last and “wins”. On a reload, the Normalize CSS one overwrites the style.css file and “wins”.

I don’t know what is generating the normalize CSS file. Maybe one of the many gems in the github pages gem listed here Dependency versions | GitHub Pages

A fix I found locally was to rename the style.css file to styles.css - which any is more inline with convention in CSS.

PR for your convenience Rename CSS file by MichaelCurrin · Pull Request #1 · ijunaid8989/ijunaid8989.github.io · GitHub

PS you can keep pathutil in your Gemfile if it helps you. But you might want to install it globally on your machine if it affects multiple projects.

Also note that GH Pages ignores pathutil and anything in Gemfile - as the versions are locked as per Dependency Versions page linked.

You could delete your Gemfile and GH Pages still builds fine.

the reason for using pathutils is only to make jekyll server works locally.

my only reason is to make things work locally so I can see what I am making.

is it possible that I dont need to have Gemfile? as well as I can run my site locally to see how it looks?

thanks for the PR I will merge it now and get back to you.

1 Like