見出し画像

GitHub Pagesによる静的サイトの公開

npaka

「GitHub Pages」による静的サイトの公開方法をまとめました。

1. Github Pages

「Github Pages」は、GitHubによる、静的サイトのホスティングサービスです。無料で利用できますが、サイトのリポジトリを非公開にしたい場合は有料になります。GitHubのアカウントがあればすぐに静的サイト（HTML/CSS/JavaScript/画像など）を公開できます。URLは「https://<ユーザ名>.github.io/<リポジトリ名>」になります。

2. 使い方

(1) GitHubにリポジトリを作成。

画像1

(2) ローカルにGitHubリポジトリをクローン。

$ git clone <GitHubリポジトリのアドレス>

(3) ローカル環境で静的ページを作成し、Gitのインデックスに追加。
クローンしたフォルダ内に「index.html」を作成し、「git add <ファイル名>」でGitのインデックスに追加します。

◎ index.html

<html>
    <head>
    </head>
    <body>
        Github Pages Sample
    </body>
</html>
$ git add index.html

(4) 変更結果をローカルリポジトリにコミット。

$ git commit -a -m "add new file"

(5) ローカルリポジトリの変更をリモートリポジトリに反映。

$ git push origin master

(6) GitHubリポジトリの「Settings → GitHub Pages → Source」で「master branch」を選択。

画像2

(7) ブラウザで「https://<ユーザ名>.github.io/<リポジトリ名>」にアクセスして公開されていることを確認。

3. GitHub Pagesに更新が反映されない

master branchにコミットしてすぐにGitHub Pagesに反映されるわけではありません。1〜2時間ほどかかります。URLの末尾に「?version=<コミットID>」を付けることで、最新版を確認することができます。

https://<ユーザーID>.github.io/<リポジトリ名>/index.html?version=<コミットID>

「コミットID」は、以下のコマンドで確認できます。

$ git log

【おまけ】 gitコマンドまとめ

◎ GitHubリポジトリのクローン

$ git clone <GitHubリポジトリのアドレス>

◎ 管理下へのファイルの追加

$ git add index.html

◎ 管理下のファイルのコミット

$ git commit -a -m "add new file"$ git push origin master

◎ 管理下のファイルの確認

$ git ls-files

◎ コミットの確認

$ git log

この記事が気に入ったらサポートをしてみませんか？