URL rewriting на Github Pages

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

Але була одна проблемка: я хотіла красиві урли, наприклад http://play.csssecrets.io/pie-animated, які б редиректили на демки на dabblet.com. Будь-яка нормальна людина б швидше за все зціпив зуби і використовував який-небудь серверний мова для цього. Але я ж не зовсім нормальна :)



Виявляється, Github вже використовує свій власний URL rewriting для Github Pages: якщо ви додасте
404.html
в репозиторій, будь неіснуючий URL буде перенаправлено на нього. Стривайте-но, а хіба не те ж саме ми робимо на сервері для того, щоб гарні урли заробили? Ми можемо зробити те ж саме, що ми робимо на сервері за допомогою JavaScript
404.html
!

Отже, я створила:
  1. JSON файл з усіма IDшниками демок і відповідними dabblet урлами,
  2. 404.html, який або редиректит або показує помилку
  3. Vanilla JS скрипт, який читає 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, мати людяні урли для односторінкового сайту, і багато іншого! Це хак? Звичайно. Але коли це зупиняло? :)
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.