Github Pagesで高速&お手軽にサイトを公開する
Web上に静的サイトを公開する手段で、自分が知っている中で一番手軽で且つ高速なものをご紹介したいと思います。
それはGithub Pagesです。
Github PagesはGithubアカウントを持っている方であれば利用することが出来ます。
ではいつも通り紹介していこうかと思うのですが、今回はGithub Pagesがどれだけ手軽で高速かを証明するために、一から作り始めて公開されるまでの時間を実際に計測しながら実装してみたいと思います。
準備
まず、サイト公開用の新しいリポジトリをGithubで作成します。
公開するものなので「Public」を選んでください。
今回はわかりやすいように「page-test」という名前のリポジトリを作りました。
このリポジトリに「index.html」というファイルを追加したいのでクローンします。
index.htmlが公開されるページとなります。内容はなんでもいいのですが、せっかくなので前回作った荒々しい手書きの四角形を全世界に公開したいと思います。
<!DOCTYPE>
<html>https://blog.fox-hound.tech/?p=449&preview=true
<head>
<script src="https://rawgit.com/pshihn/rough/master/dist/rough.min.js"></script>
</head>
<body>
<div class="wrapper">
<canvas id="test"></canvas>
</div>
<script>
let roughCanvas = rough.canvas(document.getElementById('test'));
roughCanvas.rectangle(10, 10, 100, 100,{ fill: 'red', roughness: 5.5});
</script>
</body>
</html>
これをリモートにプッシュします。
無事追加されていますね。
公開
では実際に公開します。
「Setting」のタブをクリックしてください。
Settingのページ下部にGithub Pagesの欄があります。こちらの「Source」のセレクトボックスでmaster branchを選び、saveのボタンを押します。
そうするとページがSettingページが再読み込みされます。ここで再びGithub Pagesの欄を確認すると
Your site is ready to be published at https://masaaki-kawaguchi.github.io/page-test/
という文章が表示されています。
Github Pagesではhttps://ユーザー名.github.io/リポジトリ名/というURLで公開されます。
実際にhttps://masaaki-kawaguchi.github.io/page-test/を確認してみると、
今日も荒々しいですね。
httpsから始まるURLで確認できることからわかるように、無事に荒々しい四角が世界へと公開されました。
最初のリポジトリ作成から、URLに飛んで公開されているのを確認するまでにかかった時間は3分23秒でした。今回は表示するページをあらかじめ用意していたというのもありますが、スクリーンショットを撮りながらこれなので、やはり手軽で速いです。
今回は速さを証明するためにあんな意味のないページを公開しましたが、 Jekyll、Hugo、Hexo、Gatsbyなど、主要な静的サイトジェネレーターのリファレンスにはGithub Pagesへの公開方法が書いてあるものも多いです。
なので、それらで作成した静的ページをGithub Pagesで公開する、というのもスムーズに行えます。
まとめ
Github Pagesを用いるにはリポジトリをPublicにする必要があるので、他の人にもコードの中身を見られてしまうことになります。
それが嫌な方にはオススメ出来ないですが、かなり便利な機能だと思います。
