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ファイルに表示しよう
1
  • コンテンツページ構築
  • /
  • #01
ブログアプリのページ設計とNuxt.jsの動的ルーティングについて理解しよう
2
  • コンテンツページ構築
  • /
  • #02
カテゴリーのコンテンツページを作成しよう【Nuxt.js×Contentful】
3
  • コンテンツページ構築
  • /
  • #03
カテゴリーに関連付くブログ記事一覧を表示しよう【Nuxt.js×Contentful】
4
  • コンテンツページ構築
  • /
  • #04
injectを使用して共通エラー処理メソッドを作成しよう【Nuxt×TypeScript】
5
  • コンテンツページ構築
  • /
  • #05
NuxtChildを使用してブログ記事ページを作成しよう【Nuxt.js×TypeScript】
6
  • コンテンツページ構築
  • /
  • #06
タグ一覧ページとタグ関連づく記事一覧を表示しよう【Nuxt.js×TypeScript】
7
  • コンテンツページ構築
  • /
  • #07
プライバシーポリシーページを作成しよう【Nuxt.js×TypeScript】
8
  • コンテンツページ構築
  • /
  • #08
@nuxtjs/i18nのインストールとセットアップ。ページタイトルの翻訳化【TypeScript】
1
  • NetlifyFunctionsを使った検索機能
  • /
  • #01
Netlify Functionsを使ってクエリを返す関数を作成しよう【Nuxt.js×TypeScript】
2
  • NetlifyFunctionsを使った検索機能
  • /
  • #02
Netlify Functionsプロジェクトをデプロイしよう【Nuxt.js×TypeScript】
3
  • NetlifyFunctionsを使った検索機能
  • /
  • #03
Nuxt.js × axiosセットアップ Netlify Functionsにリクエストを行う準備をしよう
4
  • NetlifyFunctionsを使った検索機能
  • /
  • #04
オリジン•CORS•プリフライトリクエストを理解する【Nuxt.js×Netlify Functions】
5
  • NetlifyFunctionsを使った検索機能
  • /
  • #05
Netlify Functionsを使ってフォームバリデーション機能を構築しよう【Nuxt.js】
6
  • NetlifyFunctionsを使った検索機能
  • /
  • #06
ツールバーに表示する検索フォームを作成しよう【Nuxt.js×TypeScript】
7
  • NetlifyFunctionsを使った検索機能
  • /
  • #07
検索ページを作成しよう【Vue propsとTypeScriptの書き方 解説】
8
  • NetlifyFunctionsを使った検索機能
  • /
  • #08
Netlify FunctionsからContentfulAPIリクエストを送ろう【Nuxt.js】
9
  • NetlifyFunctionsを使った検索機能
  • /
  • #09
検索ページに「もっと見る」ボタンを実装しよう【Nuxt.js×TypeScript】
1
  • ブログMarkdown対応
  • /
  • #01
@nuxtjs/markdownitのインストールとセットアップ【Nuxt.js×TypeScript】
2
  • ブログMarkdown対応
  • /
  • #02
Nuxt.js×markdown-it 外部リンクを別タブで開くプラグインを追加しよう
3
  • ブログMarkdown対応
  • /
  • #03
Nuxt.js×markdown-it 内部リンクをVueRouterで高速にページ遷移しよう
4
  • ブログMarkdown対応
  • /
  • #04
Nuxt.js×markdown-it アンカーリンクとブログ目次を自動生成しよう
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。