Edited at
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を使えば、簡単に、サーバーを自分で用意せず、静的サイトをホスティングすることもできます。

(もちろんバージョン管理もしながら。)

使いこなせば、独自ドメインの追加もできるので、何かしら便利だと思います。