第３回 GitHubの活用
Webデザイン基礎B/2020｜造形短期大学部｜2020.09.28｜遠隔
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - 今回は、あなたの制作したWebサイトを公開するための環境を準備します。
- GitHubPages で、SampleSite の公開を求めます。
- 最後、特設サイトに GitHubリポジトリ情報の書き込みを求めます。
特設サイト（受講生一覧）
以下、11:00 - LIVE動画を配信します。
本日のメニュー
はじめに
制作した Webサイトは、今後の作家活動・就職活動等を前提とすると、何らかの形で「公開」する必要があります。
一般的には、レンタルサーバーを利用しますが、この授業では、遠隔でサイト校正やソースコードについてのサポートを行うことも前提に、GitHub というオープンなリポジトリのアカウントを作成するとともに、GitHubPages というサイト公開のサービスを利用します。
1. GitHub を用いたWebサンプルの公開
1.1. そもそも、GitHubとは？
- GitHubとは、Git というバージョン管理システムを利用して、世界中の人々が自分のファイル保存、公開することができる Webサービスです。
- そのサービスのひとつである GitHub Pages を使うと、あたかもレンタルサーバーにWebサイトをアップしたかのようなかたちで、HTML+CSS+Javascript によるWebサイトを公開することができます。
- GitHub の Publicプラン（無料）は、ファイルのソースを全て公開することが前提です。とは言っても、もともとWebサイトを構成するファイルは、誰でもブラウザからソースを見ることができるので、その意味では特に不利益が生じるものではありません。
1.2. アカウントの作成
GitHub の無料アカウントを作成します。
- ここから先の作業は、スマホではなくPCで行うことを推奨します。
- アカウント作成にはGmail等のメールアドレスが必要です。アカウント作成の過程で本人確認のメールが届くので、事前にそれをブラウザで開いて確認できるようご準備ください。
- 事前にユーザー名を決めておいて下さい。これは最終的にあなたのリポジトリのURLに関わるので、将来に渡って使い続けられるようなものをしっかり考えて下さい（世界に一つだけの名前であることが必要です）
- 1.2.1. 以下にアクセスしてください。
https://github.com/
- 1.2.2. Sign Up します。
- 1.2.3. ユーザー名、メールアドレス、パスワードを入力して、緑色の Sign up for GitHub というボタンをクリックしてください。
ユーザー名は公開するWebページのURLの一部になります。私の場合は、以下のようになっています。
https://github.com/koichi-inoue
- 1.2.4. 無料（Free）のプランを選択して下さい。
- 1.2.5. 登録メールアドレスに確認メールが届くので「認証」して下さい。
- 1.2.6. アンケートの入力画面が表示された場合は適宜対応して下さい。
- 1.2.7. 以上でアカウントが作成されました。
ここで、ログインとログアウトをお試し下さい。
- ログインは、GitHubでは Sign in という用語になっています。先ほど設定したID,PW を入力してログインします（このID, PW を絶対忘れないように！）。
Sign up を使ってしまうと、新規登録の扱いになるので、注意して下さい。この勘違いで「正常ログインできない・・」という質問が多発しています。
- ログアウトは、画面右上の利用者アイコンから Sign out です。
1.3. リポジトリの作成
リポジトリとは、Webサイトやファイルセットなどを GitHub 上で管理するためのプロジェクトフォルダ・・とご理解下さい。リポジトリはいくつでも作ることができるので、その数だけサイトを作ることができます。
index.html ファイルが一つだけしかない小さなWebサイトでも、１サイト = １リポジトリになるようにして下さい。
以下、リポジトリの作成手順です。GitHub上にフォルダをひとつ作る・・という感覚でイメージして下さい。
- 1.3.1. 画面右上のプラスアイコン「+」をクリックし、New repository を選択。
- 1.3.2. Repository nameという入力欄にリポジトリ名を入力します。リポジトリ名は任意ですが、ここでは SampleSite という名称にして下さい。
- 1.3.3. Create repository をクリック
＞ 以上でリポジトリができました。
1.4. ファイルのアップロード
- 1.4.1. リポジトリ作成後は右のような画面が表示されます。表示された画面で Uploading an existing file の部分をクリックして下さい。
- 1.4.2. ファイルをドラッグ&ドロップ できるスペースが表示されるので、手元の Webサイトフォルダの中身を丸ごとアップします（フォルダそのものをアップしないでください。フォルダの中身のファイル、つまりindex.htmlとstyle.css をアップして下さい）。
- 1.4.3. Commit changes をクリックすることで、操作が完了します。
- 1.4.4. リポジトリが以下のようになれば正解です。
1.5. 公開設定
サイトのファイルは、アップしただけでは公開されません。以下の設定操作によって公開されます。
- 1.5.1. リポジトリ画面の右端のタブ Settings をクリックします。
- 1.5.2. ページの下の方に GitHub Pages という項目があります。見つけて下さい。
- 1.5.3. Source の項目が None となっているので、これを main（master） に変更して save（保存）して下さい。
＞ 公開URL が表示されます。
- 1.5.4. 自身の公開URLにアクセスしてみて下さい。
https://（ユーザー名）.github.io/SampleSite
設定変更から公開まで数分かかることがあります。
2. リポジトリの更新体験
GitHub 上のデータは、本来であれば、Gitクライアントソフトを利用して、手元のPCと連携して使うのですが、はじめのうちは、シンプルな方法で更新作業を行なって下さい。ファイルの更新には、以下の２つの方法があります。
2.1. 手元でファイルを更新してアップロード
- リポジトリのファイル一覧の右上に Upload Files というボタンがあります。
- これをクリックするとアップロード画面になります。
- 手元で更新したファイルをドラッグ＆ドロップでアップして下さい。
- 同一のファイル名がある場合は、その更新、ない場合は新規ファイルとしてリポジトリに追加されます。
- Commit changes をクリックすることでリポジトリの更新が完了します。
2.2. GitHub 上のファイルを直接編集更新
この方法は現状では非推奨です。
- リポジトリ上でファイルを選択すると、ソースコードが表示されます。
- 右上のペンシルアイコン（Edit This File）をクリックして下さい。
- 編集画面になるので、そこで直接編集が可能になります。
- Commit changes をクリックすることでリポジトリの更新が完了します。
付記：不要なリポジトリの削除について
作業の過程で、間違った名称のリポジトリを作ってしまった場合は、以下の手順で削除可能です。
- 削除したいリポジトリを開いて下さい。
- 右端のタブに Settings というのがあるので、それをクリック
- そのページの一番下に DangerZone というのがあって、そこに Delete This Repository というボタンがあります。それをクリック
- 削除したいリポジトリの名称の確認を求めてくるので、リポジトリ名を確認入力して「OK」して下さい。
3. 本日の成果の書き込み
本日作成した GitHub リポジトリの情報と、GitHubページとして公開したWebサンプルを、特設サイト｜受講生のページ にリンク掲載して下さい。
以下の雛形を参考にして下さい。
== APPENDIX == ===公開リポジトリ=== * GitHub：https://github.com/JaneSmith <br> ===GitHub Pages=== * https ://JaneSmith.github.io/SampleSite <br>
第３回目は、以上をもって終了とします。お疲れ様でした。
次回から、HTMLの具体的な文法について解説します。サンプルを提供しますので、その編集を通して仕組みを理解するようにして下さい。