More than 5 years have passed since last update.

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

Posted at 2019-08-15

こんにちは、@y_temp4 です。

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

タイトルにもあるように、Nuxt.js と Tailwind CSS を使って開発し、Netlify で公開しています。

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

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

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

npx create-nuxt-app <my-project>

あとは適当に必要なパッケージを入れていきます。自分は配色に open-color を使いたかったので、これも入れています。

参考 - open-color を Tailwind CSS で使うための設定：Use open-color for Tailwind CSS

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

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

Tailwind CSS は Nuxt の公式モジュールがあり、nuxt-community/nuxt-tailwindcss を使って開発を進めていきます。

yarn add --dev @nuxtjs/tailwindcss

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

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

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

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

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

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

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

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

参考 - 今回公開したポートフォリオサイトのリポジトリ：y-temp4/y-temp4.com

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