HTML
Git
GitHub
GitDay 11

GitHub で超簡単に静的サイトをホスティングする!

tl;dr

  • github では簡単に静的サイトをホスティングすることができます。
  • ここでは gh-pages というブランチを切ることによるホスティング ではない やり方を紹介します。
    • もちろん、ブランチいるほうのやり方でもできます。
  • 備忘録にでもしていただければ...

対象者

  • git を使い始めて間もないけど、だいたい仕組みぐらいはわかってきたなーっていう人。
  • ホスティングは知っている
    • けど、gh-pagesっていうブランチ切ってやってた
    • ほかの方法知らない
    • gh-pages ブランチいちいち切るのも...

Step1.

github で新しいリポジトリを作成します。

新しいリポジトリを作成

Step2.

テスト用のファイルを作成したいと思います。

ディレクトリ構造

page-hosting フォルダを作成

:open_file_folder: page-hosting :page_facing_up: index.html
:file_folder: css :page_facing_up: style.css
:file_folder: js :page_facing_up: common.js

githubからファイルをダウンロードする:
GitHub - lemon2003/page-hosting

またはclone:
https://github.com/lemon2003/page-hosting.git

Step3.

作成したファイルを、リモートリポジトリにプッシュしたいと思います。
1. git init で初期化
2. git add --all ですべてのファイルをステージング
3. git commit -m "commit comment" でコミット
4. git remote add origin リモートURL でリモートを追加
5. git push -u origin mastermaster ブランチにプッシュ

bash - リモートリポジトリにプッシュ

bash
User@DESKTOP MINGW64 /e/page-hosting (master)
$ git init
Initialized empty Git repository in E:/page-hosting/.git/

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git add --all

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git commit -m "first commit"
[master (root-commit) d5e7519] first commit
 3 files changed, 110 insertions(+)
 create mode 100644 css/style.css
 create mode 100644 index.html
 create mode 100644 js/common.js

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git remote add origin https://github.com/[ユーザーid]/page-hosting.git

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git push -u origin master
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 4 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (7/7), 1.61 KiB | 411.00 KiB/s, done.
Total 7 (delta 0), reused 0 (delta 0)
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/[ユーザーid]/page-hosting/pull/new/master
remote:
To https://github.com/[ユーザーid]/page-hosting.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

Step4.

いよいよホスティングの設定 :gear: をしたいと思います。

  1. Settings タブをクリック
  2. GitHub Pages グループ
    • Source : master branch に設定
  3. Save をクリック

1. Settings タブをクリック

`Settings` タブ

2. Source : master branch に設定 & Save をクリック

`Source` : `master branch` に設定 & `Save` をクリック

Step5.

準備は完了しました!
実際にアクセスしてみましょう。

URL: https://[アカウントid].github.io/[リポジトリ名]/
([アカウントid][リポジトリ名] はご自身のものに。)

表示結果

GitHub Static Page Hosting Test!

表示結果

終わりに

githubを使えば、簡単に、サーバーを自分で用意せず、静的サイトをホスティングすることもできます。
(もちろんバージョン管理もしながら。)
使いこなせば、独自ドメインの追加もできるので、何かしら便利だと思います。