エンジニアの履歴書ともいわれる、githubにコードやポートフォリオを掲載する方法。
自分なりに調べたので、やり方を復習がてらまとめます。
※githubでは静的なページしか動作しません。
データベース等を利用したサイトの場合は、別の方法を利用するようにしましょう。
Githubに公開する方法
事前に、アカウントの登録はできている前提で進めていきます。
公開予定のファイルも用意しておいてください。
Github右上あたりにある、＋マーク『New repository』をクリック。
新しいレポジトリを作成します。
Repository nameを入力し、Create repository
任意の『Repository name』 を入力しOKだった場合、下にある緑色の『Create repository』ボタンをクリックします。
Set up in Desktop
Githubのサイト公開方法には、コマンドラインを利用した方法と、Githubデスクトップから行う方法の２つがあります。
今回は、より簡単なデスクトップを使った方法を説明します。
初めての方はまず、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/レポジトリー名/ の形式となっています。
リンク部分をクリックすると、公開されているサイトを開くことができます。
※以上の方法で、できない場合や不明な点があったら下記のコメントにて気軽に質問してください。
コメント