On any edit, CSS stops working

ijunaidfarooq · June 20, 2021, 9:34am

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/

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

this is how folder structure looks

my Gemfile

source 'https://rubygems.org'

group :jekyll_plugins do
  gem 'github-pages'
end


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

and this is my default.html

<!DOCTYPE html>
<html lang="en">
<head>
  <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">

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

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

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

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

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

MichaelCurrin · June 20, 2021, 3:57pm

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

ckruse · June 20, 2021, 3:59pm

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

Clue came from looking at the server address:

LiveReload address: http://127.0.0.1:35729
    Server address: http://127.0.0.1:4444//  👈Note extra slash
  Server running... press ctrl-c to stop.

MichaelCurrin · June 20, 2021, 4:00pm

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

ijunaidfarooq · June 20, 2021, 4:03pm

ijunaidfarooq · June 20, 2021, 4:04pm

removed but still no effect of that, its still broken

MichaelCurrin · June 20, 2021, 4:06pm

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 ...

So

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.

github.com

MichaelCurrin/jekyll-blog-demo/blob/v0.8.0/Makefile#L4

    
      
          default: install
          
          
h help:
          	@grep '^[a-z]' Makefile
          
          
install:
          	bundle config set --local path vendor/bundle
          	bundle install
          
          
upgrade:
          	bundle update
          
          
s serve:
          	bundle exec jekyll serve --trace --livereload

ijunaidfarooq · June 20, 2021, 4:08pm

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.

MichaelCurrin · June 20, 2021, 4:08pm

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

ijunaidfarooq · June 20, 2021, 4:08pm

proper site looks like this.

ijunaidfarooq · June 20, 2021, 5:07pm

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
      Generating... 
       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'

rdyar · June 20, 2021, 10:44pm

google this:

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

ijunaidfarooq · June 21, 2021, 3:18am

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.

MichaelCurrin · June 21, 2021, 7:14am

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?

ijunaidfarooq · June 21, 2021, 8:01am

sure

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

ijunaidfarooq
bug_branch.

MichaelCurrin · June 21, 2021, 9:18am

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

MichaelCurrin · June 21, 2021, 9:33am

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

MichaelCurrin · June 21, 2021, 10:13am

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.

ijunaidfarooq · June 21, 2021, 11:11am

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?

ijunaidfarooq · June 21, 2021, 11:12am

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

Topic		Replies	Views
Jekyll locally won't load css and compilation on Github is weird	10	2710	November 19, 2021
Jekyll website behaves like there is no css file Help	4	7344	April 10, 2019
SASS & Themes and local vs Github Help	0	542	August 18, 2019
Styles.sass not compiling in jekyll on gh-pages Help	1	1639	October 10, 2018
Jekyll Tutorial Sass not working Help	6	910	December 5, 2019

On any edit, CSS stops working

Related Topics