a bd.me

내 개인 웹사이트

내 개인 포트폴리오 웹사이트는 조회수, 다크 모드 토글, 기어 목록, 정보 페이지 등이 포함된 MDX 블로그 게시물과 같은 기능을 포함하면서 단순하고 깔끔하게 디자인되었습니다.

기술 스택

백엔드:

• Next.js/타입스크립트
• MDX/Contentlayer(블로그 게시물)
• PlanetScale(데이터베이스)
• 프리즈마(ORM)

프런트엔드:

• Tailwind CSS(스타일링)
• 기수 프리미티브(헤드리스 UI 구성요소)
• 기수 UI 색상(색상 시스템)
• 프레이머 모션(애니메이션)

시작하기

컴퓨터에 Node.js v18.17.0+가 설치되어 있는지 확인하세요.

1. 설치 종속성 : npm install
2. 환경 변수 : .env.example 새 .env.local 로 복사합니다.
3. 데이터베이스 설정 : 데이터베이스 설정 참조
4. Prisma 설정 : npm install @prisma/client (아직 설치하지 않은 경우), npx prisma generate 실행하세요.
5. 개발 시작 : npm run dev . 그러면 자동으로 .contentlayer 파일이 생성되고 Next.js 개발 서버가 시작됩니다.

데이터베이스 설정

• PlanetScale 계정에 가입하세요
• PlanetScale에서 새 데이터베이스 만들기
• PlanetScale에서 제공하는 연결 문자열을 사용하여 프로젝트의 .env.local 파일에 있는 DATABASE_URL 환경 변수를 업데이트하세요.

전개

이 프로젝트는 Vercel에 빠르게 배포될 수 있습니다. Vercel 계정을 GitHub 저장소에 연결하기만 하면 Vercel이 자동으로 애플리케이션을 구축하고 메인 브랜치에 새로운 푸시를 할 때마다 배포합니다.

Vercel 프로젝트 설정에 프로젝트 .env 변수를 추가하세요.