GitHub(ギットハブ)とは
バージョン管理システムのGitの仕組みを用いて、プログラムのソースコードなど、さまざまなファイルを保存、公開できるサービスです。
チームでソースコードを管理するときはもちろん、個人で使うことも可能です。
情報を一般公開する場合は無料で使用可能。(非公開の方法の場合は、一部機能に制限、または有料になります)
GitHub Page
GitHubのアカウントがあれば、無料でサイト公開が可能です。HTML、CSS、JavaScriptで動作するサイトに限ります。
アカウントの作り方
①GitHubのサイトにアクセスする
②中央の「GitHubに登録する」または、右上のサインアップ(Sign Up)をクリック
③画面の指示に従い、メールアドレス・パスワード・ユーザー名を入力
※ユーザー名は、公開するWebページのURL の一部になりますので、よく考えて登録してください
④登録したメールアドレスに確認メールが届く。指示に従って登録を進める
※次回以降、使うときは「サインイン」を選び、メールアドレスとPWを入力してください
※ サインイン Sign Inはログイン、サインアップ Sign Up は新規アカウント作成です
補足:2要素認証(2FA)について
2 要素認証 (two-factor authentication: 2FA)とは、ログイン処理に関するセキュリティ対策の一つで、2種類以上の本人証明を要求する仕組みのことです。
Githubでは2023年から2要素認証をユーザーに求めていますので、自分の環境に合わせて登録してください。認証アプリ(Microsoft Authenticatorなど)を使う方法や、Githubアプリを使う方法があります。
参考:
- https://docs.github.com/ja/authentication/securing-your-account-with-two-factor-authentication-2fa/about-two-factor-authentication
- https://www.microsoft.com/ja-jp/security/mobile-authenticator-app
- Google:Github 二要素認証
リポジトリ(Repository)
リポジトリとは…Webページに含まれる一連のファイルを、GitHub上で管理するための「フォルダ」のような存在です。リポジトリはいくつでも作ることが可能です。
(Repository…貯蔵庫、収納庫、ファイル格納庫)
公開リポジトリ
リポジトリの一覧画面。どのようなリポジトリを持っているか、など、活動状況がわかるページです。各アカウントの「マイページ」に相当します。
https://github.com/(ユーザー名)
★永嶋の公開リポジトリ
※授業で使うサンプルコードを中心に載せています
リポジトリの作成
①画面右上の+アイコンから New Repository を選ぶ
② Repository nameという入力欄にリポジトリ名を入力
ここで入力した名前が、ページ公開時のURLになります。
https: //(ユーザー名).github.io/(リポジトリ名)
そのほかの項目はそのままでOK
(授業で使うリポジトリは、コードが見えるように「Public」にしてください)
③Create repositoryをクリック
ファイルのアップロード
①上記の手順で Create repository をクリックした直後のページで、Uploading an existing file をクリック
②ドラッグ&ドロップして、手元のwebフォルダの中身をまるごとアップロードし、ページ下部にある、Commit Change をクリック
③自分のコンピュータ上のファイル構成と同じように見えればOK
ページの公開
下記の手順をすることでページが公開されます。
①リポジトリ画面の右端、Settingをクリック
②左サイドメニューからPageを選ぶ。「None▼」の部分を「main」に変更して 保存(Saveをクリック)
③再度Pageをクリック(またはページを再読込)すると、URLが表示されるので表示を確認します。反映されるまでに数分かかることがあります。
《参考》
公式ドキュメント:GitHub Pages サイトを作成する
リポジトリの更新
アップロード後、ソースコードを編集する場合は、次の方法で行います。
▶ブラウザ上のエディタで編集
①該当ファイルをクリック
②鉛筆マークをクリック
③編集後、Commit Changeをクリック
▶自分のコンピュータで編集したファイルをアップロード
①リポジトリのページ(ファイル一覧)の上の Add File > Upload Files をクリック
②ファイルをドラッグ&ドロップ
③Commit Change をクリック