初めに
今回はGit Hubの 「GitHub Pages」でポートフォリオを作成する手順をまとめました。
作成したアプリを追加していくことができるよう方法を記録しています。
前提
・GitHubの登録が済んでいる
・GitHub Desktopのアプリをインストールが済んでいる
GitHub Pagesとは？
GitHubが無料で提供している、静的Webページを公開するためのサービスです。
GitHubのリポジトリをそのままWebサイトとして公開することができ、
公開したWebサイトは誰でもアクセスできるようになります。
手順
①公開したい静的Webページを作成する
今回は「portfolio」ディレクトリに
HTMLとCSSのファイルを作成し、中身を編集していきます。
🗂 portfolio
∟index.html
∟style.css
編集したページを確認する
先ほど作成したディレクトリに移動し、ローカルサーバーを起動します。
% cd 作成したディレクトリ
％ ruby -run -e httpd . -p 8000
サーバーを起動すると、ローカルホストのURLは以下になります。
http://localhost:8000/
正しく表示されることを確認したら、control + Cでローカルサーバーを停止します。
②Git管理できるようにする
git initコマンドでGit管理できるようにします。
% git init
③GitHub Desktop経由でpushする
※プッシュがお済みの方は飛ばしてください。
初めてプッシュする場合
１. GitHub Desktopを開き、先ほどgit initしたディレクトリを選択します。
2. 「first commit」でコミットする（privateのチェックを外す）
GitHub Pagesとして公開する内容が含まれているリポジトリは、
Privateリポジトリだと、外部から閲覧することができないため
「Public」でプッシュする必要があります。
④GitHub Pagesとして公開する設定を行う
１. ブラウザのGitHubサイトにアクセスし、
先ほど作成したリポジトリページに移動します。
（今回の場合は「portfolio」リポジトリ）
２. Settings（設定） から Pages を選択
３. その中にある、Sourceを「master」に設定し、「save」をクリック
４. 自動的にURLが発行される
公開されたURLを確認！
発行されたURLにアクセスし、ブラウザや携帯での表示を確認します。
GitHub Pagesの仕様上、ページが表示できるようになるまでに、少なくとも5分以上、場合によっては20分以上かかる場合があります。
もし1時間以上経過してもページが表示されない場合は、なんらかの問題が考えられるため、リポジトリやファイルを削除して、最初からやり直すことをお勧めします。
コードの修正をプッシュするときの注意点
GitHub Pagesの仕様上、pushしてから変更が反映されるまでにも20分以上時間がかかること、
1時間あたり10回までしか変更反映はされないことがあります。
通常の作業においてはローカル環境で問題ないかしっかり確認したあとに、リモートリポジトリへpushすることをお勧めします。
HTMLは表示されたが、CSSなどの反映がされない時
変更が反映されない場合は、ブラウザのキャッシュが影響している可能性があります。
その場合は、command + Shift + Rでスーパーリロード（キャッシュを無視したブラウザ更新）を行うことで反映される可能性があります。
まとめ
最後までご覧くださり、ありがとうございます。
今回はGit Hubの 「GitHub Pages」でポートフォリオを作成する手順をまとめました。
初学者のため、記入漏れや記述ミスがありましたら教えていただけると助かります。
こちらの記事がどなたかの参考になりましたら幸いです。