文系Webエンジニアの技術メモとたまに旅のメモ

未経験文系エンジニアとして働いてます。アウトプットとして簡単に技術メモを残していきます。たまに旅関係のも趣味で残していこうと思ってます。

【GitHub/2020年6月更新/初心者向け】コマンド不使用!既存コードをGitHubに公開する方法!

今回はGitHubリポジトリの作成から既存コード(資材)を公開するまでの手順を記していきます。
gitのコマンドを使用せずに、画面で全て行えるので、gitに慣れていない方は参考にしてみてください。

1.事前準備

GitHubにあげるための資材
GitHubのアカウント

アカウント作成をまだ行なっていない方はこちらの記事を参考にして見てください。

44igarashi.hatenablog.com

2.新規リポジトリの作成

GitHubにログインをしましょう。
ログイン後、もしくは会員の新規登録が完了したらこちらの画面が表示されます。
今回は、新しくリポジトリを作成していきましょう。
「Create a ripository」を選択します。

f:id:igarashi44:20200627214449p:plain

リポジトリの作成画面が表示されます。

Repository name:任意のリポジトリ名を入力しましょう。
Description:任意の説明があれば入力しましょう。
Public:ソースコードを公開する場合はこちら (今回はこちらを選択)
Private:ソースコードを非公開にする場合はこちら

入力が完了したら「Create repository」をクリックします。

f:id:igarashi44:20200627214721p:plain

これでリポジトリの作成が完了しました。
左上に表示されているのが、今回作成したリポジトリです。

3.ファイルのcommit

既存コードをこのリポジトリにPushするために「uploading an existing file」をクリックします。

f:id:igarashi44:20200627224402p:plain

ファイルの選択画面が表示されます。

まず、今回あげたいファイルを選択します。
ドラック&ドロップでも出来ますが今回は、「choose your files」をクリックします。

f:id:igarashi44:20200627223815p:plain

今回は「test.php」ファイルを選択しました。
選択されたファイルを間違えてしまった場合は、ファイル右に表示されている「x」をクリックしましょう。

Add files via upload:commitするファイルの内容を書きましょう。
          なぜこの修正をしたかなど、ソースコードを見なくても分かる内容にします。
Add an optional extended description...:詳細がある場合は、こちらに書きましょう。

入力が完了したら、「Commit changes」をクリックします。

f:id:igarashi44:20200627224500p:plain

commitが成功しました。
こちらに、commitした内容が一覧表示されます。
commitしたファイルの詳細を見る場合は、「initial commit」をクリックします。

f:id:igarashi44:20200627224201p:plain

先程入力したcommitの内容とファイルの詳細が表示されます。

f:id:igarashi44:20200627225141p:plain

追加でファイルcommitしていきましょう。

commitの一覧が表示されていた画面に戻ります。
「Add file > Upload files」をクリックします。

f:id:igarashi44:20200627225426p:plain

先程と同じやり方で、追加でcommitするファイルを選択しましょう。

f:id:igarashi44:20200627225554p:plain

「index.html」ファイルを選択しました。
Add files via uploadの内容だけ入力し、「Commit changes」をクリックします。
branchに関しては今回は気にせずやっていきましょう。

f:id:igarashi44:20200627225813p:plain

今回と先程commitした内容が一覧表示されました。
ファイルの修正や追加があったらこのような手順で行なっていきましょう。

f:id:igarashi44:20200627225842p:plain

4.公開する方法

続いて、「Settings」をクリックします。
現時点では、まだcommitした内容は公開されていない状態なので、
設定をして公開できるようにします。

Settings画面の最下部辺りまでスクロールし「GitHub Pages」項目を表示します。

Sourceのプルダウンを「master branch」に変更します。

変更後、画面が更新されURLが表示されます。

f:id:igarashi44:20200627230234p:plain

URLをクリックすると、画面に表示されます。

f:id:igarashi44:20200627230342p:plain

他の人に見せたい時は、こちらのURLを共有しましょう。


これでGitHubに既存コードを公開するまで出来ましたね!
公開することによって、何か反応があったり、面接で紹介出来たりするので
ぜひアカウントを作成して公開までして見ましょう!