Issue with Jekyll (seems like the stylesheet is missing?)

While attempting to fork a Jekyll theme and build the Github Page, I noticed that the generated page looks different

https://i.sstatic.net/Emq3p.jpg

from the original one

https://i.sstatic.net/RX90P.jpg

I followed the instructions to change the baseurl in _config.yml, without making any other modifications. The only alteration was made in the gh-pages branch, which was used as the source for building the Github Page. I attempted forking repositories that were already forks of the original repository, but encountered the same issue. It seemed like there was a problem with including a specific stylesheet, so I relocated the file _includes/css/style.css to a different directory, resulting in slight improvement although the color values from _config.yml and images in assets were still missing.

Here's how I implemented it:

Original Theme Details:

Changes made to _config.yml:

    - url: "http://st4ple.github.io"
    + url: "http://cerbospace.github.io"

Edit: changed the repo name. Also removed the collaborators-only edit rights for now, just in case.

To troubleshoot, I tried building the site locally, as some suggestions mentioned it worked fine offline but not on Github Pages. Unfortunately, I experienced the same outcome.

Answer №1

While examining the contents of the _site folder from my local build, I came across a curious discovery - Jekyll was swapping out my stylesheet located at _includes/css/style.css with a completely different one. The origins of this mysterious new style.css remain unknown to me, but I managed to find a workaround by utilizing a customized style.scss file and including my own stylesheet.

Answer №2

To solve this issue, you have a couple of options: You can refer to this resource for guidance on using relative paths in Jekyll, or you can include the github-metadata like so:

<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for Connecting CSS, JavaScript, and Image Files in Django

Being new to Django 1.9.5 and working on Windows, I am facing difficulty in linking my CSS, images, and JS files to the Django template. This is how my project structure looks like: Here is my settings page: BASE_DIR = os.path.dirname(os.path.dirn ...

Incorporating smooth sliding animation to ng-repeat elements

Our team has developed a custom widget in ServiceNow that displays a row of icons and reveals or hides additional details in a div when icons are clicked. Below is the structure of our html and client controller: <div class="icons"> <ul class=" ...

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

Importing styles from an external URL using Angular-cli

How can I load CSS styles from an external URL? For instance, my domain is domain.eu but my site is located at sub.domain.eu. I want to use styles that are stored on the main domain (common for all sites). The example below does not work: "styles&qu ...

Page resizing is disabled in Chrome after an Ajax load

I've been tirelessly working on the CSS for a website I'm building, and I've encountered a strange issue that only seems to affect Chrome. Firefox and Internet Explorer work perfectly fine. I am using jQuery to load HTML stubs and a signifi ...

Simple Guide to Inserting Items in a Column with Flexbox and Material UI

I've been struggling to position these items on the modal and could use some advice. I'm aiming to include the item counter as text and stars below it, with the unassigned text at the bottom. Despite trying various layouts, I can't seem to g ...

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

Target the CSS element with a specific class only if it is not the first child within its parent

In my coding project, I have created a div.container which contains multiple p elements. Some of these p elements have the class p.special. My goal is to select the p.special elements that are not positioned at the very top of the parent container (i.e., n ...

Combining rows and columns in Flexbox design

https://i.stack.imgur.com/tDLii.png I'm able to easily create this layout using the float property, but I'm having some difficulties achieving the same with flexbox. CSS: .a { background: red; float: left; width: 30%; ...

What is the most effective way to transfer information from one page to another in a PhoneGap application?

I attempted to transfer data from one HTML page to another using two different methods: function reply_click(clicked_id) { window.location = "newsList.html?Title="+clicked_id; } And I also tried: function reply_click(clicked_id) { window.l ...

Is it possible to include custom icons and text within a column layout when the flex direction is set to row

Trying to create a single line clickable section with a play button, text, and YouTube video thumbnail. It's not rendering correctly even though the container is set as flex with row direction. Custom play button and properly sized thumbnail are in p ...

Issues with @font-face and @font-family not being recognized

I've been attempting to achieve a simple task: adding 3 different fonts to an HTML page. After browsing through numerous examples, I still haven't found a solution to my issue. It's possible that I may be missing something in how it's ...

What is the best technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...

I want to update the toggle switches within the GridToolbarColumnsButton component from MUI's DataGrid to checkboxes

Currently, I am developing a website where one of the pages has tabular data fetched from the backend. To filter this table, I utilized Mui filters from datagrid({...data}components={{ toolbar: CustomToolbar }}). Among these filters is a GridToolbarColumns ...

Maximizing Efficiency: Utilizing a Single Panel across Multiple HTML Files with jQueryMobile

Can a panel defined in index.html be used on another page, such as results.html? Or do I have to define the panel on every page and duplicate the HTML code on each page? Because I want the panel to be consistent across all pages. This is the panel in my ...

Enhance your Bootstrap navigation menu with eye-catching hover effects

Hey everyone, I'm a beginner in web development and I'm attempting to incorporate a hover effect into my navigation menu. I want it to look like the first example in this link: https://codepen.io/Calloumi/pen/vndlH I've tried to replicate t ...

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

Determining the condition of the menu: understanding whether it is open or closed

I'm diving into the world of jQuery and JavaScript, trying to grasp the ins and outs of the mmenu API. Despite my efforts to understand the libraries, the JavaScript code remains a mystery to me. Following the tutorial provided on , I successfully cr ...

Adjust text size automatically to fit into a container with a fixed size

Looking to dynamically adjust the font size of user-entered text to fit within a fixed-size div. The goal is to have the text fill the box as much as possible. For example, if the div is 400px x 300px and the user enters "ABC", the font will be very large ...

What steps should I take to ensure my Bootstrap CSS3 code is error-free and W3C validated?

My customer is requesting that I validate the HTML5 & CSS3 code using W3. I plan on incorporating Bootstrap 3.3.4 into the project, but after including it and checking at , I discovered 32 errors and 142 warnings. The W3C CSS Validator results for (C ...