Github Pagesでポートフォリオを公開する方法

エンジニアの履歴書ともいわれる、githubにコードやポートフォリオを掲載する方法。

自分なりに調べて出来たので、やり方を復習がてらまとめます。

※githubでは静的なページしか動作しません。データベースなどを利用したサイトの場合は、別の方法を利用するようにしましょう。

Githubに公開する方法

事前に、アカウントの登録はできている前提で進めていきます。

公開予定のサイトファイルなども用意しておいてください。

Github右上あたりにある、+マーク『New repository』をクリック。

新しいレポジトリを作成します。

Repository nameを入力し、Create repository

任意の『Repository name』 を入力しOKだった場合、下にある緑色の『Create repository』ボタンをクリックします。

Set up in Desktop

Githubのサイト公開方法には、コマンドラインを利用した方法と、Githubデスクトップから行う方法の2つがあります。

今回は、より簡単なデスクトップを使った方法を説明します。

初めての方はまず、github Desktopをインストールしましょう。

『Set up in Desk top』をクリックし、リンク先のサイトでダウンロードできます。

ダウンロード後、再び同じ画面にて『Set up in Desk top』をクリックします。

すると、先ほどインストールしたGituhub Desktopが起動します。

既にインストールしていた人も、同じく『Set up in Desk top』をクリックすればOKです。

ファイルをドラッグ&ドロップ

起動しているGithub desktopに作成したポートフォリオなどが入っているファイルをドラッグ&ドロップします。

その後、『Add repository』をクリックします。

※ここで、注意などの警告が出た場合も、画面の指示通り、新しいリポジトリーとして作成してください。

Publish repository

ここまでに作成したレポジトリーをpushしましょう。

※プッシュ(push) :ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作。簡単言うとGithub内でのアップロードのこと

画面内にある、『Publish repository』をクリックします。

確認の画面でも、再び『Publish repository』をクリック

これで、pushが完了しました。

Open the repository page on Github in your browser

Github デスクトップ内の、Open the repository page on Github in your browserにある『View on Github』をクリックします。

ここをクリックするとブラウザのGithubページへ飛びます。

ここで、あなたがアップロードしたファイルの中身を見たり、変更したり、確認したり、ダウンロードすることができます

Danger Zone Change repository visibility

ここで、あなたが作成したレポシトリーがプライベートモードになっている場合、サイトのURLを見ることができません

歯車マークの『setting』をクリックし、最下部にある『Danger Zone』を確認します。

こちらの、『Change repository visibility』にて『This repository is currently private.』となっている場合、あなたのレポジトリーはプライベートなので公開できていません

『Change Visibility』ボタンをクリックし、ステータスを『make public』に変更しましょう。

その際に、あなたのレポジトリーのパスの一部を入力して確認する必要があります。

※上記の処理の後、再びサインインを求められる場合があります。その際、Github Desktopを起動しているとブラウザにてGithubアカウントにサインインできません。一旦Desktopの方を閉じてからサインインしましょう

Github Pages

setting画面にある『Github Pages』の項目に『Source』が出現しています。

こちらの初期設定である『none』を『master』に変更します。

横にある『save』ボタンをクリックして変更を保存します。

Your site is published at

ページを更新して、先ほどと同じく『Github Pages』を見ると、そちらにあなたのサイトURLが表示されます。

Your site is published at https://アカウント名.github.io/レポジトリー名/ の形になっています。

リンク部分をクリックすると、公開されているサイトを開くことができます。

※以上の方法で、できない場合や不明な点があったら下記のコメントにて気軽に質問してください。


メッセージ

CAPTCHA