Help us understand the problem. What is going on with this article?

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

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

y-temp4
フリーランスエンジニア。Webのフロントエンドが好きです。お仕事のご相談はTwitterのDMまで!
https://y-temp4.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした