GitHub Pages로 SimonAKing-HomePage 개인 웹사이트 배포하기

SimonAKing-HomePage는 유체 애니메이션 배경, 반응형 디자인, 부드러운 페이지 전환을 특징으로 하는 현대적이고 세련된 개인 웹사이트 프로젝트입니다. 이 가이드에서는 GitHub Pages를 통해 이 홈페이지를 신속하게 배포하여 전문적인 온라인 공간을 구축하는 방법을 설명합니다.

사전 준비: 환경 및 도구

배포를 시작하기 전에 개발 환경이 다음 요구 사항을 충족하는지 확인하세요.

  • Node.js 설치 (v14 이상 권장)
  • Git 버전 관리 도구 설치
  • GitHub 계정 보유

프로젝트 클론

먼저, 프로젝트 코드를 로컬로 클론합니다.

git clone https://gitcode.com/gh_mirrors/homepag/HomePage
cd HomePage

로컬 미리보기: 효과 확인

배포 전에 로컬에서 미리보기하여 정상 작동을 확인하는 것이 좋습니다.

  1. 프로젝트 의존성 설치: 
    npm install
  2. 개발 서버 실행: 
    npm run dev
  3. 브라우저에서 http://localhost:3000에 접속하여 개인 웹사이트를 미리보기합니다. config.json 파일을 수정하여 개인 정보를 맞춤 설정할 수 있습니다.

프로젝트 빌드: 배포 파일 생성

미리보기 결과가 만족스러우면 다음 명령어를 실행하여 프로덕션 버전을 빌드합니다.

npm run build

빌드가 완료되면 프로젝트 루트 디렉토리에 dist 폴더가 생성되며, 이곳에 배포에 필요한 모든 정적 파일이 포함됩니다.

GitHub Pages 배포: 세 단계로 완료

1단계: GitHub 리포지토리 생성

  1. GitHub에 로그인하고, 오른쪽 상단의 "+" 아이콘을 클릭한 후 "New repository"를 선택합니다.
  2. 리포지토리 이름은 반드시 사용자명.github.io 형식으로 설정합니다 (예: johnsmith.github.io).
  3. "Public"을 선택하고 "Create repository"를 클릭합니다.

2단계: 리포지토리에 파일 배포

프로젝트의 dist 디렉토리로 이동하여 다음 명령어를 실행합니다.

cd dist
git init
git add -A
git commit -m "Initial commit"
git remote add origin https://github.com/사용자명/사용자명.github.io.git
git push -f origin main

3단계: GitHub Pages 설정

  1. 리포지토리의 "Settings" 페이지로 이동합니다.
  2. "Pages" 섹션으로 스크롤합니다.
  3. "Source" 드롭다운 메뉴에서 "Deploy from a branch"를 선택하고, "Branch"에서 "main"을 선택한 후 "/ (root)"를 선택합니다.
  4. "Save" 버튼을 클릭하면 페이지가 자동으로 새로고침됩니다.

몇 분 후, https://사용자명.github.io에 접속하면 배포된 개인 웹사이트를 확인할 수 있습니다!

고급 배포 팁

서브디렉토리 배포

기본 도메인이 이미 사용 중인 경우, 새 리포지토리 (예: blog)를 생성한 후:

  1. 프로젝트를 해당 리포지토리의 gh-pages 브랜치에 배포합니다.
  2. 리포지토리 설정에서 GitHub Pages 소스를 gh-pages 브랜치로 설정합니다.
  3. https://사용자명.github.io/리포지토리명으로 접속합니다.

사용자 정의 도메인

자신의 도메인을 보유한 경우, GitHub Pages 설정에서 사용자 정의 도메인을 추가하고, DNS 레코드를 적절히 설정하면 됩니다.

프로젝트 주요 기능

  • WebGL 유체 애니메이션 배경: WebGL-Fluid-Simulation을 사용한 인터랙티브한 시각 효과
  • 반응형 디자인: 모바일부터 데스크탑까지 다양한 기기 크기에 완벽하게 대응
  • 경량 아키텍처: 모든 CSS 및 JS 파일의 총 크기가 18.5KB 미만
  • 개인화 설정: config.json 파일을 통해 개인 정보를 쉽게 맞춤 설정 가능

자주 묻는 문제 해결

배포 후 페이지가 빈 화면으로 표시됨?

브라우저 콘솔에서 오류를 확인하세요. 일반적인 원인은 다음과 같습니다.

  • 리소스 경로 오류: config.json의 경로 설정이 올바른지 확인합니다.
  • 빌드 문제: npm run build 명령어를 다시 실행하여 최신 파일을 생성합니다.

애니메이션이 표시되지 않음?

config.json에서 intro.background 옵션이 true로 설정되어 있는지 확인하세요. 이 옵션은 WebGL 배경 애니메이션의 활성화 여부를 제어합니다.

태그: GitHub Pages Node.js Git WebGL 개인 웹사이트

6월 18일 01:52에 게시됨

인기 태그

©2026 괴물 클럽