Nuxt.jsプロジェクトをGitHubにPushしよう
  • 2021.12.27に公開
  • ブログ構築TS
  • 1. Nuxt.js×TypeScript開発環境構築
  • No.2 / 3

この記事で達成すること

Nxutプロジェクトにレイアウトファイルを導入し、GitHubにPushします。

Nuxtプロジェクトディレクトリを追加する

前回インストールしたパッケージnuxt-create-appでは、Nuxtを動かす最小のディレクトリを用意します。このままではNuxtが用意している機能をフルに活用できません。

そこで、Nuxtが予め用意しているディレクトリを作成します。

ターミナルから、プロジェクトディレクトリ直下で下記コマンドを実行してください。

% mkdir assets layouts middleware plugins

Nuxt.jsのディレクトリ構成 - Nuxt.js

作成後のNuxtプロジェクトの構成は以下のようになります。

% ls -1
README.md
assets
components
jest.config.js
layouts
middleware
node_modules
nuxt.config.js
package.json
pages
plugins
static
store
test
tsconfig.json
yarn.lock

レイアウトファイルを作成する

Nuxtのレイアウトファイルは、表示するページの共通部品を設置するファイルとなります。

ページファイルの土台となるファイルですね。

レイアウトファイルは、layoutsディレクトリ以下で管理します。

default.vueを作成する

layoutsディレクトリ以下に、default.vueを作成します。

default.vueは、ページでレイアウトが何も指定されていない場合に、自動で読み込まれるベースレイアウトファイルとなります。

% touch layouts/default.vue
% ls layouts

default.vue

これで現在のpages/index.vueには、default.vueのレイアウトが使用されるようになりました。

default.vueを編集する

default.vueを仮編集します。

layouts/default.vue
<template>
  <div>
    layouts/default.vue
    <nuxt />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'DefaultLayout'
})
</script>
  • <nuxt /> ... このタグの場所にpagesディレクトリのコンテンツが表示される。
  • <script lang="ts"> ... langtsを指定することでTypeScriptが使用可能。

ブラウザで確認しよう

Nuxtを起動して、

% yarn dev

localhost:3000にアクセスすると、default.vueの文字列が表示されいています。

レイアウトファイルの設定がうまくいったことが確認できました。

2021-12-27 11-51-44

ローカルGitにコミット

ローカルGitにコミットします。

% git add -A
% git commit -m "Created nuxt project"

GitHubにPushする

ここまでの変更をGitHubにPushします。

GitHubへのSSH接続については、下記記事をご覧ください。

【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく

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

https://github.com/newから、GitHubに新しいリポジトリを作成します。

  • Repository nameを入力
  • Public(一般公開)or Private(非公開)を選択
  • Create repositoryボタンより作成

2021-12-27 11-55-30

リモートリンクを取得

  • SSHを選択して、
  • コピーボタンよりリモートリポジトリのURLをコピー

2021-12-27 11-59-15

ローカルGitにPush先を追加する

ローカルGItのoriginに、リモートリポジトリURLを追加します。

% git remote add origin <コピーしたSSH>

# 筆者の場合
% git remote add origin git@github.com:andou0/demo-blog-v2.git

追加できたか確認します。

% git remote -v

origin	git@github.com:andou0/demo-blog-v2.git (fetch)
origin	git@github.com:andou0/demo-blog-v2.git (push)

GitHubにPushする

それではGItHubにPushしましょう。

初回Pushのみ、--set-upstreamオプションを付与します。

% git push --set-upstream origin master
  • --set-upstream origin master ... リモートoriginにmasterブランチをpushする設定。次回以降は省略可能でgit pushを行うと、自動でoriginにmasterブランチがpushされる。

リモートリポジトリを確認しよう

GitHubのリポジトリを確認してください。

NuxtプロジェクトがPushされました。

2021-12-27 12-25-30

今回の作業は以上です。

次回は?

Nuxt.jsでTypeScriptを扱いやすくするパッケージ、nuxt-property-decoratorをインストールします。

どうぞお楽しみに。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。