ああ
こんにちは！ひかるです。いつか技術ブログのアイコンをおばけジャックしたいです。
今回は、GitHub Pages でページを公開してみる！ですです。
＃ めずらしく、勉強会レポじゃないのですよ。
GitHub Pages とは、GitHub のサービスのひとつです。
GitHub Pages では、GitHub にあるファイルをウェブページとして
公開することができるのです。
サーバーとか独自ドメインをもっていなくても、簡単なページなら
だれでも公開することができるのですー！
＃ 静的ページのみです。
すでにいろんなサイトで紹介されている内容なので、詳しい説明ははぶき、、
実際にページを公開してみましょー！
今回の目標は、GitHub Pages で過去につくったとあるモノを公開してみる。
いろんな意味でどきどき。
GitHub Pages に詳しい手順が書いてあるので、
今回は、それに沿ってやってみようと思います。
GitHub のアカウントがあらかじめ必要です。
ちなみに、私は Git も GitHub も全然使いこなせてないです( ´・ω・｀ )
1. Create a repository
まず、GitHub Pages 用のリポジトリをつくってみます。
Repository name に、「username.github.io」を入力します。
username の箇所には、自分のユーザー名を入力しましょう！
Create repository をクリックしてリポジトリが作成されます。
2. Clone the repository
こんな風な画面が表示されれば、無事にリポジトリ作成されました！
今回は、GitHub for Mac を使ってみたいとおもうので、Set up in Desktop をクリックしてみます。
クリックすると、GitHub for Mac が起動するので、そちらの画面にうつりましょう。
＃ ChromeやIEの場合は警告が表示されますが、「許可」でだいじょうぶです。
リポジトリを置いておくディレクトリをてきとうに選択して、Clone をクリック！
今はファイルが一つもないので、.gitフォルダのみの空っぽです。
ではでは、さっそく Hello World してみましょ！
あちこち画面移動してつかれてきました( '〜' )
3. Create an index file![]()
先ほど指定したディレクトリ内に下記の内容の index.html をつくりましょう。
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>
Hello World です。Hello World です。
作成したら、GitHub for Mac の画面にもどってみましょう。
4. Commit & sync
Changes のタブをクリックすると、こんな画面がでてきます。
先ほど作成した index.html が表示されてますねん。
Summary とかに適当なコメントを入力し、Commit してみます！![]()
Unsynced Commits にコミットした内容が表示されてます。
Publish Branch をクリックして、プッシュしてみます。。どきどき。
GitHubで確認したら、実際に公開されているか、みてみましょう。。
http://username.github.io/ でページにとんでみます。
＃ 反映には10分ほど時間がかかる場合があるみたいです。
Hello World!! はろーわーるど！！表示されました！！
はろーわーるど出来た瞬間ってなんであんなにうれしいんでしょうか。
ページを公開する手順は以上です。
んではでは、、このままでは少し寂しいので、過去に作ったものをアップしてみたいと思います。
知っている人は知っている。10代のひかるが学校で作った、enchant.js の簡単なミニゲームです。
公開できたー！( ' ω ' )
ソースも当時のままなので、羞恥プレイもいいところです。
enchant.js で公開されてるチュートリアルをほぼまねたものです。
ちなみに、プレイヤーは男の子で、追ってくる女の子達からひたすら逃げ、
マップのどこかにいるおまわりさんに触れるとゲームクリアです。
女の子がスライドしたり障害物を通り抜けたりしますが、仕様です。
なぜ当時こんな設定にしたのか全く覚えてないです。
イケメンはつらいですね。
こんな感じで、enchant.js のゲームまで公開できちゃう GitHub Pages
ぜひぜひお試しあれー！
ではでは ( ' ω ' )
