How to have custom URL and remove .html extension without Wordpress?

I have made a site which consist of around 10 pages all ending with .html. ( home.html, about.html).

I wish to remove .html extension and change my URLs for example rajat.com/about.html to rajat.com/buy-products-from-me in all my webpages in an easier and less time consuming way as I have already linked my pages

Is there a way to solve this?

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown 路 Publish articles on custom domain 路 Gain readership on day zero 路 Automatic GitHub backup and more

davElsanto's photo

You can use angular route(ngRoute). So all your links has a route to the file you want.

Example: Using ionic 1

.state('app.tabs.myorders', {
        url: '/myorders',
        views: {
            'tab-myorders': {
                templateUrl: 'templates/myorders.html'
            }
        }
    })

.state('myorder', {
    url: '/myorders/:myorderId',
    templateUrl: 'templates/myorder.html',
    })

And when you access to "/myorders" you get all into the template(all the orders), in this case it's "templates/myorders.html". In these template(myorders.html) there are links to any order like this "href="/myorders/56", where "56 is :myorderId"(order id). So, if you clicked on any link, it access to the state myorder.

  • Sorry for my english :)

More info: https://docs.angularjs.org/api/ngRoute#!

Mario Giambanco's photo

As htaccess was mentioned as a tag, it would be assumed your using Apache

  1. create a .htaccess file if it doesn't already exist (it might be / probably is hidden)
  2. paste this into it

     Options +FollowSymLinks
     RewriteEngine On
     RewriteCond %{REQUEST_FILENAME} -f                [OR]
     RewriteCond %{REQUEST_FILENAME} -d
     RewriteRule .  -                                  [L]
     RewriteRule ^$ index.php                          [QSA,L]
     RewriteRule ^(.*)$ index.php?id=$1
    

so given mysite.com/about - about becomes the value of $_GET['id'] in PHP

In index.php do as you please with that variable - include($_GET['id']); or run a case on it or ...

"Roughly" how Wordpress works. index.php responds to everything; all files / pages / blog posts are handled by index.php and it's functions / classes.

Any href's link to it as above - "/about" or "/contact" or "/products"

Atul Sharma's photo

Just rename them from .html to .php like home.html -> home.php and now when you host them on server .. directly accessing them will work.

like yousite.com/home

this will call home.php

Mev-Rael's photo

You have 3 options:

  1. create a directory per each page and name a directory you would like to see it in the URL and put this page's file into it, and name it index.html, for example about.html > buy-products-from-me/index.html
  2. Install and use any CMS.
  3. Today there are many Online website builders available such as Froont, WiX

However, I would recommend to learn basics of Web development and some HTTP preprocessor such as PHP, also CLI, unix, nginx and Git, and you will be able to create own website and even easily deploy it with git. You may host private repositories on GitLab or for a small fee - on GitHub.

Ankit Singhaniya's photo

Can you give more details like, what framework you are using and where are you hosting this site?

Rajat's photo

Yes sure, It is a simple (HTML,CSS,JS) website and I am hosting it using GoDaddy

Asma Moosagie's photo

A tutorial on Youtube by mmtuts explain it very well using an .htaccess file.

youtube.com/watch?v=zJxCq6D14eM

youtube.com/watch?v=-6LyG9I-FPc