URL rewriting на GitHub Pages

Original author: Lea Verou
  • Translation
Я обожаю 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, иметь человечные урлы для одностраничного сайта, и многое другое! Это хак? Конечно. Но когда это нас останавливало? :)

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 13

  • UFO just landed and posted this here
      +2
      Упс :) Поправил, спасибо.
      +25
      Ух ты, статья про location.href на главной Хабра.
        +7
        От красивого URL, который просто редиректит на некрасивый, толку мало. Некрасивый тут явно больше информации сообщает (как минимум, видно, на какой домен уйдет запрос). Загрузка лишней страницы и ошибка 404 в промежутке не кажутся разумной платой за эту фичу.

        А предложение сделать одностраничный сайт, который будет загружаться со статусом 404 — это оригинально, но делать такое я никому не посоветовал бы.
          –1

          Можно сделать с 404 перенаправление на index.htm который покажет нужную страницу и нужный url методом history.replaceState.


          А внешние сайты можно запихнуть во frameset если нет запрета на отображение во фрейме.


            <frameset rows="*">
              <frame frameborder=0 src="http://dabblet.com/gist/722909b9808c14eb7300" scrolling="auto" noresize>
            </frameset>
            +5
            Можно и гланды через анус удалять…
            Но не нужно

            Так что не более чем забавное «открытие» для конкретного автора.
          +4
          Сервер вернет код 404, выполнит клиентский код и произведет переадресацию на другой сайт. Почему мне кажется, что это не нормально?

          Уверен, что есть более красивый способ для gh-pages. Хотя, даже в геме jekyll-redirect-from используют похожий способ… грустно.
            +1
            Это ненормально, об этом говорит сама автор оригинала и поэтому статья находится в хабе «Ненормальное программирование» :)

            Надеемся, что ребята из GitHub обратят внимание на этот пробел в функционале и восполнят его.
            +3
            На всякий случай замечу, что Github Pages по умолчанию показывает файл index.html

            То есть, по адресу http://graphics2d.js.org/ (да, этот сайт на gh pages) на самом деле показывается http://graphics2d.js.org/index.html, и так не только с главной: http://graphics2d.js.org/examples/ на самом деле http://graphics2d.js.org/examples/index.html.

            То есть, в принципе делать красивые урлы достаточно легко, и незачем для этого извращаться с 404. Другой вопрос, если хочется хранить URL-map в JSON, что и реализовано в посте.
              +1

              Смысл таких URL — в том, чтобы с сервера отдавалась нужная страница. Если же роутинг работает только клиентский — надо не извращаться с 404, а использовать адреса старого формата (http://example.com/#!/path)

                0

                На gh-pages можно включить jekyll-redirect-from, который умеет redirect_from для перенаправления на текущую страницу(работает только в пределах сайта) и redirect_to для перенаправления с текущей страницы на любой другой сайт.

                  0
                  Не совсем понимаю смысл использовать github-pages, вместо обычного хостинга, учитывая, что цены на хостинг очень низкие, а обилие различных CMS позволяет вообще не заниматься написанием серверного кода. Оно может и оправдано, когда не приходится ходить по граблям и создавать велосипеды, но учитывая предыдущие комментарии, автор оригинальной статьи имеет проблемы с выбором инструментов.
                    +3
                    Не совсем понимаю смысл использовать github-pages

                    • бесплатно
                    • надёжно, отказоустойчивость из коробки
                    • для сайта-визитки или standalone блога предоставляемой функциональности хватает на 100%

                    Вопрос даже не в цене на хостинг, а в том, что он всё равно требует вложения времени и сил: регулярно оплачивать, следить, чтобы не кончились деньги на балансе, мониторить, чтобы починить когда оно ляжет и т. д.

                  Only users with full accounts can post comments. Log in, please.