GitHub Pages がすごい便利【#np2020】

github-pages-examples.png



そういうわけで、サイトのリニューアルを進めています。


サイトリニューアルの話がなんだか大掛かりになってきてる | mutter

まだサーバは契約していないし、ローカルで動かしているだけですが、管理しているドメイン・サイトの中で今はもう稼働していない、稼働していてもほとんどメンテナンスしていないサイトから学習も兼ねて順次リニューアル作業をしています。バージョン管理をsvnからgitへ、jQueryを止めてBootstrap4とVue.jsを採用してBootstrap-vueで構築……という時点で、HTML自体ほぼ書き直しなわけですが、今のところまだ複雑な処理が必要なサイト・サービスには手を付けていないので、業務で必要な知識の学習も兼ねて楽しくやってます。全部終わるのはいつになることやら。

で、出来上がったサイトの確認はローカルで行っているわけですが、実際にオンラインに置いてみたらどう動くかなというのは気になるところで、でも現在のサーバに上げるのは面倒が大きいしと思っていたんですが、コードをGitHubで管理しているならそこからそのままGitHub Pagesにデプロイしたらいいじゃんということで、やってみました。



実際の出来上がりはこんな感じ。

https://nobodyplace.github.io/69tracks.com/


Bootstrap4で書いてみましたよ、以上の何も無い1ページだけのサイトですが、これ、masterブランチにpushすると自動的に生成されるんですよね。もちろんスマホでも確認出来ます。スマホでの動作確認はChromeのデベロッパーツールを使えば簡単にできますが、どうしても実機とは違っている部分もあるし、表示速度はわからない部分もあるので、そのあたりの確認・調整のために重宝しています。privateリポジトリから利用するにはちょっと工夫が必要ですが(今回はほんと何もないので利用しちゃってますが)、静的ファイルだけとはいえきちんとJavaScriptも動きますし、やろうと思えばなんでも出来ます。便利すぎ。

Vue.js周りだとサンプルの公開用に結構使われてますし、簡単なドキュメントの公開などにも使えそうですね。素敵。



GitHub Pagesの使い方はこちらのサイトをどうぞ

GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた | Tips Note by TAM


「masterブランチの/doc以下のみ公開」という設定も選べるようになっているので、privateリポジトリから利用するときはそれを設定すれば良さそうですね。