CodeSandboxとGitHubの連携

この記事では、CodeSandboxにて作成したファイルをGitHubのリポジトリに保存する方法を紹介
なお、GitHubアカウントは作成済みであるものとする。

1.CodeSandboxにアクセスして、Sign inをクリックする。

2.Sign in with GitHubをクリックする。

3.Authorize codesandboxをクリックする。

4.GitHubタブを開き、リポジトリ名を入力、Create nwe repository on GitHubをクリック

5.自分のGitHubアカウントにリポジトリ作成中のポップアップが表示されます。

6.GitHubにリポジトリが作成されていることを確認する。

CodeSandboxのファイルを変更し、変更内容をGitHubに同期する場合、フォークする必要がある。

試しにindex.jsファイルのh1タグ内の文字を「Hello Vanilla!」から「Hello Vanilla! fix!!」に変更してみる。
[Fork]をクリックします。

８.GitHubタブを開く、赤文字で「Save your files first before exportingと」表示される場合、cmd + Sで保存しておく必要がある。保存すると赤文字が消える。その後、Link Sandboxをクリック

9.ファイルに変更があると、Githubタブに青丸のマークが付く、Githubタブをクリックしてみる。

11.Summary(required)には変更内容の概要を入力
「Commit directly to the main branch」→リポジトリのmainブランチにコミットを直接作成
「Create branch ○○○○ for the commit and start a PR」→Pull Requestを開始
※赤文字で「You have unsaved file」表示される場合、cmd + Sで保存が必要

12.Summary(required)に「h1タグ変更」と入力して、「Commit directly to the main branch」にチェックを入れて、「Commit changes」ボタンを押す。

13.自分のGitHubアカウントの対象のリポジトリに反映されていることを確認。