Zenn
⚙️

【Git＆GitHub】GitとGitHubの基本とVScodeからGitHubへプッシュする方法

2024/07/13に公開
Git
GitHub
VS Code
repository
dvcs
tech

Gitとは

分散型バージョン管理システム（DVCS：Distributed Version Control System）とは

・ソフトウェアの変更履歴を管理する方法の一つ。
・各開発者が完全なリポジトリのコピーを持たせて管理を行う。（分散させる）

Gitの仕組み


Gitのイメージ図

  • 図の外側にあるローカルリポジトリで変更を保存する。
  • 図の中心にあるリモートリポジトリ（中央リポジトリ）に変更を保存する。

例）ローカル環境で以下のようにファイルを記述しており、それを変更したとしましょう。

変更前
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Django App{% endblock %}</title>
</head>
<body>
    <div>
        <main">
            {% block content %}
            {% endblock %}
        </main>
    </div>
</body>
</html>
変更後（スタイルを調整した）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Django App{% endblock %}</title>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen flex flex-col">
        <main class="flex-1">
            {% block content %}
            {% endblock %}
        </main>
    </div>
</body>
</html>

上記のようにファイルを変更した場合は、それをまずローカルリポジトリ（図の外側）へ保存し、それをリモートリポジトリ（図の中心）へ保存するということになる。この変更、保存、リポジトリの作成などをターミナルで実行するためにgitコマンドがある。

GitHubとは

実践編（VScodeでファイルを作成済み）

１．Gitのインストール

1-1: 以下のURLへアクセスし、「Download for Windows」をクリックし、インストールを行う。

https://git-scm.com/

1-2: インストールされたかをターミナルから確認する。

git --version
出力結果
$ git --version
git version 2.43.0.windows.1

1-3: gitの初期設定を行う。

ユーザーネームを設定
git config --global user.name <username>
出力結果
$ git config --global user.name pyusuket
$ git config --global user.name
pyusuket
E-mailを設定
git config --global user.email <E-mail>

1-4: 初期設定が反映されているか確認する。

git config --listコマンドを実行する
git config --list
出力結果
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
http.sslbackend=openssl
core.autocrlf=true
core.fscache=true
core.symlinks=false
pull.rebase=false
credential.helper=manager
credential.https://dev.azure.com.usehttppath=true
init.defaultbranch=master
user.name=-----
user.email=-----@---.com
core.repositoryformatversion=0
core.filemode=false
core.bare=false
core.logallrefupdates=true
core.symlinks=false
core.ignorecase=true

２．リモートリポジトリの作成

2-0:Githubのアカウントを作成

https://github.co.jp/

2-1:GitHubにログインし、右のアイコンをクリックし、「Your repositories」をクリック。

2-2:「New」をクリック。

2-3: 必要な情報を入力後、「Create repository」をクリックする。

2-4: リモートリポジトリが作成完了画面を確認する。


ローカルリポジトリが存在しない場合は上段の処理を存在する場合は下段の処理を行う

３．ローカルリポジトリの作成

3-1: 以下の処理の上2行を実行する

ターミナルにて
echo "# <ファイル名>" >> README.md

git init

４．変更の反映

4-1: 以下の処理の下4行を実行する

すべてaddされるように変更している。
git add .
コミットメッセージが見やすいよう変更している。
git commit -m "[Start] first commit"

git branch -M main

git remote add origin https://github.com/ユーザーネーム/ファイル名.git

git push -u origin main

4-2: Githubにログインする


4-3: ローカルリポジトリからリモートリポジトリへプッシュされたか確認する。

ターミナル上の結果
$ git push -u origin main
info: please complete authentication in your browser...
Enumerating objects: 75, done.
Counting objects: 100% (75/75), done.
Delta compression using up to 8 threads
Compressing objects: 100% (72/72), done.
Writing objects: 100% (75/75), 42.38 KiB | 1.37 MiB/s, done.
Total 75 (delta 7), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (7/7), done.
To https://github.com/pyusuket/test-python.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

Discussion