Hey there, I've been working on coding a website and trying to publish it using Github. However, every time I deploy it, the page shows up blank. Here is the link to my repository: https://github.com/bbravoo/bbravoo.github.io-. Any help would be greatly appreciated!
I have already checked the pages tab and attempted to change the branch it deploys from without success.
To fix the issue, simply delete your index.html file and rename your site.html to index.html.
Upon reviewing your repository, it appears that you have two distinct html files. It seems like you want to deploy the contents of site.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
// Content here
</body>
The other file seems to be an empty document only containing the head section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
</head>
When examining your GitHub pages deployment source code, it is evident that what is being deployed is an empty index.html:
https://i.sstatic.net/hCQvN.png
In essence, your deployment process is working correctly, but the content being shown may not be as expected. To resolve this, consider merging the HTML files or removing the empty one.
Once the server is deployed, it automatically serves you the index.html page as soon as you visit the website link.
The index.html file does not contain any content within the body, which results in displaying an empty page. However, if you access:
You will be able to see the site.html page that contains the necessary code.
I suggest delving into how the web operates and how servers interact with clients, as it can prove to be very beneficial for your understanding.
My goal is to create two divs that each take up 6 columns with a space of 1px between them. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoA ...
There seems to be an issue with the code provided. The CSS for the menu bar is not functioning properly with the HTML. <!DOCTYPE html> <html> <body class="news"> <head> <style type="text/css">body { margin: 0; paddi ...
My website uses Bootstrap and a KendoUI data grid where each row has a button like this... <button type="button" id="requestbtn1" class="btn btn-success">Request</button> I've written some JavaScript to handle the click events of these b ...
I have a website on GitHub Pages that uses Bootstrap, but I'm having issues with the drop-down menu in the navbar. Sometimes it works and sometimes it doesn't. I am using $("#nav").load("url"); to load the navbar so that I can make changes and ha ...
I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...
I'm currently developing a compact calculator application using Vue 3 and implementing some custom CSS. For the most part, everything seems to be functioning correctly, except for when the results are long numbers that extend beyond the display limit ...
I need to transfer the boolean value retrieved from myForm.valid to my Angular 2 component. This involves retrieving it in the component using two-way binding since it is a template-driven form. The current code provided does not seem to be working for t ...
There is a specific issue I am facing with text selection on the page. When I apply this code snippet, the selected text does not get de-selected even after clicking .container: jQuery('.container').on("mousedown", function(){ jQuery('. ...
Can FullCalendar create a calendar with alternating colors for odd and even weeks? Visit the FullCalendar demos here For example, see image below: https://i.sstatic.net/D5qza.png ...
My card component using material UI has a hover effect with a transforming animation, as well as a shadow that should appear on the card. However, I am facing an issue where the box-shadow appears on the box before the transformation, creating white space ...
Within an HTML snippet, I currently have a <title> tag that I need to change on a monthly basis when generating reports. While I can manually update it each month, I am looking for a way to automate this process so the title reflects the relevant rep ...
Hello everyone! I've been diving into learning JavaScript and recently attempted to create a function that randomly selects an image from an array and displays it on the browser. Unfortunately, despite my efforts, all I see are broken link images. Her ...
I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me. $(document).ready(function() { var maxField = 10; //Limitati ...
I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...
When attempting to upload files from a form page, only one file shows up on the database online and in the folder. Here is the code from the form page: <form method="post" action="post_data.php" enctype="multipart/form-data"> <table align=" ...
Recently, I discovered the power of utilizing content_for and found it to be incredibly useful. It may seem like I am making things more complicated than necessary, but my objective is: To create a custom header for the products#index page. As of now, I ...
Experimenting with a new idea. I hope the solution is straightforward; I just can't seem to figure it out. Imagine I have an array like this: var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]; My goal is to rearrange the data so that it looks like t ...
Here is the javascript code snippet I am using: document.getElementById('district').value = dist.long_name "this line is passing the value" document.getElementById('city').value = route.long_name "this doesn&apos ...
Within a container with two styles, the initial nested div <div class="datacheck"> <div class="classic_div_data customdataid_305"> some values are included here </div> <div class="optiondiv"> </div> </div& ...
I'm looking to create a sidebar using 'vue-bootstrap' that can be hidden when clicked, but I only want to hide 80% of the width of the sidebar. How can I achieve this effect of partially hiding the sidebar? <b-button v-b-toggle.sidebar-1 ...