ようこそ“もめん”です。
先日、私もGitHubにユーザー登録をして、作成したポートフォリオをGitHub Pagesで公開しました。
公開するためには、いくつかの手順を踏まないといけないので、つまずいてしまうひとが多いようです。
そんな方のために、公開までの手順を画像をつかって分かりやすく説明します。
Contents
GitHub Pages(ギットハブ ページーズ）とは
まずは、GitHub Pagesについてお話しましょう。
GitHub Pagesは、アメリカのカルフォルニア州サンフランシスコ市に拠点を置くGitHub社のサービスのひとつ。
GitHub Pagesは、2008年から提供されているサービスで、世界中の人々が自分の作品（プログラムコードやデザインデータなど）を保存・公開できるようにしたウェブサービスです。
サービスは無料で使用できますが、いくつかの制限があります。（＊有料サービスもあり）
- HTMLとCSSとJavaScriptのファイルのみ（JavaScriptをつかったアニメーションを含むサイトもOK）
- リポジトリ容量は１GBまで
- 通信量は100GB/月まで
- 反映まで時間がかかる
公開できるファイルは、HTMLとCSSとJavaScripのプログラミング言語と画像で構成されているサイトのみとなっています。
サイトを公開する形式としては、ユーザーサイトとプロジェクトサイトの二つがあります。
- User Site（ユーザーサイト） URL：https://usermame.github.io
- Project Site(プロジェクトサイト）URL：https://username.github.io/projectname
どこが違うのでしょうか？
ユーザーサイトは、アカウントひとつにつきサイトを一つしか作ることができません。
プロジェクトサイトでは、サイトをいくつでも作ることができます。
もう一つの違いは、設定するリポジトリ名です。
Repository（リポジトリ）とは、作成したサイトのファイルをGitHubで保管しておく場所です。
サイトごとに作ってあげます。
ユーザーサイトのリポジトリ名（Repository name）は、username.github.ioと決まっていて、私の場合はmomenblog.github.ioとなります。
そしてURLは、https://momenblog.github.ioですね。
プロジェクトサイトのリポジトリ名（Repository name）は、自由に名前をきめることができます。
たとえばもしも私がリポジトリ名を、庭という意味で「garden」と設定した場合は、プロジェクトサイトとなり、URLがhttps://momenblog.github.io/gardenとなります。
どちらでもお好きな方で作成してください。
私は、とりあえずユーザーサイトでポートフォリオを公開しました。
それでは次に、サイトを公開するための手順についてみていきましょう。
GitHub Pagesでサイトを公開するための手順
サイトを公開するための手順を図にしましたのでご覧ください。
手順に番号をふりました。
番号順に作業をすすめます。
①GitHubにユーザー登録をします。
まずは、GitHubにサインアップして登録を済ませましょう。
②サイトの作成
公開したいサイトを手元のパソコンで制作します。
私はVS Codeでつくり、ファイルはデスクトップ内に保存しました。
➂GitHubでRepository（リポジトリ）を作成します。
Repository（リポジトリ） は、GitHubにファイルを保管する場所でしたね。保管場所を設定します。
④ファイルをアップロード
パソコンで作成した公開したいファイルを、GitHubにアップロードします。
⑤公開の設定
最後にGitHubで公開の設定をして終了ですね。
以上①～➄までの作業手順を説明しました。
少しややこしいですが、何となく手順が理解できましたか？
それでは、それぞれの手順を詳しく説明していきますね。
GitHubにサインアップ
はじめて利用するときは、GitHubにサインアップしてユーザー登録をします。
github.comと検索してGitHubのホームページを開きます。
「sign up」ボタンをクリックしてユーザー登録をしましょう。
メールアドレス、ユーザー名、パスワードが必要です。
ユーザー名やパスワードは、忘れないように必ず控えておきましょう。
ロボットでないことの確認や、簡単な質問もあります。
なお、指定したメールアドレスに、GitHubから確認用のコードが送られてきますので、コード入力も行います。
指示に従って入力していきましょう。
サインアップ（ユーザー登録）修了後にログインする場合は、「sign in」ボタンからユーザー名やパスワードを入力してログインします。
GitHubでリポジトリをつくる
公開するサイトができたら、公開するために必要なファイルや画像などを保管してもらえるように、GitHubで Repository（リポジトリ）を作成します。
ここではRepository（リポジトリ） のつくり方を説明します。
①GitHubにログインした状態で、URLをhttps://github.com/new として検索（エンター）します。
➁下の図のようにCreate new repositoryの画面が開きます。
赤枠で囲んだ部分 Repository name 欄に、アカウント名を入れましょう。
私は、ユーザーサイトで公開したかったので、momenblog.github.ioと入力しました。
もしも、プロジェクトサイトで公開したければ、自由に名前を入れられます。
庭という意味で「garden」にしたければ、gardenとだけ入力してください。
③無料アカントでサイトを公開する場合は「Public」にチェックを入れてください。
そのほかはそのままでOKです。
④最後に「Create repository」ボタンを忘れずにクリックしましょう。
これでRepository（リポジトリ）ができました。
次は、公開に必要な作成したファイルをRepository（リポジトリ）内にアップロードしていきます。
ファイルをアップロードする
ファイルをアップロードする方法を説明します。
①画面を確認してみましょう。左上をみてください。
ちゃんと、momenblogさんのmomenblog.github.ioになっていますね。
➁その下の＜＞Codeのタブにいることを確認し、Quick setup内の赤枠で囲んだ部分「uploading an existing file」をクリックしてください。
③「ここにファイルをドラック＆ドロップしてください。」とかかれたアップロードスペースがあらわれます。
必要なファイルやフォルダを選択して、ドラック＆ドロップしましょう。
私の場合は、デスクトップ内のMomenPortfolioにファイルやフォルダを保存していましたので、そちらから選んでドラッグ＆ドロップしました。
④ ドラック＆ドロップが終わると、ドラッグしたファイルやフォルダ名が表示されます。
最後に、「Commit changes」ボタンをクリックするのをお忘れなく。
これは余談ですが…
アップロードするときは、imgフォルダも一緒にアップロードしないと画像なしのサイトが公開されてしまいます。
サイトを公開した後に、画像のimgフォルダのアップロードが漏れてしまったことに気づきました。
大失敗です。(笑) でも大丈夫！
追加でアップロードすればよいので、あとで追加しておきました。
追加でアップロードする方法は、この記事内の「サイトを更新する方法」で説明しています。
サイトを公開する方法
いよいよサイトを公開します。
①「settings」タブをクリックします。
②「settings」タブを開いてスクロールしていくと、ずっと下の方に「GitHub Pages」があります。
あなたのサイトは、https://momenblog.github.ioで公開されていますよ。と表示されています。
もしも表示されていなければ、その下のSourceが、Branch：main、フォルダ/（root）、saveになっているか確認してみてください。
なっていなければ、▼をクリックしてご自身で設定してください。
プロジェクトサイトの場合は、自動で公開設定がされないようなので、Source部分はご自身での設定が必要です。
③それでは、どんな風に公開されているか見てみましょう。
サイトアドレスにカーソルを合わせ右クリック→新しいタブで開くとし、ちゃんと公開できているかを新しいタブで確認しましょう。
サイトを更新する方法
公開した後に、文章や画像を追加したくなることがありますね。
ここでは、サイトを更新する方法を説明します。
アップロードの場面でもお話ししたように、なんと私は、サイトを公開した後に、画像のimgフォルダをアップロードするのを忘れていることに気づきました。
そして文章のおかしなところも直したいと思いました。
大丈夫、安心してください。
そんな時は、変更したファイルや追加したいファイルをアップロードしてあげればよいのです。
上の画像のように、＜＞Codeのタブにいることを確認し、Add fileボタンの▼をクリックして「Upload file」を選択します。
するとアップロード画面があらわれます。
アップロードの方法のところで説明したように「ここへファイルをドラッグしてください」とメッセージがかかれた枠のなかに、更新したファイルや追加したいファイルを選んでドラック＆ドロップしましょう。
私の場合は、画像のimgフォルダと変更したindex.htmlファイルを ドラック＆ドロップ しました。
更新された内容で上書き保存されます。
最後に「Commit changes」ボタンを忘れないでクリックしてくださいね。
まとめ：初心者向け画像解説GitHub Pagesでウェブサイトを公開する方法
今回は、GitHub Pagesでサイトを公開する方法をお話ししました。
- GitHubにユーザー登録をする
- サイトを手元のパソコンで作成する
- GitHubでRepository（リポジトリ）をつくる
- ファイルをアップロードする
- 公開の設定をする
１～５の手順で作業を進めてくだされば、初めての方でもつまずかないでしょう。
サイトを更新する方法も参考にしていただければ幸いです。
私が公開したポートフォリオは、こちらのブログで紹介しています。
拙作ですが、よかったらご覧になってください。
では、本日はこの辺で
最後までおつき合いくださいましてありがとうございました。
次回もmomenblogをお楽しみに♪