Pretty URL for static website

Question

I'm creating a "static" website, and I would like to have url like this : http://www.my-website/my-page-1 or http://www.my-website/my-page-2

I use the jQuery method load() to load the content of my web pages. Here is my index.html :

<body>
    <nav>
        <ul >
            <li id="my-page-1-menu-item" class="menu-item" onclick="changeState('my-page-1')">
                <span><a>Link 1</a></span>
            </li>
            <li id="my-page-2-menu-item" class="menu-item" onclick="changeState('my-page-2')">
                <span><a>Link 2</a></span>
            </li>
        </ul>
    </nav>

    <!-- Content, loaded with $.load() -->
    <div id="content"></div>
</body>

I know how to change my url without reloading the page, using the history API

Here is my javascript :

function changeState(url) {
    window.history.pushState(url, 'Title', url);
    loadStateData(url);
}

function loadStateData(state) {
    var content = '#content';
    $(content).load( 'views/' + state + '.html');

    // Manage menu style
    $('.menu-item').removeClass('active');
    $('#' + state + '-menu-item').addClass('active');
}

With this code I'm able to reach http://www.my-website/my-page-2 by clicking on Link 2, but if I refresh my webpage or if I type http://www.my-website/my-page-2 directly in the browser address bar, I got a 404 error.

I'm not very comfortable with .htaccess URL rewritting but I think it should solve my problem.

And I don't want to use AngularJS, or other framework like that (except if its a really lightweight framework)

You have to add an event handler to the onload event that will check the url and trigger changeState if the url contains a page you have. Then go into the settings of the webserver that serves the 'main page' and have all traffic to 'http://www.my-website/' be rerouted to this main page, so whatever the page after this url is, it'll go to the 'main page' and trigger the event that checks if changeState has to be called. Alternatively use the hash fragment instead of a full url, then you don't have to edit any server settings, although this is 'less pretty'. — Shilly, Jul 05 '16 at 14:07

score 2 · Answer 1 · edited May 23 '17 at 12:32

You need to ensure that when you use JavaScript to:

Modify the DOM of the current page so it is effectively a different page
Change the URL to identify the different page

…that you also make sure that the server can generate that page itself as well.

That way if the JavaScript fails for any reason then everything will still work. This is a basic principle that best practise is to follow.

This will probably involve duplicating your logic server side, and that will probably be a lot of work. Robustness + client side performance hacks do not work together cheaply. Consider isomorphic JS and taking page snapshots with a headless browser as techniqes to speed this up.

I'm not very comfortable with .htaccess URL rewritting but I think it should solve my problem.

It certainly won't solve it well. You could use it to divert every request back to your homepage (so you have duplicate content on every URL) and then use client side JS to read location and work out what content to load but then you might as well use hashbangs since you'll have thrown out every advantage of using pushState but added duplicate content URLs to your site (and invested a pile of work into creating those duplicate content URLs).

I understand your approach for JavaScript, but even if I don't use javascript to load my content, or to manage my URL, my application won't fully works. I don't have time to setup gracefull degradation on every feature. I will stay with duplicated code and .html URL for tyhis time. Thanks — Tako, Jul 05 '16 at 15:30
@Tako — Better to use hashbangs than hacking around with pushState and duplicate URLs. They are simpler to implement and don't give you duplicate content issues. — Quentin, Jul 05 '16 at 15:39

score 0 · Answer 2 · answered Jul 05 '16 at 14:09

Doing that without any server-side rewrites sounds impossible. When you refresh the page, HTTP server needs to give you contents of proper file, based on URL.

But.. if you really want to make URL rewriting client side you can make one, universal rewrite as it is often done in case of PHP-based websites that do rewriting internally (not by .htaccess or nginx rules, but using PHP script). When there's no such file like "/my-page-2" on webserver, just redirect client to /index.html?url=/my-page-2 and dispatch to proper subpage using JavaScript.

Pretty URL for static website

2 Answers2