GitHub Pagesを使って無料でサイトを公開しよう！【2021年度版】
この記事では、
「個人でWebサイトを作成し、実際にサイトを公開してみたい！」
という方の為に、「GitHub Pages」を使って無料でサイトを公開する方法を解説していきます。
実際に私もWebエンジニア転職に向けて自分のポートフォリオサイトをHTML, CSSで作成し、この方法で公開しました。
注意点としては、
HTML, CSS, JavaScript だけで作成したサイトであれば、これから解説する方法でアップロードが可能となりますが、HTML, CSS, JavaScrip 以外の言語を使ったサイトは公開することができません。
非常に簡単で、すぐにWebサイトを公開できますので、ぜひチャレンジしてみてください！
アカウント作成後、たったの3ステップで、しかも無料でWebサイトを公開できます！
GitHubのアカウントを作成する
私は既にアカウントを作成していましたので、GitHubアカウント作成の解説をされているおすすめの記事をご紹介します。
とても簡単な作業ですので、こちらの記事を参考にしてアカウントを作成してみてください。
GitHub Pagesを使ってWebサイトを公開する
※GitHubの個人画面のアカウント名や一部のリポジトリ名は個人情報の為、表示を控えさえていただいています。
ステップ1 : GitHubにリポジトリ(フォルダ)を作成する
「New」 をクリックします。
フォルダ名を決めます。(今回はportfoliositeとしました)
「Public」のみにチェックが入った状態で「Create repository」 をクリックします。
ステップ2 : 公開したいファイルや画像をアップロードする
「Create repository」 をクリックした後は、以下の画面に移動しますので、「uploading an exisiting file」をクリックします。
以下のページに移動しますので、こちらにアップロードしたいファイルや画像をドラッグアンドドロップします。
こちらはファイルや画像のアップロード最中の画面です。
以下の様にファイルがアップロードされます。
全てのファイルや画像をアップロードしたら、「Commit changes」 をクリックします。
ステップ3 : GitHub Pagesでアップロードしたファイルや画像を公開する。
「Commit changes」 をクリックすると、以下の画面に移動します。
「Settings」をクリックします。
「Settings」のページに移動しますので、「Pages」をクリックします。
「GitHub Pages」のページに移動しますので、「None」をクリックし、プルダウンで表示される「main」を選びます。
「main」をクリックすると、以下の表示になりますので、「Save」をクリックします。
「Save」をクリックすると、以下の様に公開されたリンクが表示されます。
遂にあなたのWebサイトが公開されましたので、表示されたURLをクリックして確認してみてください。
アップロードしたファイルがブラウザに表示されたら完了です！
学習のために、HTML, CSS, JavaScriptを使って色々なWebサイトを作成し、無料で手軽に公開してみましょう！
