#author("2021-04-13T19:52:35+09:00","default:inoue.ko","inoue.ko") #author("2021-04-13T19:58:26+09:00","default:inoue.ko","inoue.ko") *GitHub Pages https://pages.github.com/ ~ #image(GitHubPages04.png,right,30%) 一般にWebページを公開する際は、サーバーをレンタルするなどして、[[FTP]]でファイルをアップロードしますが、 [[GitHub>https://github.com/]] を利用すると、簡単に Webサイトを公開することができます。ここではその方法を紹介します（要アカウント作成、無料）。 ~ ***CONTENTS #contents2_1 ~ ~ **前提の確認 -[[GitHub]]とは、[[Git]] というバージョン管理システムを利用して、世界中の人々が自分のファイル保存、公開することができる Webサービスです。 -GitHub Pages で公開できるのは HTML+CSS+Javascript の範囲でできた''静的Webサイト''のみです。PHPで動く動的サイトは公開できません。 -GitHub の Publicプランは、ファイルのソースを全て公開することが前提です。とは言っても、もともとWebサイトを構成するファイルは、誰でもブラウザからソースを見ることができるので、その意味では特に不利益が生じるものではありません。 ~ ~ **アカウントの作成 GitHub を利用するには、アカウントの取得が必要です。はじめての方は、以下の手順でアカウントを作成して下さい。 ~ ***はじめに -ここから先の作業は、スマホではなくPCで行うことを推奨します。 -ここから先の一連の作業は''すべてPCのブラウザ上で行うことを推奨します''。 -アカウント作成にはGmail等のメールアドレスが必要です。アカウント作成の過程で本人確認のメールが届くので、事前にそれをブラウザで開いて確認できるようご準備ください。 -事前に''ユーザー名''を決めておいて下さい。これは最終的にあなたのリポジトリのURLに関わるので、将来に渡って使い続けられるようなものをしっかり考えて下さい（世界に一つだけの名前であることが必要です）。 ~ ***アカウント取得の手順 以下の一連の作業は''すべてPCのブラウザ上で行うことを推奨します''。特に確認メールにおける認証操作等でメールをスマホで受けたりすると、その後の操作で手順が混乱することがあるので、同じブラウザ上で GitHub と Webメールの両方が見えるようにして作業する方がスムーズです。 -1. 以下にアクセスしてください。 https://github.com/ -2. 画面右上の ''Sign Up'' をクリック。 ＞ Create your account のページが表示されます。 -3. ユーザー名、メールアドレス、パスワードを入力して、''Create Account'' をクリックしてください。 --ユーザー名：あなたの GitHub アカウント名です。公開するWebページのURLの一部になる重要な文字列なので、しっかり考えて定義しましょう。 --メールアドレスは認証に必要な情報です（Gmail 等がいいでしょう）。 --パスワードは GitHub アカウントにログインするためのもので、この段階で定義します（忘れないようにメモして下さい）。 -4. 利用者の経験値等を問うアンケート入力画面が表示されます（英語です）。適宜入力して下さい。 -5. 登録したメールアドレスに確認メールが届きます。''Verify''して下さい。 -6. GitHub のページ上に「あなたのメールアドレスが認証されました」と表示されて、リポジトリの作成ができる状態になります。 以後、GitHubを使う場合は、''Sign in'' をクリックして、ID,PW を入力してログインして下さい。 ~ ***付記：ログイン（Sign in）ログアウト（Sign out）について -''ログイン''は、GitHubでは ''Sign in'' という用語になっています。先ほど設定したID,PW を入力してログインします（このID, PW を絶対忘れないように！）。 &color(red){''Sign up'' を使ってしまうと、新規登録の扱いになるので、注意して下さい。この勘違いで「正常ログインできない・・」という質問が多発しています。}; -''ログアウト''は、画面右上の利用者アイコンから ''Sign out'' です。 ~ ~ **リポジトリの作成 はじめに、GitHub上に新規のリポジトリを作ります。リポジトリとは、Webサイトやファイルセットなどを GitHub 上で管理するためのプロジェクトフォルダ・・とご理解下さい。リポジトリはいくつでも作ることができるので、その数だけサイトを作ることができます。 ~ ***新規リポジトリの作成 #image(GitHubPagesNew.png,right,25%) -1. 画面右上のプラスアイコン「+」をクリックし、''New repository'' を選択。 #clear #image(GitHubPages01.png,right,50%) -2. ''Repository name''という入力欄にリポジトリ名を入力します。リポジトリ名は任意ですが、ここで設定した名称によって、WebサイトのURLが変わります。一般に以下のようなURLになります。 #clear https://（ユーザー名）.github.io/（リポジトリ名） ~ -3. ''Create repository'' をクリック 以上でリポジトリ（この時点では中身は空）ができました。 ~ ***ファイルのアップロード #image(GitHubPages02.png,right,30%) -Create repository をクリックした直後、右のような画面が表示されます。 -表示された画面で ''Uploading an existing file'' をクリックすると、Drag&Drop できるスペースが表示されるので、手元の Webプロジェクトフォルダの中身を丸ごとアップします。 #clear #image(GitHubPages03.png,right,30%) -''Commit changes'' をクリックすることで、操作が完了します。 #clear -以下のように、リポジトリの中が、あなたの手元のフォルダ構成と同じように見えていれば正解です。 #image(SampleSite02.jpg) ~ ~ **GitHubページの公開 サイトのファイルは、アップしただけでは公開されません。以下の設定操作によって公開されます。 #image(GitHubPagesSettings.png,right,30%) -1. リポジトリ画面の右端のタブ ''Settings'' をクリックします。 #clear ~ #image(GitHubPages05.png,right,30%) -2. ページの下の方に ''GitHub Pages'' という項目があります。''Check it out here! '' をクリックして下さい。 ~ #image(GitHubPages06.png,right,30%) -3. ''Source'' の項目が ''None'' となっているので、これを ''main（master） '' に変更して保存（save）して下さい。 ＞ 公開URL が表示されます。 ~ -4. 自身の公開URLにアクセスしてみて下さい。 https://（ユーザー名）.github.io/html_sample_01 設定変更から公開まで数分かかることがあります。 ~ ~ **リポジトリの更新 ソースコードの更新には、以下の２つの方法があります。 ~ ***GitHub のソースエディタを使って編集 -リポジトリ上に見える該当ファイルをクリック -''Edit（鉛筆アイコン）'' をクリックすると編集可能状態になります。 -編集終了後、''Commit changes'' をクリック ~ ***ローカル環境（あなたのPC）で編集したファイルをアップして上書き -リポジトリのページ、ファイル一覧の上の ''File Upload'' をクリック。 -手元のファイルをドラッグ＆ドロップ -アップロード完了後、''Commit changes'' をクリック ~ ~ **付記 ***不要なリポジトリの削除 作業の過程で、間違った名称のリポジトリを作ってしまった場合は、以下の手順で削除可能です。 -1. 削除したいリポジトリを開いて下さい。 ~ #image(GitHubPagesSettings.png,right,20%) -2. 右端のタブに ''Settings'' というのがあるので、それをクリック #clear ~ #image(GitHubPagesDelete.jpg,right,20%) -3. そのページの一番下に ''DangerZone'' というのがあって、そこに ''Delete This Repository'' というボタンがあります。それをクリック -4. 削除したいリポジトリの名称の確認を求めてくるので、リポジトリ名を確認入力して「OK」して下さい。 ~ ***より本格的に活用するには GitHub は本来、自分のPC内にある「ローカルリポジトリ」とGitHub上にある「リモートリポジトリ」を同期させるかたちで利用するものです。 基本的には、手元のPCにあるローカルリポジトリ（要するに Git管理下にあるフォルダ）で作業を行い、その作業内容をリモートポジトリへプッシュする流れで更新を行います。 そこで必要になるのが、GitHubのクライアントツール（Git GUIツール）です。以下、''GitHub Desktop'' はこれを直感的に行えるツールです。 https://desktop.github.com/ 詳細については、ここでは割愛いたします。以下のように検索すると、親切な解説サイトが多数ヒットします。 [[Google: GitHub Desktop 使い方]] ~ ~