Nuxt.js+Tailwind CSSでポートフォリオサイトを作ってNetlifyで公開した

<img width="1431" alt="スクリーンショット 2019-08-11 17.49.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/2cab32f3-6def-5f07-15f4-ebd86118080b.png">

こんにちは、[@y_temp4](https://twitter.com/y_temp4) です。

つい先月からフリーランスエンジニアとして働いているのですが、一応ポートフォリオサイト的なものを作っておいたほうがいいかな〜と思って作りました。

タイトルにもあるように、[Nuxt.js](https://nuxtjs.org) と [Tailwind CSS](https://tailwindcss.com) を使って開発し、[Netlify](https://www.netlify.com) で公開しています。


サイト：[y\-temp4\.com](https://y-temp4.com/)
GitHub：[y-temp4/y-temp4.com](https://github.com/y-temp4/y-temp4.com)

今回は簡単に、サイトを作るにあたって利用した技術についてご紹介しようかと思います。

## Nuxt でプロジェクトを始める

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/ef083289-73c4-6004-4618-34f45a09d265.png)


Nuxt は create-nuxt-app で始められるので便利ですね。

```shell
npx create-nuxt-app <my-project>
```

あとは適当に必要なパッケージを入れていきます。自分は配色に [open-color](https://github.com/yeun/open-color) を使いたかったので、これも入れています。

参考 - open-color を Tailwind CSS で使うための設定：[Use open\-color for Tailwind CSS](https://gist.github.com/y-temp4/242ecea20ab3125fd1b7f1bbaecb119b)

## Tailwind CSS でデザインする

<img width="1069" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/38fea936-1502-6107-287a-b77faf7386e8.png">


Tailwind CSS はユーティリティファーストな CSS フレームワークです。

個人的には今個人で開発するなら**これを使っておけば間違いない**と思っているほど、使い心地が良いです（ただし自分で積極的にデザインをしたくない人にはあまり向いていないかも？）。

Tailwind CSS は Nuxt の公式モジュールがあり、[nuxt-community/nuxt-tailwindcss](https://github.com/nuxt-community/nuxt-tailwindcss) を使って開発を進めていきます。


```shell
yarn add --dev @nuxtjs/tailwindcss
```

このモジュールには purgecss など、便利な PostCSS のプラグインが同梱されています。

実際の開発では、以下のボタンサンプルなどを見るとどのようにスタイリングできるかが参考になるでしょう。

[Buttons \- Tailwind CSS](https://tailwindcss.com/components/buttons/)

## Netlify でデプロイする

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/acb7e878-ba92-8599-65c2-967a5e43dbd2.png)


サイトが完成したら、Netlify へデプロイを行いました。自分はドメインを CloudFlare で管理していた関係で、以下の記事が設定の参考になりました。

[Configure Cloudflare DNS to Work with Netlify](https://stevepolito.design/blog/configure-cloudflare-dns-to-work-with-netlify/)

Netlify は機能が豊富で、かつシンプルに扱えるのでポートフォリオサイトの公開にはうってつけだと思います。

### 参考：フォームを Netlify で使う

サイトにお問い合わせフォーム的なものを載せたかったので、Netlify が提供しているフォーム機能を利用しました。

[【Netlify】Forms機能を利用して問い合わせフォームを作成する \- Qiita](https://qiita.com/NaokiIshimura/items/bce2f0b865ec1bc16a53)

バックエンドの実装を行うことなく、フロントエンドだけでフォームを実装できるのは非常に便利でした！しかもメールや Slack 等への通知も行ってくれるので、無料枠での利用（執筆時点で月 100 件までは無料）なら何の問題もなく利用できそうですね。

## さいごに

ちなみに、軽量なサイトなので当たり前といえば当たり前ですが、PageSpeed Insights や Lighthouse でもわりと高得点を出せてよかったな〜と思っています。

### モバイル
<img width="387" alt="スクリーンショット 2019-08-11 17.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/5e57a66f-7d1b-6479-bb14-7be72a5bfa0e.png">

### PC
<img width="385" alt="スクリーンショット 2019-08-11 17.44.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/cfe9fae1-1dc2-8904-d4ee-26a492f6c38e.png">

### Lighthouse
<img width="775" alt="スクリーンショット 2019-08-11 13.26.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90682/300fcd80-f23b-3c5b-b5aa-a97e0770f07a.png">

今回紹介した技術を使えば、効率よくパフォーマンスの出るサイトが簡単に作れることを改めて実感しました！みなさんもぜひ、この機会に Nuxt 等を利用してポートフォリオサイトを作ってみてはいかがでしょうか？

参考 - 今回公開したポートフォリオサイトのリポジトリ：[y-temp4/y-temp4.com](https://github.com/y-temp4/y-temp4.com)

さいごに、もしこの記事が参考になったらいいねしていただけますと嬉しいです😄