How to Set Base Url for All Pages of My Website

How do I set base URL for all pages of my website?

You can’t make both PHP and client-side assets use the same base URL, unless you use PHP to echo a base URL variable or constant to the page.

The usual approach is to have a bootstrap file that you include on every page, and define your base URL and other site-wide variables in there.

bootstrap.php:

<?php
    define('BASE_URL', 'http://example.com');

index.php:

<?php
    include('bootstrap.php');
?>
<!DOCTYPE html>
<html>
  <head>
    <!-- // -->
    <link rel="stylesheet" href="<?php echo BASE_URL; ?>/css/styles.css" />
  </head>
  <body>
    <!-- // -->
  </body>
</html>

How to configure base URL for a static website

Just move everything into a folder called baseurl.

e.g. folder structure

- root
  - baseurl
    - index.html
    - dist
       - style.css

So, now www.domain.com/baseurl/index.html, which rewrites all requests to /baseurl to wherever this thing is hosted, should work because any requests for assets all start with baseurl and will all be rewritten.

Note

I did come across some weird behaviour though which I didn't understand. Say I had the following folder structure:

- root
  - baseurl
    - folder
       - index.html
       - markdown.md
       - dist
         - style.css

Note that markdown.md is on the same level as index.html and it is an asset required by index.html.

When I go to www.domain.com/baseurl/folder/index.html everything works fine.

However, if I go to www.domain.com/baseurl/folder/index.html then it complains about not being able to find www.domain.com/baseurl/markdown.md. It's looking for the asset in the wrong place.

How to Dynamically change the base url of the stylesheet and js files in the head tag on a static website

with javascript you can grab your current domain with window.location

`${window.location.protocol}//${window.location.hostname}`

so when you dont need to support old Browsers you can do it the easy way

const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
const domain = `${window.location.protocol}//${window.location.hostname}`
stylesheets.forEach((sheet) => {
  const href = sheet.getAttribute('href');
  sheet.setAttribute('href', `${domain}/${href}`);
});

so in your stylesheets you only have to write the path, eg 'assets/css/theme.css'. The Domain will be added via javascript.

if your current domain is not your themeURL then you can setup a config file and grab that information via ajax call from there.

How to show only the base url of the web-application on address bar of browser even if we go to any page?

Have you tried using Server.Transfer("~/MyHiddenPage.aspx")?

By doing a Server.Transfer, you can redirect the user to the new page without affecting the Address Bar.