GitHub 프로필/ GitHub Pages 레포지토리 생성 및 커스텀

 

GitHub 프로필 페이지 레포지토리 생성

 

1. 프로필 페이지 레포지토리 생성
   GitHub 로그인
   새 레포지토리 생성 시, 이름을 자신의 사용자 이름과 동일하게 설정
   

   

   Owner와 Repository name을 동일하게

2. README.md 커스텀
   'README.md' 파일에 프로필 소개, 기술 스택, 프로젝트 링크 등을 추가
   마크다운(Markdown)을 사용하여 텍스트, 이미지, 링크를 스타일링

 

 

GitHub Pages로 ".io" 페이지 생성

 

GitHub Pages

정적 웹사이트를 호스팅하기 위한 서비스

주로 개인 포트폴리오, 기술 블로그, 문서화 페이지를 공유하는 데 사용

 

 

1. GitHub Pages 레포지토리 생성
   Repository name을 '본인 github username.github.io'로 설정
   index.html파일을 생성하여 홈페이지의 내용 추가
2. GitfHub Pages 활성화
   Settings에서 Pages 섹션
   
   

 

 

Build and deployment

 

Source, Branch 설정해주고 Save하면

Site가 'https://.내_github_username.github.io' 도메인에서 활성화되고 있다고 뜸

 

 

 

*Main -root vs. Main -docs

 

 

Main -root

 

GitHub Pages는 main 브랜치의 루트 디렉토리(프로젝트 최상위 폴더)에 있는 파일들을 사용해 배포

- index.html 파일이 루트 디렉토리에 있어야 페이지가 정상적으로 로드됨

프로젝트 구조
├── index.html  <-- 이 파일이 반드시 루트 디렉토리에 있어야 함
├── style.css
├── script.js
├── README.md

• 간단한 정적 사이트(HTML/CSS/JS) 프로젝트
• 배포용 파일을 별도로 분리하지 않고 루트 디렉토리에서 바로 관리할 때 사용

 

Main -docs

 

GitHub Pages는 main 브랜치의 docs 디렉토리 안에 있는 파일들을 사용해 배포

docs폴더 안에 index.html 파일이 있어야 페이지가 정상적으로 로드됨

프로젝트 구조
├── README.md
├── docs/
│   ├── index.html  <-- 이 파일이 반드시 docs 디렉토리에 있어야 함
│   ├── style.css
│   ├── script.js

• 배포 파일(HTML/CSS/JS)을 프로젝트 소스 코드와 분리해서 관리하고 싶을 때 사용
• 대규모 프로젝트에서 배포 파일만 별도로 모아 관리할 필요가 있을 때 사용

 

 

**Node.js등을 사용해 정적 파일을 빌드하는 프로젝트라면, 빌드 결과물을 docs 폴더에 저장하도록 설정한 뒤 Main - docs를 선택

 

 

1. React 프로젝트 빌드- React 앱 생성 및 개발 완료 후

npm run build

build/ 폴더 생성, 배포 가능한 정적 파일이 들어감

 

 

2. build 폴더를 docs로 이름 변경

mv build docs

GitHub Pages는 기본적으로 docs/ 폴더를 사용해 배포할 수 있기 때문에, build 폴더를 docs로 바꿔줌

 

 

3. docs 폴더를 Git에 추가

git add docs
git commit -m "Add build files to docs for GitHubf Pages"

변경된 내용 Git 커밋

git push origin main

변경 내용 원격 레포지토리에 push

 

 

4. GitHub Pages 설정

1. GitHub 레포지토리 이동
2. Settings > Pages
   Main -docs 
   save