はじめに

ブログだったり、ポートフォリオだったり、なにかを作って公開したいと思うことってありますよね。でもレンタルサーバーやAWSはお金や学習コストがかかるからなぁと尻込みしている方も多いと思います。あぁーあ、お金は一切かけずに、簡単にネット上に公開出来る、そんな夢のような仕組みがあったらなぁーと思いますよね。

あるんです

Nuxt.jsには静的サイトジェネレータという機能が備わっており、自分のアプリケーションを静的化することが出来ます。そしてNetlifyというホスティングサービスを使えば無料で静的サイトを公開することが出来ます。さらにアプリケーションをGitHubで管理していれば、自動で静的サイトジェネレートを走らせ、自動でデプロイまで行ってくれるようになります。

この仕組みを使えば、変更分をGitHubにアップするだけでデプロイ作業まで自動で行ってくれるので、開発に集中出来、非常におすすめです。ぜひ環境を構築してみてこの便利さを体感してください。

前提条件

• GitもしくはGitHubの基本操作（PushやMergeなど）がわかる
• npxもしくはyarnがインストール済み

※Gitの知識はあればスムーズぐらいで必須ではありません。

環境イメージ

GitHub

まずはGitHubのアカウント登録やリポジトリの準備を行っていきます。

Step1. アカウント登録

GitHubのアカウント登録ページにてアカウントを作成してください。画面に従って入力していればそれほど難しいことはないと思います。

Step2. 新規リポジトリの作成

次にリポジトリの作成をします。下図を参考に新規リポジトリを作成してください。

Step3. リポジトリをClone

続いて作成したリポジトリをローカル環境にCloneします。コマンド実行時に入力するURLはGitHubのリポジトリのTOPページの下図の指しているところでコピー出来ます。

$ cd ~/your/workspace
$ git clone <リポジトリURL>

Nuxt.js

続いて実際に公開するNuxt.jsアプリケーションを準備します。

Step.1 アプリケーションの作成

以下のコマンドを実行してNuxt.jsアプリケーションを作成してください。作成する際にいろいろ聞かれるので、こちらの記事を参考に回答してください。

$ cd ~/your/workspace
$ yarn create nuxt-app <リポジトリ名>

Step.2 .gitignoreの設定

Nuxt.jsアプリケーションの中にはGitHubで管理すべきでないファイルも含まれていますので、それらをGitHub管理から除外するための.gitignoreを設定していきます。以下は最低限の設定になりますので、必要に応じて設定を追加していってください。

// .gitignore

.nuxt
node_modules
dist

Step.3 アプリケーションをPush

次に作成したアプリケーションをGitHubのリモートリポジトリにPushします。

$ cd ~/your/workspace/<リポジトリ名>
$ git add .
$ git commit -m "initial commit"
$ git push origin master

Netlify

Netlifyのアカウント登録からページの公開までを行います。

Step1. アカウント登録

Netlifyのアカウント登録ページにてアカウントを作成してください。外部サービスを選択出来るのでGitHubを選択してアカウント登録を進めてください。

Step2. 新規サイトの作成

Netlifyではプロジェクトを「Site(サイト)」という単位で管理します。まずは「New site from Git」から新規サイトを作成してください。ちなみにこの工程が終了しますとビルドとデプロイが行われ、GitHubにアップした内容は公開されますが、URLを知らないとまずたどり着くことはありませんので、気軽な気持ちで作業を進めてください。

• Owner: 初期値のままでOK
• Branch to deploy: どのブランチをデプロイするか。理由がなければMasterでOK
• Build command: デプロイ時のビルドコマンド。Nuxt.jsのデフォルトでよければyarn generate
• Publish directory: ビルド後のソースが入っているディレクトリ。Nuxt.jsのデフォルトでよければdist

対象のリポジトリが見つからない場合

リンク先でアクセスしたいリポジトリを選択してください。

Step3. 公開ページの確認

サイトを作成するとビルドとデプロイが行われサイトが公開されます。サイトのTOPページへ行き、公開ステータスが「Published」になるまで待って公開ページを確認してみます。


無事にページが公開されていることが確認出来ました。

さいごに

今回は全行程を進めるのに重きを置いていたので、アプリケーションは雛形のみになっています。これからこの雛形をどんどん拡張し、ブログやポートフォリオなどの自分オリジナルのアプリケーションを開発していってください。ちなみにこのブログも本記事と全く同じ環境で作られており、ほとんどお金はかかっていません。「papadays.com」の年間更新料が1,000円前後かかるぐらいです。開発、保守とやっていても本当に楽だなと実感することが多いです。また、静的サイトジェネレータは最近流行り真っ最中の技術でもあるので、触っておいて損のない技術だと思います。ぜひぜひNuxt.jsで楽しい開発ライフをお過ごしください。それでは今回はこのへんで。ではでは。