URL rewriting на Github Pages

Я обожаю Github Pages ^[1]. Я использую их для всего, что только можно и пытаюсь избежать кода на стороне сервера как чумы. Я пушу изменения в репозиторий и они тут же отображаются для пользователей без каких-либо хуков или дополнительных шагов. Бесплатность делает их еще привлекательнее. Когда пришло время публиковать мою книгу ^[2], естественно, я хотела чтобы сопровождающий вебсайт был на Github Pages.

Но была одна проблемка: я хотела красивые урлы, например http://play.csssecrets.io/pie-animated ^[3], которые бы редиректили на демки на dabblet.com ^[4]. Любой нормальный человек бы скорее всего стиснул зубы и использовал какой-нибудь серверный язык для этого. Но я же не совсем нормальная :)

Оказывается, Github уже использует свой собственный URL rewriting для Github Pages ^[5]: если вы добавите 404.html в репозиторий, любой несуществующий URL будет перенаправлен на него. Погодите-ка, а разве не то же самое мы делаем на сервере для того, чтобы красивые урлы заработали? Мы можем сделать ровно то же самое, что мы делаем на сервере с помощью JavaScript в 404.html!

Итак, я создала:

1. JSON файл ^[6] со всеми IDшниками демок и соответствующими dabblet урлами,
2. 404.html ^[7], который или редиректит или показывает ошибку
3. Vanilla JS скрипт ^[8], который читает URL, JSON файл и редиректит на dabblet.

Вот, собственно, JS без шелухи:

(function(){

document.body.className = 'redirecting';

var slug = location.pathname.slice(1);

xhr({
  src: 'secrets.json',
  onsuccess: function () {
    var slugs = JSON.parse(this.responseText);
    
    var hash = slugs[slug];
    
    if (hash) {
      // Redirect
      var url = hash.indexOf('http') == 0? hash : 'http://dabblet.com/gist/' + hash;
      $('section.redirecting > p').innerHTML = 'Redirecting to <a href="' + url + '">' + url + '</a>…';
      location.href = url;
    }
    else {
      document.body.className = 'error not-found';
    }
  },
  onerror: function () {
    document.body.className = 'error json';
  }
});

})();

Это всё! Вы можете использовать этот же приём для того, чтобы редиректить на другие HTML страницы Github Pages, иметь человечные урлы для одностраничного сайта, и многое другое! Это хак? Конечно. Но когда это нас останавливало? :)

Автор: limonte

Источник ^[9]