herohoroブログ

cloneした本家を自分のGitHubリポジトリへ追加する方法



🔄   2022-08-02

GitHubって慣れるまでもーわけ分からないですよね。

ネットに記事はあるものの専門用語がいまいち分からない。

コマンドで説明されても何が起きてるのか意味分からない。

そんな方の参考になればと思い作成してみました。

そもそもcloneとforkってどう違うんでしょう???

cloneとforkの違い

リモートリポジトリからcloneをすると、

PC上のディレクトリへ取り込まれます。

画像が読み込まれない場合はページを更新してみてください。

本家リモートリポジトリからcloneした状態

一方、

本家リモートリポジトリをforkするとPC上へは取り込まれません。

どこへ取り込まれるかと言うと……

GitHubリポジトリとして追加されます。

画像が読み込まれない場合はページを更新してみてください。

画像が読み込まれない場合はページを更新してみてください。

画像が読み込まれない場合はページを更新してみてください。

取り込まれた\(^o^)/

画像が読み込まれない場合はページを更新してみてください。

図にするとこんな状態です。

本家リモートリポジトリからforkした状態

もう少し深堀り

clone したという通知がオリジナル開発者に送られ、貢献者としての意思表示だと解釈される。

fork-する意味-github-には-fork-という機能があるfork-は-git

有志でバグを修正してcommitを本家に採用されると

Contoributorという項目に追加されます。

画像が読み込まれない場合はページを更新してみてください。

forkとcloneの違いを図解する

PC上に取り込むならclone。

本家リモートリポジトリからcloneした状態

GitHubリポジトリ内で自分のリポジトリを取り込むならfork。

本家リモートリポジトリからforkした状態

🤔
cloneしたらもうGitHubリポジトリへ追加できなくなるの???

clone後リモートリポジトリへ追加する

clone後にGitHubリポジトリへ追加できます\(^o^)/

clone済みのフォルダをVSCodeで開きます。

画像が読み込まれない場合はページを更新してみてください。

既にあるディレクトリをGitHubで管理する

GitHubでの準備

GitHubへアクセスし、新規リポジトリを用意します。

画像が読み込まれない場合はページを更新してみてください。

【create repository】をクリックすると…

Quick setupの画面へ移動します。

画像が読み込まれない場合はページを更新してみてください。

VSCodeで可視化

コマンド操作が苦手な私は極力見える化して進めています。

画像が読み込まれない場合はページを更新してみてください。

VSCodeの拡張機能にGit Graphという機能をふんだんに使うことでブランチの混乱を最小限にする作戦です。

リモートリポジトリのoriginブランチを作る

VSCode内のターミナルからGitHubにあったQuick setupを手がかりに

ひとまず1行目を打ってみると…

git remote add origin https://github.com/horomi-chan/easy-notion-blog.git
画像が読み込まれない場合はページを更新してみてください。
git remote add originを入力してもうまくいかない。

エラーになります。

リモートリポジトリのoriginブランチは既にあるそうです。

ここでダダハマりします。😂

原因は、

本家からcloneしたリモートリポジトリが残っていることから来ています。

試しにこのブランチからpushしても「あなた権限無いし💢」といったメッセージが表示されます。

使い慣れない方はここで「本家のブランチは消してはいけないのでは?」という先入観から沼にハマりはじめます。

念の為先程のcloneをした図を確認すると…

本家リモートリポジトリからcloneした状態

片道切符です。戻れません。本家へ影響を与えません。

\(^o^)/大丈夫🎶

消してしまいましょう。

画像が読み込まれない場合はページを更新してみてください。

左メニューのブランチアイコンからソース管理右端の【…】をクリックすると、

「リモート」という項目があるので「リモートの削除」をクリックしてください。

すると現在存在しているリモートブランチが一覧になって表示されます。

画像が読み込まれない場合はページを更新してみてください。

originただ1つなので、originを選択して消します。

見事originが消えました。

画像が読み込まれない場合はページを更新してみてください。

代わりにoriginの付いていない「main」ブランチが残されました。

そして左に「ブランチの発行」という青いボタンが出現します。

ここでやっと希望のoriginブランチを用意を登録できます。

git remote add origin https://github.com/horomi-chan/easy-notion-blog.git

追加してもGit Graphには反映されませんが、エラーメッセージも返ってきません。

静かに成功しています。

ブランチの発行も済ませておきます。

画像が読み込まれない場合はページを更新してみてください。

「もうあります」ってメッセージが表示されますが、

無視してもう一度【ブランチの発行】ボタンをクリックすると

ブランチアイコンが反応してGit Graphにも追加されます。

画像が読み込まれない場合はページを更新してみてください。

GitHubへ戻り⌘Rでリロードすると…

画像が読み込まれない場合はページを更新してみてください。

きたーーーーーー\(^o^)/

👾
GitHubの複数アカウントをVSCode上で切り替えるのがうまく行かずここだけメインアカウントで確認してます。

masterとmainって??

デフォルトのブランチがmasterからmainに変更されています。

米国ミネソタ州ミネアポリスで5月25日に発生した、警官が黒人男性を拘束し窒息死に至らしめた事件と、その動画がソーシャルメディアなどで拡散したことをきっかけに広がった人権運動を背景にしたものです。

GitHub、これから作成するリポジトリのデフォルトブランチ名が「main」に。「master」から「main」へ変更

GitHubのQuick setupにはmasterブランチを作成するコマンドがありますが、

これはmainブランチのことだと理解することにしました。

番外編:fork後ローカルリポジトリへ追加する

本家リモートリポジトリからforkした状態

PC上へ取り込む行為が【clone】なので、

ターミナルから

git clone https://github.com/otoyo/easy-notion-blog.git && cd easy-notion-blog

と打つとPC上へ取り込まれます\(^o^)/

fork後のリポジトリをcloneした状態

😂
こっち方が簡単….

まとめ

GitHub特有のclone・forkにスポットを当てて初期設定の方法について解説してきました。

どんな失敗をしても本家へ影響することは無いので、

思う存分試行錯誤できます。

初期設定直後は本家のcommitのみになっていて自分のリポジトリなのか否かが分かりにくくドキドキしますが、

【自分の名前/リポジトリ名】となっていれば自分のリポジトリです。

自分のリポジトリを用意して、本家を取り込むと…

こんな感じになります。

取り込む前のcommitは全て本家のコピーなので安心してくださいね\(^o^)/

カスタマイズしてcommitすると…

分岐後のブランチ上でcommitがどんどん増えていきます。

カスタマイズする際はローカル上で開発画面を使いながら行うと確認がしやすいです。

▶ README 「カスタマイズするには」

本家も日々進化しています。

追い抜かされることもしばしば。

抜かされたcommitを取り込むこともできます。

easy notion blogの機能追加を自分のリポジトリに取り込む方法

詳しい図解はこちら。

思う存分カスタマイズしてeasy-notion-blogを一緒に楽しみながらブログ生活を送れたら幸いです\(^o^)/\(^o^)/

📎
適用されているブロックの種類については随時こちらにまとめています。「supportされてる機能確認

未適用なブロックを使ってしまうとVercelでエラーになってしまうので注意してくださいね⭐

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/