※この記事について
現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。
連載記事はマガジンにまとめています。こちらをご覧ください。

ポートフォリオサイト作成チャレンジ中です。最近はVueに興味があったのですが、
『Nuxt.js利用すると便利だよ』
と教えてもらったのでそれならばやってみようかなと思いNuxt+Netlifyでチャレンジしてみることにしました。

プロジェクトの作成

まずはプロジェクトのフォルダを作成します。今回は『port』というフォルダを作りました。

vue init nuxt-community/starter-template port

※上記「port」の部分はご自分のフォルダ名に変更してください。

すると、下記3点を聞かれます。

*Project name* 
*Project description* 
*Author* 

こちらはそのままEnterキーを押してもらって大丈夫です。

こちられで『port』フォルダが作成されます。作成したportフォルダに移動し、下記コマンド実行します。

次に、パッケージのインストールを行います。

yarn

こちらでサイトは見れる状態になります。以下のコマンドで起動します。

yarn dev

ちょっと驚きなのですが、これでサイトが見れるようになります。下記のように表示されますので

 READY  Listening on http://localhost:3000

表示されたURLをブラウザで開きます。（3000の部分は異なる可能性あります。）すると、かきのような画面が表示されます。

表示されれば完成です。早いし簡単！

フォルダをGitHubにプッシュする

次に、ローカルのフォルダをGitHubにプッシュします。Netlify利用のためにGitHubにアップすることが必須だからです。
（厳密にはGitHub出なくても良いですが、ここではGitHubを利用します。）

レポジトリの作成

まずはGItHubのマイページに移動し、「Repositories」タブをクリックします。その次に「New」ボタンをクリックします。

すると、レポジトリ作成画面が表示されるので、「Repository name」に記入し「Create repository」をクリックします。

これでレポジトリが作成されました。

ローカルファイルをGitHubにアップロード

アップロードするフォルダに移動し（今回の場合は「port」フォルダ）、下記実行します。

git init

ファイルをコミットします。

git add .
git commit -m "Initial Commit"

先ほど作成したレポジトリをリモートに指定します。

git remote add origin https://github.com/アカウント名/レポジトリ名

「アカウント名」にはあなたのGitHubアカウント名、「レポジトリ名」は先ほど作成したレポジトリ名を記入します。

最後にプシュして完成です。

git push -u origin master

これでGitHubにファイルがアップされました。

Netlifyの設定

次にNetlifyの設定に移ります。まずはNetlifyのサイトを開きます。

ログインしてマイページに行くと、「New site from Git」というボタンがあります。

こちらをクリックします。

「Create a new site」という画面が表示されます。
今回は「GitHub」で設定するので「GitHub」を選択します。

GitHubと連携画面が表示されるので、連携します。
すると、連携するレポジトリが表示されるので、先ほど作成したレポジトリを選択します。

すると、下記デプロイ設定の画面が表示されます。

今回は
Branch to deploy は「master」のまま
Build command には「yarn generate」
Publish directory には「dist」
を記入します。

記入したら「Deploy site」をクリックします。

すると、下記画面が表示されます。

「Site deploy in progress」ということでしばらく待ちます。ドキドキや。。。

しばらく待つと、下記画面に変わります。

うまくデプロイできたようです！表示されているURLをクリックしますと。。。

↑のように、ローカルの時と同じ画面が表示されます！

と、いうことで【Nuxt+Netlify で環境構築編】は完成です。これからNuxtのファイルをいじって色々変えていきたいと思います！
最終的には下記のようなサイトにする予定。

（手書きで汚くてもアップして行くストロングスタイル）

おまけ

おまけ１：Bulmaの導入

CSSフレームワーク、Bulmaもついでに導入して見ました。

下記実行します。

yarn add bulma

追加されたbulmaを追加するため、nuxt.config.jsに下記追記します。
（追記場所は、 「head: { }」内です。）

modules: [
   '@nuxtjs/bulma'
],

おまけ2：vue-markdownの導入

記事をMarkdown出かけるように、vue-markdownを導入しました。

yarn add vue-markdown

これでMarkdownでの記載が可能となります。

マークダウン サンプル↓

<vue-markdown>
# マークダウンで記載します。
- 欲しいページ
  - 自己紹介ページ
  - 制作実績
  - 仕事内容
  - お問い合わせ
  - note
</vue-markdown>
<script>
import VueMarkdown from 'vue-markdown'
export default {
  transition: 'slide-left',
  components: {
    VueMarkdown
  }
}
</script>

表示サンプル↓

以上です。

参考サイト

下記サイトを参考にさせていただきました！ありがとうございました！