Next.js 및 TailwindCSS를 사용하여 포트폴리오 웹사이트를 구축하는 방법

안녕 인터넷,
이번 블로그에서는 Next.js & TailwindCSS 기반의 포트폴리오 템플릿인 react-portfolio-template을 이용하여 개발자/디자이너 포트폴리오를 만들어 보도록 하겠습니다.

이 기사를 읽고 싶지 않다면 YouTube 동영상을 볼 수 있습니다.

시작하자

로컬로 설정

템플릿을 시작하려면 먼저 템플릿을 가져와 시스템에서 로컬로 실행해야 이 저장소를 복제할 수 있습니다.

git clone https://github.com/chetanverma16/react-portfolio-template

이 저장소를 복제한 후에는 몇 가지 종속 항목을 설치해야 합니다.

npm install

종속성을 설치한 후 next.js 서버를 실행할 수 있습니다.

npm run dev
이 단계를 수행하면 localhost:3000에서 다음과 같이 실행됩니다.



이제 우리는 다음 단계로 갈 수 있습니다.

일부 데이터 편집

이제 화면에 실행 중인 항목이 있으므로 데이터를 편집하고 이 포트폴리오를 필요에 맞게 맞춤화하겠습니다.

이제 홈 페이지 오른쪽 하단에 있는 버튼Edit Data을 클릭하거나 바로 localhost:3000/edit로 이동할 수 있습니다.

다음과 같은 GUI가 표시됩니다.



편집할 수 있는 많은 필드가 표시되며 다음과 같은 여러 섹션에 대한 여러 탭이 있습니다.

머리글 - 이 탭은 웹 사이트의 머리글을 편집하기 위한 것입니다

.

프로젝트 - 프로젝트 섹션을 편집합니다.

서비스 - 서비스 섹션을 편집합니다.

정보 - 정보 섹션을 편집합니다.

소셜 - 소셜 또는 개인 링크를 편집합니다.

따라서 필요에 따라 포트폴리오를 편집했으면 이제 이동하여 save 버튼을 클릭할 수 있습니다.

이것이 저장되면 홈 페이지( localhost:3000 )로 돌아갈 수 있습니다. 변경한 모든 내용을 볼 수 있으며 이제 단 5분 만에 맞춤 포트폴리오를 만들 수 있습니다.

블로그 데이터 편집

포트폴리오에 블로그가 있는 것을 원하지 않는 경우 localhost:3000/edit 페이지를 통해 숨길 수 있는 당사 포트폴리오에 블로그 페이지가 있다는 것을 눈치채셨을 것입니다.

그러나 그렇게 한다면 블로그를 편집하는 방법을 알고 싶을 것입니다.
따라서 포트폴리오에서 세 개의 데모 블로그를 볼 수 있도록 해 보겠습니다.
해당 블로그를 편집하려면 코드로 이동하여 _posts 폴더로 이동해야 합니다.markdown에 작성된 데모 블로그를 찾을 수 있으며 해당 블로그로 이동하여 편집을 시작할 수 있습니다.

새 블로그를 만들려면 새 마크다운 블로그를 만들고 블로그에 구조를 추가하기 위한 몇 가지 마크다운 변수를 추가하기만 하면 됩니다.

추가해야 할 변수는 다음과 같습니다.

---
date: '2022-06-10T18:30:00.000Z'
title: "Ok Let's See How this blog will turn out"
tagline: This is a Tagline If you want to add.
preview: >-
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
image: >-
  https://images.unsplash.com/photo-1656188505561-19f1a1b6cda8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80
keywords: "Keyword One, Keyword Two"
author:
  authorname: Author One
  authorimage: >-
    https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
readingtime: 3
---
// Content Goes Here

따라서 변수를 추가하고 블로그 콘텐츠를 추가한 후에는 파일을 저장하고 다시 로드할 수 있습니다localhost:3000. localhost:3000/blog에서 새 블로그를 볼 수 있습니다.

배포 중

포트폴리오가 완료되면 배포할 시간입니다.
이 포트폴리오를 배포하는 방법에는 여러 가지가 있습니다.

이 블로그에서는 Netlify를 통해 할 예정입니다.

가장 먼저 해야 할 일은 netlify.com으로 이동하여 로그인하거나 계정을 만드는 것입니다.

로그인하면 add new site를 클릭하여 새 사이트를 만든 다음 기존 프로젝트를 가져올 수 있습니다.

그런 다음 포트폴리오 템플릿을 가져오는 데 사용 중인 git 공급자를 클릭합니다.

이제 배포할 저장소를 선택하십시오

.

사이트 배포를 클릭합니다.

Netlify가 마법을 부리고 귀하의 사이트를 배포합니다 🚀.

이제 포트폴리오가 준비되어 실행 중입니다.


포트폴리오 템플릿 - https://github.com/chetanverma16/react-portfolio-template

여기까지 읽어주셔서 감사합니다.

이 기사가 마음에 드셨다면 다른 사람들도 찾을 수 있도록 ❤️를 해주세요.

더 자주 팁을 얻으려면 다음에서 연락하십시오.

저에게 연락하십시오:

Portfolio | Github | |