GitHubページでのURL書き換え

GitHub Pagesが大好きです。 私はできる限りすべてにそれらを使用し、ペストのようなサーバー側のコードを避けようとします。 変更をリポジトリにプッシュすると、フックや追加の手順なしですぐにユーザーに表示されます。 無料でさらに魅力的になります。 私の本を出版するときが来たとき、当然、付随するWebサイトをGitHub Pagesに掲載したかったのです。

しかし、1つの問題がありました。たとえば、美しいURL、たとえばhttp://play.csssecrets.io/pie-animatedが必要でした 。これはdabblet.comのデモにリダイレクトされます。 普通の人なら誰でも弾丸を噛んで、これに何らかの種類のサーバー言語を使用するでしょう。 しかし、私は非常に正常ではありません:)


GitHubはすでにGitHubページに独自の書き換えURLを使用していることが404.htmlます404.htmlをリポジトリに追加すると、存在しないURLがリダイレクトされます。 ちょっと待ってください。美しいURLが機能するように、サーバー上で行っているのと同じことではないでしょうか。 404.html JavaScriptを使用して、サーバー上で行うこととまったく同じことを行うことができます。

だから、私は作成しました：

1. すべてのデモIDと対応するダブレットURLを含むJSONファイル 、
2. 404.html 、リダイレクトまたはエラーを表示
3. URL、JSONファイルを読み取り、ダブレットにリダイレクトするVanilla JSスクリプト 。

ここで、実際には、殻のない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'; } }); })(); 

以上です！ 同じ手法を使用して、GitHub Pagesの他のHTMLページにリダイレクトしたり、1ページのサイトの人道的なURLを使用したりすることができます。 これはハッキングですか？ もちろん。 しかし、いつそれが私たちを止めましたか？ :)