Issues with Jekyll incorrectly setting the CSS MIME type

My experience with Jekyll on Ubuntu Linux has revealed an issue where the correct mime type is not being added to a .css file in the _site/css/ directory. This problem came to light when uploading the site to an AWS S3 bucket, resulting in errors and rendering issues.

Here are the steps I've taken:

  1. Initialized a new Jekyll site using jekyll new s3upload
  2. Built the site with jekyll build
  3. Served the site using jekyll serve

The site serves well and renders correctly in the browser. However, the newly created file, main.css in the _site/css directory, is labeled with a mime type of text/plain. When uploaded to an Amazon Web Services bucket for serving, it fails because the correct mime type should be text/css.

Is this a bug within Jekyll? How can I address this issue so that new .css files are created with the appropriate text/css mime type?

I am relatively new to this.

cssamazon-web-servicesjekyllmime

Answer №1

Jekyll puts no emphasis on mime types; instead, that's the server's responsibility.

Upon running jekyll serve and opening the page in your preferred browser, accessing f12 -> network, reveals that your css is being served as text/css by the WEBrick web server.

In your file explorer, viewing file->properties shows that your css has a mime type of text/plain from the operating system's perspective. However, this does not affect how the file is served.

You can attempt to:

  • Open /etc/mime.types
  • Find the line: text/css css
  • If it's not there, add it.
  • Perform a jekyll build and then reload to an AWS bucket.

If AWS continues to serve your css as text/plain, the issue lies with AWS and you may need to research about AWS bucket mimetype problem, refer to Amazon S3 is not serving files correctly

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

Enhance your website with footer animations using jQuery!

I am implementing a sticky footer on my website to keep the footer at the bottom using CSS. I want the footer to initially be collapsed and expand when the user clicks on a button, swapping the "expand" link with a different container div inside the footer ...

jqueryhtmlcssfootersticky-footer

CSS ISSUE: Issue with hidden overflow causing white space next to border in nested divs

When working with a div inside another div and setting overflow to hidden, you may notice a whitespace issue around the border when zooming in and out on Chrome. Firefox handles this situation better, showing white space only in the corners of the border. ...

htmlcssgoogle-chromefrontendoverflow

Ways to improve the transition of a <video> background using CSS

My webpage features a unique 10-second video wallpaper achieved using only pure CSS. Below is the code I used: <style> video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; he ...

csshtmlhtml5-video

unusual occurrences with CSS and JavaScript when hovering over TEXTAREA or A elements

Lately, I've been facing an unusual issue in my web application (php) that was fine just a month ago. Upon hovering over a specific < TEXTAREA > or two buttons (add, exit) within a DIV, the background color of the DIV fills up, rendering the IN ...

javascripthtmlcss

When clicking, populate the content of another div in a vertical top-to-bottom fashion

I am in the process of creating a functionality where clicking on one element will fill another element's content from bottom to top. Although I have managed to make it work on hover, the same functionality is not triggered when clicking on the eleme ...

jquerycss

What causes an increase in td width when using CSS background-color?

Here is an example of HTML structure: <table class="barby-barcode"> <tbody> <tr class="barby-row"> <td class="barby-cell on"></td> <td class="barby-cell on"></td> <td class="barby-cell o ...

htmlcss

Create a dynamic table with varying colored cells using HTML and CSS

I currently have a table setup where a td element can be styled with a single background color: https://i.sstatic.net/DoP4f.png This is achieved using the following code: <td colspan="1" style="background: cyan; position:relative;" ...

htmlcsshtml-table

Having difficulty selecting a nested ul with CSS, I'm currently exploring different options

For the website I am working on, I have a cms system that is responsible for rendering menus. My current task involves selecting the children of the parent menu items, and here is how the code is being generated: <div class="menu"> <ul> ...

javascriptjqueryhtmlcsscss-selectors

Troubles with Sizing in Twitter Bootstrap Modal

One issue I have encountered with my application is the varying widths of modals. Setting the width inline works well, but when the window is compressed it can cause part of the modal to be off screen, rendering it useless at smaller resolutions such as th ...

csstwitter-bootstrapmodal-dialog

Different option to employ instead of utilizing the <br> tag on multiple lines

Struggling with the tedious task of copying and pasting code snippets on my websites. Is there a simpler way to achieve this? I am looking for an option to easily insert <br> at the end of each line. Currently, I am manually adding <br> at th ...

phphtmlcss

What methods can be employed to prevent a custom CSS from overriding my personal styles?

Issue I've created a website with unique styles that I really like. However, I want to enhance its functionality by incorporating a custom dialog box from the BootBox library. The problem is that the extensive style sheet that comes with BootBox com ...

htmlcsstwitter-bootstrapbootbox

Tips for transforming a JSON object (originated from jquery-css-parser) into properly formatted CSS code

Currently, we are utilizing a jQuery plugin in our project to convert CSS to a JSON object. The plugin can be found at the following link: Now, we have a requirement to convert the JSON object back to CSS in string format. Unfortunately, the plugin we ar ...

javascriptjquerycssjsonparsing

Conceal the menu by pressing the button

I'm having trouble with a bootstrap drop-down feature. When the button is clicked, the menu appears, but clicking the button again doesn't hide the menu as intended. I've attempted a method that didn't work and I believe there must be a ...

htmljquerycssbootstrap-4

How to center text in MatButtonToggle within angular material?

I'm facing a challenge in customizing the MatButtonToggle as I am having issues with centering the label: https://i.sstatic.net/LVzrm.png Here is the template for reference: <mat-button-toggle-group name="condition" aria-label="Condition"> ...

cssangulartypescriptsassangular-material

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably d ...

htmlcssresponsive-designmedia-queries

iOS displaying CSS Transform issue exclusively

Creating a website that is fully mobile responsive is my goal. However, after designing the header, I realized that it wasn't displaying correctly on IOS devices like my iPad. The "Transform: translateX(-100%);" statement was functional on Android pho ...

javascripthtmlioscsstransform

PHP Table Columns Explained

My PHP script is used to display a MySQL table, and I am aware that adding styling to it is possible. However, I have encountered an issue where the add button unexpectedly adds another column as shown in the image below: https://i.sstatic.net/qBKiG.png I ...

phphtmlmysqlcss

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

javascripthtmlcsssvg

scrollable list using bootstrap

<div class="panel panel-primary" id="result_panel"> <div class="panel-heading"><h3 class="panel-title">List of Results</h3> </div> <div class="panel-body"> <ul class="list-group"> &l ...

csstwitter-bootstrap

Creating a unique store previewer customization

Are there any JavaScript libraries available to simulate the CSS image-mask property since it is not widely supported by browsers? I've been experimenting with creating a white image containing transparent areas in the shape of the design elements I w ...

cssimagehtml