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/
■ リポジトリの作成
GitHubへログインしましたら、「Repositories」> 「New」ボタンを押し下記のページへ進みましょう。
Repository name と Descriptionを記入したら他の選択はせずに、Create Repositoryを押して完了します。
上記のページへ進めたらリポジトリの作成に成功し、赤枠にはリモート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をコピペしてください。]
GitHubページへ反映されていれば成功です。
4. SourceTree(GUI)でも管理できるようにしたい
SourceTreeをインストールしていない方は、下記からインストールしてください。
> SourceTreeをインストール
> 参考サイト
SourceTreeを起動し、
新規 > 既存のローカルリポジトリを追加
先ほどGitHubへ登録したフォルダーを選択しましょう。
例) /Users/ユーザー名/Desktop/任意フォルダー/プロジェクトフォルダー(Nuxtをインストールしているフォルダー)
先ほどGitHubのリモートへpushした内容が反映されていれば成功です。
5. 最後に
今回は、GitHubでコードを管理するための記事を書きました。
このGitで管理するといったことは、プログラマーなら当たり前といったツールでもあるようなので、自身も早く使用に慣れるべく勉強中です。
Gitで管理するという工程は、今後Netlifyと連携させたいという狙いもあるので、まだ通過点的な記事となっています。
次回は、Netlifyとの連携の方法を記載できたらと思います。