0

I am developing a website from scratch for fun and I have started to create different pages for it: home (index.html), about me (about.html) etc. Right now I have all html files in the same root folder and use <a href="about.html">About me</a> to link to it. This creates the adress http://127.0.0.1:5500/about.html when I click the link.

Instead I want the adress to be http://127.0.0.1:5500/about when I click the link.

I tried to read up on this and came to a working solution of putting the about.html file in a folder called about, and then renaming the html file to index.html. There are however 2 problems with this approach:

  1. If I get lots of pages on my site I will overflow my root with folders and I won't be able to find anything. It would be nice if I could put them in e.g. a structure root/pages/about/index.html but this creates the wrong slug. And also:
  2. The home page index.html must be in root if I understand correctly. So if I have other pages in separate folders the references (links/scripts etc) in them would have to look different, at least have a "../" before all references. This will surely lead to typos and bugs when I have a large structure and want to change something from my page template that should go in all pages/files.

Are there any other solutions to create the correct "/about" slug instead of "/about.html", or can any of my above concerns with my working solution be adressed?

eligolf
  • 1,682
  • 1
  • 6
  • 22
  • There is a way to achieve this by hiding file extension using / creating '.htaccess' file but I am not sure if that will work on a localhost machine but you can give it a try. See example here https://www.geeksforgeeks.org/how-to-remove-html-extension-from-url-of-a-static-page/ – Vampire Oct 26 '22 at 05:05
  • @Vampire, thanks but this doesn't work on my local machine (Windows). I don't see why this questions is closed based on another question that doesn't answer my specific one. – eligolf Oct 26 '22 at 05:11
  • 1
    There is a reference link above this post, it says already answer. You should probably check that. – Vampire Oct 26 '22 at 05:12
  • @Vampire, that is what I was saying, that question does not answer my question – eligolf Oct 26 '22 at 05:15
  • How *doesn’t* it answer your question? It has an example of the exact use case you’re looking for. Did you [read it](https://stackoverflow.com/a/20563773/476) and understand what it says? – deceze Oct 26 '22 at 05:30
  • What does “local machine” mean? How are you serving your files? – deceze Oct 26 '22 at 05:38
  • @deceze, I use Visual Studio Code with Live Server extension to develop, on my Windows machine. I tried setting up htaccess according to your very good answer, but it does nothing for my URLs. All answers I find on why it won't work has to do with Apache, but I don't have Apache on my computer (what I am aware of after searching). – eligolf Oct 26 '22 at 05:41
  • Then you need to be clear about that *in your question.* The thing you're asking for is the job of the web server. .htaccess works for Apache and some other servers that provide Apache compatibility. If you want to know how to achieve URL rewriting *in Live Server for VSCode*, then ask/search about that specifically. – deceze Oct 26 '22 at 05:45
  • @deceze, well I want it to work when I deploy it to a live server aswell preferably, but maybe that is not possible? How do you do? Do you have Apache on your computer so you can use it all the way through? Or do you skip these things during development and modify on a stage site or similar before going to production? – eligolf Oct 26 '22 at 05:49
  • You need to be aware of the capabilities of your production system, how you'd set it up there, and what the file and code layout needs to be to achieve that. Then think about how to make the same code work locally in the same or some equivalent way. If you're using different servers for production and development, then you need to get your development server to mimic the behaviour of the future production server to the degree that you can use the code on both without changes. – deceze Oct 26 '22 at 05:51
  • If that means you need to run Apache locally, then do so. If you can get your IDE-integrated server to play nicely and that's more convenient than installing Apache, go for it. – deceze Oct 26 '22 at 05:52
  • Personally I'm working with entirely different setups (Python servers and some Javascript frontend mostly), and they run *very differently* during development and in production. However, the code works without changes in both environments, as the code and the deployment processes are specifically tuned to deal with it. – deceze Oct 26 '22 at 05:54
  • @deceze, thanks for elaborating with me, I need to look further into this. I am used of working in Wordpress where everything just magically works and there is usually 1 or 2 ways of doing things. When googling for doing it locally from scratch there are 1000s of ways of doing it and it is sometimes very confusing :) – eligolf Oct 26 '22 at 05:56
  • 1
    Yes, there are an infinite number of ways to serve HTTP requests. That's why I have that long paragraph in my answer there to illustrate the difference between HTTP and files. You'll need to get to know your specific HTTP server to get it to work as you need. – deceze Oct 26 '22 at 05:58

0 Answers0