独自の静的 URL 短縮ツール ⚡️
Github Pages で公開されている静的サイト ジェネレーターは、現在非常に人気があります。しかし、静的ファイルに基づいて URL をリダイレクトできる静的 URL 短縮ツール (ジェネレーターとは言いません) はどうでしょうか?
通常、開発者は最終的に、このための (静的ではなく) リダイレクトを備えたサーバーをセットアップします。そこで URLZap が登場します。これは、ファイルと HTML ウィザードリーを使用して URL を生成し、ユーザーが独自の URL リダイレクトを Github Pages にホストできるようにします。
静的 Web サイトジェネレーターに似ていますが、URL 用です。
URL (短縮されたかどうかに関係なく) を保管してください
Github ページで使用できます
サーバーを実行したり、HTTP 301 リダイレクトを設定したりする必要はありません
プロジェクト例: brunoluiz/_
サーバーなしでこれをどのように行うのかと自問するかもしれません。そうですね、答えは<meta http-equiv="refresh" />
にあります。これは HTTP 301 (リダイレクト) ステータス コードとして機能しますが、クライアント側で実行されます。 w3c の Web サイトにもう少し詳しい説明があります。
必要なパスと URL を含むconfig.yml
に基づいて、 urlzap
メタ リフレッシュ タグを使用するindex.html
ファイルを作成します。 HTTP 301 としては完璧ではありませんが、かなり近いものです。 Hugo など、他の静的 Web サイト ジェネレーターでも同様の戦略が使用されています。
例は次のとおりです。
パス: './links' # デフォルトは './'urls: google: https://google.com ツール:github: https://github.com
マップ内の各キーは{.path param}/{key}
ルートにマップされ、 {value}
にリダイレクトされます。これにより、次のものが生成されます。
- links/ - google/ - index.html (contains redirect) - tools/ - github/ - index.html (contains redirect)
これらのファイルは、サーバーを必要とせずに、たとえば Github Pages にアップロードできます。 brunoluiz/_
では、 config.yml
例を確認し、 gh-pages
ブランチで出力をチェックアウトできます。
詳細についてはリリースセクションを確認してください
brew
使用してインストールします
brew tap brunoluiz/tap brew install urlzap
前述の YAML の例を使用すると、次のようになります。
パス: './links' # デフォルトは './'urls: google: https://google.com ツール:github: https://github.com
urls
: {key}:{redirect URL}
パターンに従う、目的の URL マップ
path
: 出力パス
静的ファイルを生成するには、 urlzap generate
を実行します。
おそらく、最終的にはこのツールと Github Pages を併用することになるでしょう。もしそうなら、それを使用してその利点を享受する最良の方法は、おそらく Github Actions を使用することです。生成と展開を含むインストール方法の詳細については、 brunoluiz/urlzap-github-action
にアクセスしてください。
️ リポジトリで Github Pages を手動で有効にする必要がある場合があります。詳細については、Github Pages ガイドを参照してください。
Github Actions が適していない場合は、代わりに次の手動プロセスを試してください。
Github Pages を有効にし、静的 HTML ファイルが配置されるブランチをセットアップします。詳細については、Github Pages ガイドを参照してください。
config.yml
セットアップする
コミットしてmain
にプッシュする
Github Pages ブランチ (通常はgh-pages
) にチェックアウトし、 git reset --hard origin/main
を実行します (これにより HEAD がmaster
にリセットされます)
urlzap generate
を実行する
コミットしてプッシュする
次のスクリプトは、上記の手順で説明した内容に従います。
#!/bin/bash# 変更を追加、コミット、プッシュしますgit add config.yml git commit -m 'chore: update config.yml'git Push -u Origin main# gh-pages ブランチを maingit checkout gh-pages と同じにする gitリセット --hardorigin/main#ファイルを生成urlzapgenerate#生成されたファイルを追加、コミット、プッシュgit add --all git commit -m '雑務: HTML ファイルを更新'git Push -u Origin gh-pages --force