この記事のターゲット

事前準備

Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。

はい。
Vue.jsのエコシステムであるVuexやVue Routerを簡単に利用できるようにしてくれているフレームワーク、という理解です。
今回はこのNuxt.jsを利用してHTML,CSS,JavaScriptを吐き出して静的サイトを作ります。

静的サイトをホスティングできるWebサービス。
GitHubと連携して自動デプロイも簡単です。
特にデプロイ時に実行するコマンドを指定することができるため、GitHub上にビルド後のファイルを置かなくて済むのがポイントです。

大まかな手順は以下の通り。

それでは行きましょう。

普通に用意してください。
特記事項なし。

npx create-nuxt-app <project-name>

質問はよしなに答えます。
処理が終わったら動作確認。

cd <project-name>
npm run dev

これで https://localhost:3000 に開発環境が立ち上がっているはず。
確認できたら一旦ctrl+cで落として、静的ファイルを出力してみます。

npm run generate

無事成功するとdistディレクトリが生成されているはず。
ここまで確認できたらGithubリポジトリにpushしてしまいましょう。

公式サイトからアカウントを取得します。（https://www.netlify.com/）

アカウントが取得できたら公開サイトの用意を始めます。
Sitesタブを開くと、「New site from Git」ボタンがあるのでクリック。
サービスの候補が出るので今回はGitHubを選択。
リポジトリの候補が出るので先ほど用意したリポジトリを選択します。

Production Branch、Build command、Publish directoryを入力するページが出るので以下の通りに設定します。

これで準備完了です。

すでにmasterブランチは最新の状態なので初回はマニュアルデプロイしましょう。

ちょーかんたん。
Nuxt.jsの簡単さもさることながら、Netlifyでのデプロイも簡単でとてもDX（developer experience）が良いです。

私がNuxt.jsとNetlifyで作成したものをおいていきます。
Netlifyでは独自ドメインの設定まで楽々ですのでぜひ試して見てください。