【超初心者向け】GitHubを使ってみる② ～実践してみよう～
さて、前回の記事でGithubとは何かについて触れましたが、概要だけは何となく理解していただけたでしょうか？
そして、そのままProgateをやっていただいたのであればターミナルの使い方についてもざっくり理解できたかと思います。
ですのでこの記事では、Gitを使用してGitHubにファイルを共有する方法を書いていきます。
※この記事ではWindowsでの設定を主体としていますので、画像もそれに準じています。
GitHub / Gitのやり方
ざっくりとした順序としては、
この3～4工程だけです。
加えて、個人的にミスした箇所や注意点も補足して書いていきます。
ちなみに、Progateでこのレッスンをした方なら目にしたかと思いますが、
prog-8.com
prog-8.com
このコラムもめちゃくちゃ分かりやすいです。
（正直ググって色々探すよりも、このやり方が1番分かりやすい。。）
ですが、少し言葉足らずなところがあってうまく進まないところがあったので、この記事ではより丁寧に説明します。
先に使うコマンドを整理しておく
これは書くと長くなりそうだったので、自分のメモも兼ねてQiitaでまとめました。
この記事で使うのは、
- cd
- pwd
- git init
- git remote add origin URL
- git add
- git commit -m "メッセージ"
- git push origin master
くらいです。progateでCommand LineとGitのレッスンをしていればスムーズに進むと思いますが、それぞれの意味が怪しい方は良ければ上の記事を別タブで開きつつ進めていただければOKです。
それでは、流れに沿ってやっていきましょう！
GitHubでやること
まずは、GitHubのアカウントがないと始まりません。後でもいいですが、ここでやることは5分あれば終わりますので、最初にサクッとやっちゃいましょう。
公式はコチラから↓
https://github.co.jp/
アカウントの作成
アカウントの作成からやっていきましょう。
こういった登録に慣れている方は英語が分からなくてもスムーズに進むと思います。
GitHubに登録の緑のボタンを押すとこのページに遷移するので、必要情報を入力。
Next: Select a planを押して次へ。Freeの＄0を選びます。
これで完了です。
そのあと、メールが届くと思いますので、メールアプリ（私の場合はGmail）を開き、verify email address(メールアドレスの確認をしてね！ってことです。)を押して、確認をしてください。
あとはお好みですが、こちらのマイページからプロフィール画像なども設定できます。
リポジトリの作成
次に、登録が終わったところでリポジトリを作成して行きましょう。
(リポジトリは、ディレクトリを管理してくれる場所くらいのニュアンスで大丈夫です)
ちなみに、メールの確認をしていないとこういった画面が出てきます。終わらせてから続けましょう。
では、先ほどのマイページから、repositories(リポジトリ)を選択し、Newを押します。
(おそらく初めにこの画面に遷移していると思いますが)このような画面が出てきますので、
を入力しましょう。
その下のラジオボタンは、publicが公開、privateが非公開ということですので好きに選んでOKです。
あとはCreate Repositoryを押してリポジトリは完成です。
リポジトリの作成をしたら、このURLをコピーしておきます。(あとで使います)
これで一旦GitHubでやることは終わりました。
次にGitに移ります。
Gitでやること
次に、Gitでやることです。ここからが本番です！
私はWindowsを主体でこの記事を書いてますので、Windowsの設定に基づいていますが、MacOSだと初めからターミナルが使えますのでGitの設定が少し楽ですね。
Macでのやり方は先ほども紹介したProgateのこの記事の1～2が参考になります。
Gitのインストール
Gitのインストールはコチラから ↓
https://gitforwindows.org/
ダウンロードを押して、基本的にはNextを連打するだけです。
唯一、5番目のテキストエディタの選択だけ自身の使っているものを選んでおきましょう。
- Atomであれば、Use Atom As Git’s default editor
- Visual Studio Codeであれば、Use VisualStudioCode As Git’s default editor
を選びましょう。
(よく使われているこの2つを例に出してます)
ここまででインストールは完了しているはずです。
スタートメニュー ＞ 最近追加されたもの にGit Bashがあるかと思いますので、それを選択して次へ進みましょう。
Git Bashで必要なコマンドを入力
では、Gitでコマンド入力をしていきたいのですが、ここでの注意点がひとつあります。
それは、ホームディレクトリがデフォルトでc/Users/ユーザー名となっていることです。
ターミナル画面を確認して、pwdコマンドを実行してみてください。
私がつまずいたのはここで、このままGitHubとの連携を進めてもエラーが起こるのです。
それもそのはず、共有したいファイルはこの階層と全く違う場所にあるからです。
ですので、共有したいファイルがあるディレクトリを選ばないといけません。
今回はsample-siteというディレクトリにHTMLファイルを追加しています。
このルートディレクトリは、ドキュメント ＞ sample-site ＞ index.htmlです。
そのままの状態では共有したいディレクトリのあるドキュメントでなく、Windows(c;)が選択されている状態だということ。
なので、ホームディレクトリを変更しないといけません。
このように先に制作物などをHTMLやCSSで作ったという場合、そのファイルがどこに保存されているかを確認しておいてください。
それでは、ドキュメントをホームディレクトリにします。
デフォルトにするには設定を変えるのが良いのですが、それはこのサイトを参考にしてください。
今回はもっと簡単な方法を使います。
まず、ホームディレクトリにしたいものに右クリックをします。
そして、Git Bash Hereを押すだけ。
これでドキュメントをホームディレクトリにしたGitが立ち上がります。
これでようやく準備が整いました。
順番にコマンドを入力してGitHubにpushしていきましょう！
まず、pushしたいディレクトリまで移動しましょう。
$ cd sample-site/
最初のみ、ユーザー名とメールアドレスが必要です。なんでも構いません。
$ git config --global user.name "sample-tarou" $ git config --global user.email "メールアドレス"
次にgit Initです。このように表示されていたらOKです。
$ git init Initialized empty Git repository in C:/Users/ユーザー名/Documents/sample-site/.git/
次に、git remote~ですが、ここでGitHubのリポジトリ作成でコピーしたURLを使います。
$ git remote add origin https://github.com/GitHubで作成したユーザー名/sample-site.git
では、sample-siteに入ってあるindex.htmlをadd、commit、pushします。
$ git add index.html
$ git commit -m "Create index.html" [master (root-commit) a8d9972] Create index.html 1 file changed, 12 insertions(+) create mode 100644 index.html
$ git push origin master Enumerating objects: 3, done. Counting objects: 100% (3/3), done. Delta compression using up to 4 threads Compressing objects: 100% (2/2), done. Writing objects: 100% (3/3), 427 bytes | 213.00 KiB/s, done. Total 3 (delta 0), reused 0 (delta 0) To https://github.com/masa8wdg/sample-site.git * [new branch] master -> master
こんな感じです。
また、初めてであればpushしたときに、GitHubのログインを求められることがあります。
ログインすれば無事にpushできますので安心してください。
