🛀🏿 ✋🏻 🚵🏽 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を使用して、サーバー上で行うこととまったく同じことを行うことができます。

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

すべてのデモIDと対応するダブレットURLを含むJSONファイル、
404.html 、リダイレクトまたはエラーを表示
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を使用したりすることができます。これはハッキングですか？もちろん。しかし、いつそれが私たちを止めましたか？ :)

GitHubページでのURL書き換え

More articles: