GitHubでWebページとしてCSSやJavaScriptを実行する方法


GitHub上でコミットしたindex.htmlやCSS/JavaScriptをWebページとして表示する方法です。

実行するためのサーバなどは特に用意する必要もなく、GitHubだけで完結します。

[スポンサーリンク]

index.htmlをコミット

まずは表示させたいWebページのファイルたち(index.htmlやCSSやJavaScript)をコミットしていきます。

ここで注意しておきたいのですが、表示させるHTMLファイルは必ずindex.htmlとしておきましょう。

index.htmlという名前じゃなくても表示させることはできるのですが、少し面倒くさいのでよほどの理由がないようであればindex.htmlにしておきましょう。

ブランチはとりあずはmasterにコミットしましょう。もちろんどのブランチでもOKですが、今回はmasterブランチへコミットしている前提で説明をしていきます。

イメージとしてはこんな感じになるように表示させたいWebページのファイルたちをGitHubへコミットしていきましょう。

gh-pagesブランチを作成する

さて、GitHub上でWebページを表示させるためには、gh-pagesブランチをまずは作成していく必要があります。

これより以降でgh-pagesブランチを作成する手順を説明していきます。

まずはコチラをクリックしていきます。

ブランチ名を入力するテキストが表示されるので、gh-pagesと入力しましょう。

Createボタンをクリックしてブランチを作成します。

これでgh-pagesブランチが作成されました!
あとはWebページが表示されるのを確認するだけです。お疲れ様でした。

Webページを表示する

ではgh-pagesブランチもできたので、Webページを表示していきましょう。

Webページを表示させるには、

https://GitHubのユーザ名.github.io/リポジトリ名/

をブラウザから入力するとWebページが表示されます。

今回はサンプルとしてこちらを作ってみました。

GitHub上ではこのようなファイル構成となっています。

さいごに

どうしてもindex.htmlというファイル名が使えないというきはgh-pagesブランチを作ったあとに、gh-pagesブランチ上のみでファイル名をindex.htmlを変更すればOKです。ちょっとだけ面倒くさいですが解決します。

これでちょっとしたWebページの確認にはGitHubだけでできるのでとても楽になったと思います。

それでは!