Nuxt.jsをGitHubで管理する

Nuxt.js/Netlify/Contentfulでブログアプリを作るべく、環境構築を進めています。前回は、Nuxt.jsをインストールするまでを書きました。
今回は、Nuxtをインストール後にGitHubで管理しつつ、Netlifyと連動させたいと思いました。まずは、Nuxtを入れた後のGitHubで管理出来るまでを記載したいと思います。
> 前回の記事

1. Nuxt.jsをインストールしておく

https://note.com/youtarow/n/naebdabe3454c

2. GitHubに新たにリポジトリを作成

GitHubのアカウント作成
GitHubのアカウント作成などの説明は割愛します。
ご登録は下記にて行ってください。
https://github.co.jp/

リポジトリの作成

スクリーンショット 2020-09-03 16.14.20

GitHubへログインしましたら、「Repositories」> 「New」ボタンを押し下記のページへ進みましょう。

画像2

Repository nameDescriptionを記入したら他の選択はせずに、Create Repositoryを押して完了します。

画像3

上記のページへ進めたらリポジトリの作成に成功し、赤枠にはリモートURLが発行されます。
リモートURL:https://github.com/******/test-site.git

3. GitHubとローカルを連動させる

① ローカルリポジトリの作成
Nuxt.jsをインストールした際に、あらかじめ準備されているようですが念の為、初期化しておきましょう。(しなくても問題ないとは思います。。。)

ターミナルを開きNuxt.jsをインストールしているフォルダー内へ移動し、下記のコマンドを入力します。
例) cd /Users/ユーザー名/Desktop/任意フォルダー/プロジェクトフォルダー(Nuxtをインストールしているフォルダー)

// プロジェクトのファルダー内で下記を入力してください。

$ git init

コマンドが正常に動けば、.gitファイルが作成されます。

② リモートリポジトリへプッシュ

$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/******/test-site.git
$ git push -u origin master

※ git remote add origin [リモートURLをコピペしてください。]

画像4

GitHubページへ反映されていれば成功です。

4. SourceTree(GUI)でも管理できるようにしたい

SourceTreeをインストールしていない方は、下記からインストールしてください。
SourceTreeをインストール
> 参考サイト

SourceTreeを起動し、
新規 > 既存のローカルリポジトリを追加

スクリーンショット 2020-09-03 17.33.38

先ほどGitHubへ登録したフォルダーを選択しましょう。
例) /Users/ユーザー名/Desktop/任意フォルダー/プロジェクトフォルダー(Nuxtをインストールしているフォルダー)

スクリーンショット 2020-09-03 17.46.24

先ほどGitHubのリモートへpushした内容が反映されていれば成功です。

5. 最後に

今回は、GitHubでコードを管理するための記事を書きました。
このGitで管理するといったことは、プログラマーなら当たり前といったツールでもあるようなので、自身も早く使用に慣れるべく勉強中です。
Gitで管理するという工程は、今後Netlifyと連携させたいという狙いもあるので、まだ通過点的な記事となっています。
次回は、Netlifyとの連携の方法を記載できたらと思います。

いいなと思ったら応援しよう!