Posted at

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

スクリーンショット 2019-08-11 17.49.04.png

こんにちは、@y_temp4 です。

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

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

サイト:y-temp4.com

GitHub:y-temp4/y-temp4.com

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


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 でデザインする

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

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

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

yarn add --dev @nuxtjs/tailwindcss

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

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

Buttons - Tailwind CSS


Netlify でデプロイする

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

Configure Cloudflare DNS to Work with Netlify

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


参考:フォームを Netlify で使う

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

【Netlify】Forms機能を利用して問い合わせフォームを作成する - Qiita

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


さいごに

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


モバイル

スクリーンショット 2019-08-11 17.44.32.png


PC

スクリーンショット 2019-08-11 17.44.41.png


Lighthouse

スクリーンショット 2019-08-11 13.26.53.png

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

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

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