Jekyll CSS not displaying correctly on Github Pages

I'm having trouble with my code and can't figure out what's going wrong. I can successfully host my website on a local server using Jekyll, but when I try to create a github.io page, I keep getting the following error:

The page build failed with this error message:

The file portfolio/index.html includes a symlink or references a file that doesn't exist in your _includes directory. For more details, check out this link.

In addition, I am having issues linking my CSS with HTML on the Github page. Here is the code from my index.html file. The index.html is located in a folder named portfolio, and inside another folder called "_inlcudes" is where about.html resides.

---
---
<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/assets/css/input.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="functions.js"></script>


</head>
<body>

<div>
{% include header.html %}
</div>

<div>
{%include about.html %}
</div>

<div>
{%include technology.html %}
</div>

<div>
{% include footer.html %}
</div>

<div>
{% include technical-projects.html %}}
</div>



</body>
</html>

Answer №1

When customizing the appearance of your GitHub repository, be sure to choose the desired theme in the "Settings" section.

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 a Sticky Bootstrap Navbar and Seamless Scroll Design - Elevating Padding and Margin-

I am currently working on incorporating a bootstrap sticky navbar with a fixed height of 81px and smooth-scroll behavior into my project. The website's HTML structure includes section tags like <section class="section" id="news" ...

Struggling to save HTML form data to a text file, despite spending the past two hours attempting different methods without success

As mentioned in the title, I am attempting to retrieve the results from the form displayed below: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script> /* Facing difficulties w ...

Is there a way to reposition a button within a div by utilizing only CSS?

I am faced with a challenge involving two buttons within a div and another button outside the div. My goal is to move one of the buttons inside the div outside, positioning it below the button that is already outside the div. Here is a snippet of the code: ...

Creating a wider bottom border than the div width with CSS

Currently, I am customizing a blog theme and I am aiming to add a subtle separation between each individual post using a thin line. The challenge lies in the fact that each post is centered and has a width of 800 pixels. As a result, .post { background: ...

What is the best approach to creating a website for a client who needs to incorporate their own Youtube videos?

Welcome to my first post on this platform! I have a new project where I am creating a website for a client who wants to easily embed their own YouTube links. As a beginner in web development, this is my first paid task and I'm curious about how I can ...

Top method for achieving a smooth transition in a loading CSS3 animation

Having trouble implementing a fade in/fade out effect on a div with a CSS3 based login animation when a function is loaded. I have set up a jsfiddle but still can't get it to work. Any assistance would be greatly appreciated! http://jsfiddle.net/adam ...

How come my button tag doesn't align in the center like the other input tags do?

Are you struggling to create a search box using HTML and CSS with both the text input tag and button input tag centered within it? It seems like the CSS code is not applying properly to the button tag, unlike the other tag. * { margin: 0; padding: ...

Integrating CSS with Material-UI in a React project: A step-by-step guide

I am currently developing a project using React (along with TypeScript) and the Material-UI library. One of my requirements is to implement an animated submit button, while replacing the default one provided by the library. After some research, I came acr ...

"Experience the Dynamic Animation of Bootstrap4 with jQuery in a

I had implemented a code for horizontal page left to right animation which was working perfectly fine. However, it suddenly stopped functioning without any recent changes being made. Now, the Page--3 link is no longer functional and clicking on either the ...

Issue with passing values through radio buttons in a form

Can anyone explain why a small form with a radio button group is not passing any value to a php processing page? I have shared the code on Pastebin at the following link: http://pastebin.com/GT5HDpuc. Any help in identifying the issue would be greatly appr ...

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

Incorporating Ace Editor into a jQuery UI Resizable Element

I am attempting to create a resizable Ace editor by placing it inside a resizable component. Despite my efforts with the jQuery UI Resizable component, I am unable to get the ace editor to display within the resizable component. Code: <!doctype html> ...

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

Stop capturing mouse and keyboard events within a specific div element on all web browsers

I manage a website with forms that have jquery autosave features and are updated using ajax. These forms include various types of input elements such as textboxes, jQuery UI datepickers, and time pickers... <div id="content"> <form id="line1"&g ...

Creating a CSS div that can be resized while maintaining a constant aspect ratio

My goal is to create a resizable SVG with a fixed aspect ratio by placing it inside a <div> that adjusts to the size of the SVG. I'm using the Rust Seed library, so although my code isn't in JavaScript, you should still be able to understan ...

The background is not displaying the complete image

I am facing an issue where I have an image that I want to display completely as a background image. https://i.sstatic.net/A8W71.jpg In the picture below, you can see that the girl and the dog are not fully visible: original image https://i.sstatic.net/Ey ...

a non-breaking space within a hyperlink

While working on the subnavigation of a website, I encountered an issue with the link Suite «Mont Blanc», which was pulled from the backend. The desired format for this link was:       Suite «Mont Blanc» However, t ...

Unable to load JavaScript files on the client side

Currently, I am in the process of learning how to develop an NPM package. Initially, I assumed it would be a simple task: create JS files with object literals, export modules, and then have users require the file and utilize the object like objectname.meth ...

Add the following code snippet below every second set of two paragraphs that are enclosed within h

I am looking to add Advertisements following the 2nd paragraph in every h2 tag. Here is an example of what I want: <h2>Sub title</h2> <p>1st paragraph</p> <p>2nd paragraph</p> <div>INSERTED AD</div> functio ...

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...