【Web】HTMLをGitHub Pagesで公開 (Web勉強記 2日目)

GitHub PagesでHTMLを手軽に公開

自分でつくったHTMLのコードをWeb上で公開したいときには、HTMLを置くためのサーバーが必要になる。Webサイトを公開したいというほどじゃないけど、ブログやSNSでHTMLを共有したい…という場合には、GitHubを利用しているならGitHub Pagesが便利。

今回は自分への備忘録を兼ねて、Github PagesでのHTMLの公開方法をメモしておきたい。

 

GitHub Pagesを作成

GitHub Pagesの作成方法は以下の公式ページに記載がある。

https://pages.github.com/

手順を簡単にまとめると

1. 自分のGitHubページで「自分のユーザー名.github.io」というpublicレポジトリをつくる。
2. Git Bashで適当なディレクトリを開き、以下を実行する。
   git clone https://github.com/自分のユーザー名/自分のユーザー名.github.io
3. cloneしたフォルダのなかにindex.htmlを置く。これが公開されるGitHub Pagesのトップページになる。
4. 以下を実行してcommitする。
   git add –all
   git commit -m “Initial commit(ここはコメントなので適当に)”
   git push -u origin master

 

これでindex.htmlの内容がhttps://github.com/自分のユーザー名/自分のユーザー名.github.ioのURLで公開され、誰でも見ることができるようになる。

 

index.htmlから自分のHTMLコードにリンクを張る

index.htmlに公開したい自分のHTMLの内容をそのまま張っても良いのだが、いろいろなHTMLのコードを公開したい場合、いちいちindex.htmlの中身を書き換えるのは面倒くさい。

複数のhtmlを表示させたいときは、index.htmlと同じディレクトリに自分のHTMLコードをコピーしてcommitし、index.htmlからリンクを張ればよい。以下は、前回の日記で作成したweb_omikuji.htmlにリンクを張ったindex.htmlの例。同じディレクトリに置いているので相対パス（./web_omikuji.html）で指定すればOK。

以下が実際の私のGitHub Pages。web_omikujiをクリックすれば、webおみくじを実行することができる。

https://wakkyfree.github.io/

 

参考書籍

今はこの本を読みながらHTML、CSS、JavaScriptの勉強してます。書籍のコードをなぞるだけだと面白味が無いしブログにものっけられないので、今回の記事のように本で勉強したことをもとに何かつくり、コードを公開していくスタイルで日記を書いていくつもり。最終的にはWebブラウザ上で動くゲームをつくって公開したい。

ゲームを作りながら楽しく学べるHTML5 CSS JavaScriptプログラミング［改訂版］ (Future Coders（NextPublishing）)