GitHub 페이지에 도시락 배포

안녕 친구들?

이 글에서는 이렇게 멋진 도시락 같은 포트폴리오를 만들어 GitHub 페이지에 배포하여 전 세계와 공유할 수 있도록 하겠습니다.

그럼 나만의 것을 만들 준비가 되셨나요?

1️⃣..2️⃣..3️⃣..가자 ?

노트북을 들고 IDE를 열고 제작을 시작해 보세요 ?

---

여기 내 도시락이요 ?

React, Typescript, 프레이머 모션 및 tailwind CSS를 사용하여 제작되었습니다.

@tomisloading이 공개한 원래 도시락 그리드 코드는 다음과 같습니다

hover.dev에서 도시락 공개

구성요소에서 영감을 얻어 맞춤설정하고 GitHub 페이지에 배포했습니다.

---

도시락을 만드시겠습니까?

간편한 4단계로 도시락을 만드는 방법은 다음과 같습니다.

1단계️⃣

• 이 저장소를 복제하세요.

2단계️⃣

• npm install을 실행하여 필요한 모든 패키지를 설치하세요.

3단계️⃣

• src/data/profile.json 파일을 편집하여 필요에 맞게 도시락을 맞춤화하세요.

4단계️⃣

• npm start를 실행하고 실제로 작동하는 모습을 확인하세요.

---

Github 페이지에 배포하시겠습니까?

gh-pages 패키지를 사용하여 도시락을 배포할 수 있습니다.
배포를 위한 단계별 가이드는 다음과 같습니다.

1. 저장소 만들기 ?

   • 사용자 페이지의 경우: username.github.io라는 저장소를 생성하세요.
   • 프로젝트 페이지의 경우: username.github.io/project라는 이름의 저장소를 생성하세요.

2. React 앱 코드 추가 ➕

   • 위 가이드에 따라 도시락을 만든 다음 저장소에 코드를 추가하세요.

3. package.json에서 홈페이지 수정 ✏️

   • 홈페이지 키 추가:

    "homepage": "https://username.github.io/"
   

   또는
   

    "homepage": "https://username.github.io/bento"
   

4. 원격 저장소를 변경하시겠습니까?

   • 로컬 저장소를 GitHub 저장소에 연결합니다.

    git remote add origin https://github.com/username/repository-name.git
   

5. Push React 앱 ⬆️

   • 앱 구축 및 배포:

    npm run build
    npm run deploy
   

6. GitHub 페이지 구성 ⚙️

   • GitHub의 저장소 설정으로 이동하세요.
   • "GitHub Pages" 섹션에서 소스를 gh-pages 브랜치로 설정하세요.

이렇게 하면 Bento가 GitHub 페이지에 배포됩니다.

---

마감입니다! 이제 GitHub 페이지에 맞춤형 도시락 포트폴리오를 구축하고 배포했습니다. 잘하셨습니다! ??

당신의 도시락 포트폴리오를 아래 댓글과 소셜 미디어에 공유하는 것을 잊지 마세요. 주목을 받는 좋은 방법입니다! ?

위 내용은 GitHub 페이지에 도시락 배포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!