Eliminating the .html suffix from GitHub Pages website addresses

I am trying to remove the .html extension from the URLs of my static website hosted on GitHub Pages. While I know that Jekyll has a Permalink feature for this purpose, I am not using Jekyll and only working with pure HTML & CSS. I attempted to create an .htaccess file in the root folder, but unfortunately, it did not work on GitHub Pages. My website consists of three HTML pages: index.html, projects.html, and about-me.html. When linking to index.html, I can use 

<a href="/"></a>
to omit the .html extension from the URL, but this method is specific to the index page. Is there any alternative way to achieve this for the other HTML pages as well?

https://i.sstatic.net/Ro4Xn.png

htmlcssgithub-pages

Answer №1

It's as simple as removing the .html extension from your links on GitHub Pages.

No need for subdirectories, CNAME, redirects, or any other hacks - it already works seamlessly without extra steps.

For instance, you can use:

instead of:

The file will be displayed the same way. Just update your links and you're good to go.

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

Is there a way to keep Angular from automatically re-sorting my list when I make edits to it?

I have designed a small application with Angular for managing Todolists. Each list contains multiple todos, where each todo has attributes such as name, value1, and value2. To automatically sort each list using Angular, I utilized ng-repeat="todo in selec ...

javascripthtmlangularjsjavascript-databinding

Trouble Updating Selected Element in Android 2.3.x

Our team is currently working on a Web application that uses JavaScript to dynamically create elements. While testing for mobile usability, we have encountered an issue with select element behavior on Android devices running 2.3.x versions. When a user tou ...

androidhtmlselect

Modifying color in CSS for an SVG that is dynamically animated using JSON

I recently obtained an animated hamburger menu icon for free from this particular website. The animation triggers on click and reverses on the second click, functioning smoothly. Now, I am seeking guidance on changing its color using CSS. // JSON var ...

javascripthtmljsonanimationsvg

What is the best way to transfer data from one form to another HTML document?

My code is ... <form name="myForm" action="demo_form.html" onsubmit="return validateForm()" method="GET"> <input type="text" name="StuserID" id="basic" value="" placeholder="userID" /> <input type="submit" value="Login"/&g ...

javascriptphpjqueryhtmlforms

Element overlapping due to CSS float styling

I'm feeling a bit puzzled and would really appreciate some guidance. After reading the MDN article on float, I decided to try out their example by copying and modifying it. To my surprise, the floated element appeared to the left of the next element, ...

css

Items in Bootstrap row are not aligning in the center

Utilizing the Bootstrap 5 row property for responsiveness on my website, I encountered an issue where two divs placed next to each other did not align at the center of the webpage as expected. There was an unusual gap on the right that I couldn't elim ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

I need to construct a table dynamically based on the results returned from SQL. In this scenario, populating the table with the start time, end time, and user is straightforward: var StartTime = document.createElement('td'); var EndTime = docume ...

javascripthtmlangularjs

Repetitive outcomes are observed when iterating through elements with Selenium in Python

I'm currently facing a puzzling issue that has me stumped. My HTML contains a ul list with multiple li items, each of which includes elements I need to extract using Selenium in Python. The structure of the website is as follows: <ul id="results"& ...

pythonhtmlselenium

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Troubleshooting problems with data rendering in jQuery

Currently, my goal is to use JQuery to display a menu of checkboxes based on a specific template in a div. To enhance user experience, I have included a search box that will filter the menu items. However, there is an unusual issue occurring. When the men ...

javascriptjqueryhtml

Load the Google Maps JavaScript file only when it is required

I am working on a page that contains a button to open Google Maps in a modal. Since this function is rarely used by users, I am exploring the possibility of loading the Google Maps library only when it is needed. I would rather have the user wait for the m ...

javascriptjqueryhtmltwitter-bootstrapgoogle-maps

Integrate a feature in Vue-Multipane component for inserting page breaks

Having some issues with the Vue-multipane component in my specific use case and struggling to find a solution. I'm attempting to disable the multipane feature once the screen size is smaller than 768px and switch to displaying full-width rows instead ...

javascriptcssvue.js

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

javascriptjquerycss

Incorporating a touch of dark opacity into an image

Check out the layout of my webpage here: https://i.sstatic.net/Ap4nx.jpg The background image I used is this one: https://i.sstatic.net/dIhLt.png I am trying to achieve a black transparent overlay on the image, similar to this: https://i.sstatic.net/FMdi ...

htmlcssfrontend

Ensure that the height of each card displayed in the owl-carousel is consistent

I'm struggling to maintain consistent height for the cards in my carousel, even when using the h-100 class. Every time I change the content within the p tag, it alters the size of the card. How can I ensure all cards have a fixed height? If you have ...

htmlcss

Obtaining Beverage Overall with Loop

I am currently using a function to calculate the total of each drink, with a total of 5 drinks: var totalEstimate = 0; var locoCost = 0; var blackCost = 0; function calcLoco() { totalEstimate -= locoCost; locoCost = docume ...

javascripthtmlloops

Ways to ensure text fits nicely within a container: HTML & CSS

Below is a code snippet: @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0. ...

javascripthtmljquerycsssass

`Inability of ngmodel to bind integer values on select element`

From the service, I will be receiving an integer as the selected value and need to send it back as an integer. Please refer to the code in this Plnkr link. <!-- Working --> <div ng-init="selectedvalue = '3'"> <select ng-model= ...

javascripthtmlangularjs

What is the reason behind the select tag requiring at least one child for it to be considered XHTML 1.0 compliant?

Why is it necessary for the select tag to have at least one child in order to be considered valid XHTML 1.0? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht ...

asp.nethtmlxhtmlwebformsw3c