Nuxt.js+Tailwind CSS에서 포트폴리오 사이트를 만들고 Netlify에서 공개

안녕하세요, @y_temp4 입니다.

마지막 달부터 프리랜서 엔지니어로서 일하고 있습니다만, 일단 포트폴리오 사이트적인 것을 만들어 두는 편이 좋을까~라고 생각해 만들었습니다.

타이틀에도 있듯이, Nuxt.js 과 Tailwind CSS 를 사용해 개발해, Netlify 로 공개하고 있습니다.

사이트 : y로 MP4. 작은 m
GitHub: y-temp4/y-temp4.com

이번은 간단하게, 사이트를 만드는데 있어서 이용한 기술에 대해 소개할까라고 생각합니다.

Nuxt로 프로젝트 시작

Nuxt는 create-nuxt-app로 시작할 수 있으므로 편리합니다.

npx create-nuxt-app <my-project>

그리고는 적당히 필요한 패키지를 넣어 갑니다. 자신은 색 구성표에 open-color을 사용하고 싶었기 때문에 이것도 넣고 있습니다.

참고 - Tailwind CSS에서 open-color를 사용하기위한 설정 : 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에서도 비교적 고득점을 낼 수 있어서 좋았던~라고 생각하고 있습니다.

모바일

PC

Lighthouse

이번에 소개한 기술을 사용하면, 효율적으로 퍼포먼스가 나오는 사이트가 간단하게 만들 수 있는 것을 재차 실감했습니다! 여러분도 꼭 이 기회에 Nuxt 등을 이용하여 포트폴리오 사이트를 만들어 보는 것은 어떻습니까?

참고 - 이번에 공개한 포트폴리오 사이트의 리포지토리: y-temp4/y-temp4.com

사이고에게, 만약 이 기사가 참고가 되면 좋겠어 주실 수 있으면 기쁩니다 😄