Troubleshooting: main.css works locally, NOT on GITHUBpages

Question

Why is my main.css not updated ?

So far I have changed main.css to style.css following this advice:

Jekyll site works locally but not on Github Pages

As you can see I kept style.css in /css/ directory, as guidelines from different sources conflict each other I put it back to default.

https://github.com/bomengeduld/boilerplate/blob/master/css/style.css

I have tried running from master branch & gh-pages branch. Maybe I made a mistake here? Since it's now running from master, as I am building from master.

As an alternative I tryed using LIQUID without significant result

<link rel="stylesheet" href="{{ site.baseurl }}/style.css">

I put it back to default, but moved custom css above bootstrap core css

        <head>

            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="description" content="{{ site.description }}">
            <meta name="author" content="{{ site.author }}">

            <!-- Custom CSS -->
                <link rel="stylesheet" type="text/css" href="/css/style.css"> 
            <!-- Bootstrap Core CSS -->
                <link href="css/bootstrap.min.css" rel="stylesheet">
       </head>

Thanks to all the advice here on stackoverflow I have updated my config.yml file to the needs of GITHUBpages

url: https://bomengeduld.github.io/boilerplate/
baseurl: /boilerplate/

port: 4000

markdown: kramdown

permalink: pretty

I have followed several guidelines on stackoverflow without any succes. As I am new to developing, I might miss something very simple.

EDIT 1:

I have added the css to a <style> tag in <head>. It solved everything except for my background image. Yet, this is not a long term solution.

link to url: https://bomengeduld.github.io/boilerplate/ – Gino Jan Ludikhuyze May 17 '17 at 20:15 — Gino Jan Ludikhuyze, May 17 '17 at 20:15

score 0 · Accepted Answer · answered May 30 '17 at 20:29

I restarted this project.

I started a new repo, cloned it and downloaded html5 boilerplate & updating with bootstrap to the rootfile.

Then I copied most of existing html code from 1st project into the new project.

Because I needed a scrolling navbar. I restarted my project for the second time from https://github.com/BlackrockDigital/startbootstrap-scrolling-nav

I cloned it, and copied all my existing code.

In the meanwhile I was commiting every little step I took, to be sure the results on jekyll, where the same as on github-pages.

So far it worked like a charm.

There are some issues when adding images for instance. On jekyll localhost, it accepts any type of file.

On github pages You sometimes have to change png to jpg. Also never use an underscore _ in the title of your files like photo_01.png

If you put a img tag, do it like this

<img class="img-responsive" alt="logo" src="img/mmlogo2.png">

To make some picture appear on mobile device I had to use <style> in <head> Because it just wouldnt work on CSS

Troubleshooting: main.css works locally, NOT on GITHUBpages

1 Answers1