GitHub Pages 사용 가이드

 

GitHub Pages 사용 가이드

GitHub Pages는 GitHub 저장소에서 직접 정적 웹사이트를 호스팅할 수 있게 해주는 강력한 기능입니다. 개인 프로젝트, 포트폴리오, 블로그 등 다양한 용도로 활용할 수 있습니다. 이 글에서는 GitHub Pages의 개념부터 실제 사용법까지 상세히 알아보겠습니다.

GitHub Pages란?

GitHub Pages는 GitHub에서 제공하는 무료 호스팅 서비스입니다. HTML, CSS, JavaScript 파일을 GitHub 저장소에 올리면 자동으로 웹사이트로 게시해줍니다. 주요 특징은 다음과 같습니다:

• 무료 호스팅
• 간편한 설정
• 버전 관리 기능
• 커스텀 도메인 지원
• HTTPS 보안

GitHub Pages 사이트 종류

1. 사용자/조직 사이트: username.github.io 형식의 URL로 제공
2. 프로젝트 사이트: username.github.io/repository 형식으로 특정 프로젝트용

GitHub Pages 시작하기

GitHub Pages를 시작하는 방법을 단계별로 알아보겠습니다:

1. GitHub 계정 생성
2. 새 저장소(repository) 만들기
3. 웹사이트 파일 업로드
4. GitHub Pages 활성화
5. 웹사이트 확인 및 커스터마이징

상세 사용 방법 (30단계)

1. GitHub.com에 접속합니다.
2. 우측 상단의 "Sign up" 버튼을 클릭하여 계정을 생성합니다.
3. 이메일 주소, 비밀번호, 사용자명을 입력합니다.
4. 이메일 인증을 완료합니다.
5. GitHub 대시보드에 로그인합니다.
6. 우측 상단의 "+" 아이콘을 클릭하고 "New repository"를 선택합니다.
7. 저장소 이름을 입력합니다 (예: username.github.io).
8. 저장소를 public으로 설정합니다.
9. "Initialize this repository with a README" 옵션을 체크합니다.
10. "Create repository" 버튼을 클릭합니다.
11. 생성된 저장소 페이지에서 "Add file" > "Create new file"을 선택합니다.
12. 파일 이름을 "index.html"로 지정합니다.
13. HTML 코드를 작성합니다 (예: <h1>Hello, GitHub Pages!</h1>).
14. 페이지 하단의 "Commit new file" 버튼을 클릭합니다.
15. 저장소 설정(Settings) 탭으로 이동합니다.
16. 좌측 메뉴에서 "Pages"를 선택합니다.
17. "Source" 섹션에서 "main" 브랜치를 선택합니다.
18. "Save" 버튼을 클릭합니다.
19. GitHub Pages URL이 표시될 때까지 기다립니다 (몇 분 소요될 수 있음).
20. 제공된 URL로 접속하여 웹사이트를 확인합니다.
21. 로컬에서 웹사이트 파일을 수정합니다.
22. GitHub Desktop 또는 명령줄을 사용하여 변경사항을 커밋합니다.
23. 변경사항을 GitHub 저장소에 푸시합니다.
24. 몇 분 후 웹사이트에 반영된 변경사항을 확인합니다.
25. (선택) Jekyll 테마를 적용하려면 _config.yml 파일을 생성합니다.
26. (선택) _config.yml 파일에 테마 설정을 추가합니다 (예: theme: jekyll-theme-minimal).
27. (선택) 커스텀 도메인을 사용하려면 CNAME 파일을 생성합니다.
28. (선택) CNAME 파일에 도메인 주소를 입력합니다.
29. (선택) DNS 설정에서 CNAME 레코드를 추가합니다.
30. (선택) GitHub Pages 설정에서 커스텀 도메인을 입력하고 저장합니다.

주의사항

• GitHub Pages는 정적 웹사이트 호스팅에 적합합니다. 서버 사이드 언어(PHP, Python 등)는 지원되지 않습니다.
• 저장소가 public인 경우, 웹사이트 내용도 공개됩니다. 민감한 정보는 포함하지 않도록 주의하세요.
• 대규모 트래픽이나 상업적 용도로는 적합하지 않을 수 있습니다.

결론

GitHub Pages는 개발자들에게 매우 유용한 도구입니다. 무료로 간단히 웹사이트를 호스팅할 수 있고, Git의 버전 관리 기능까지 활용할 수 있어 프로젝트 관리에도 큰 도움이 됩니다. 이 가이드를 따라 여러분만의 GitHub Pages 사이트를 만들어보세요!

GitHub Pages와 Jekyll은 밀접하게 연관되어 있지만, 각각 다른 역할을 수행합니다.

GitHub Pages

GitHub Pages는 GitHub에서 제공하는 무료 정적 웹사이트 호스팅 서비스입니다. 주요 특징은 다음과 같습니다:

• GitHub 저장소에서 직접 HTML, CSS, JavaScript 파일을 호스팅합니다[4].
• 사용자, 조직, 프로젝트를 위한 공개 웹페이지를 제공합니다[6].
• github.io 도메인 또는 사용자 지정 도메인을 사용할 수 있습니다[6].
• Jekyll을 기본 정적 사이트 생성기로 사용합니다[4][6].

Jekyll

Jekyll은 정적 사이트 생성기로, 다음과 같은 특징이 있습니다:

• Markdown과 HTML 파일을 가져와 완전한 정적 웹사이트를 생성합니다[4].
• Ruby로 작성되었으며, 템플릿 엔진으로 Liquid를 사용합니다[5].
• 플러그인 시스템을 통해 확장 가능합니다[4].
• 블로그 친화적인 기능들을 내장하고 있습니다[5].

주요 차이점

1. 목적:
   • GitHub Pages: 호스팅 서비스
   • Jekyll: 정적 사이트 생성 도구
2. 기능:
   • GitHub Pages: 웹사이트 배포 및 서비스
   • Jekyll: 콘텐츠를 HTML로 변환
3. 사용 범위:
   • GitHub Pages: GitHub 플랫폼에 한정
   • Jekyll: 로컬에서 사용 가능하며 다른 호스팅 서비스와도 호환
4. 설정:
   • GitHub Pages: GitHub 저장소 설정으로 간단히 활성화
   • Jekyll: 로컬 환경 설정 필요 (Ruby 설치 등)[5]
5. 빌드 프로세스:
   • GitHub Pages: 자동으로 Jekyll 빌드 실행
   • Jekyll: 로컬에서 수동으로 빌드 가능

GitHub Pages는 Jekyll을 내장하여 사용하지만, 사용자가 직접 Jekyll을 설치하고 사용할 필요는 없습니다[2]. GitHub Pages가 자동으로 Jekyll 빌드 프로세스를 처리합니다[1][10].

GitHub Pages는 GitHub 저장소에서 직접 정적 웹사이트를 호스팅할 수 있게 해주는 서비스입니다. 다음은 GitHub Pages의 주요 기능과 사용 방법에 대한 설명입니다.

1. 정적 웹사이트 설정방법

1. GitHub 계정에 로그인합니다.
2. 새 저장소를 생성하거나 기존 저장소를 선택합니다.
3. 저장소 설정에서 "Pages" 섹션으로 이동합니다.
4. "Source" 드롭다운 메뉴에서 웹사이트를 게시할 브랜치를 선택합니다(보통 "main" 또는 "master").
5. 선택한 브랜치의 루트 디렉토리나 "/docs" 폴더에 "index.html" 파일을 생성합니다.
6. 변경사항을 커밋하고 푸시하면 GitHub가 자동으로 사이트를 빌드하고 게시합니다.

2. 커스텀 도메인 설정방법

1. 도메인 제공업체의 DNS 설정에서 다음 A 레코드를 추가합니다:
2. 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
3. www 서브도메인을 사용하려면 CNAME 레코드를 추가하여 <username>.github.io를 가리키도록 합니다.
4. GitHub 저장소의 "Settings" > "Pages" 섹션에서 "Custom domain" 필드에 도메인을 입력합니다.
5. "Enforce HTTPS" 옵션을 활성화하여 보안을 강화합니다.

3. 파일 업로드 방법

1. 웹 인터페이스 사용:
   • 저장소 페이지에서 "Add file" > "Upload files" 선택
   • 파일을 드래그 앤 드롭하거나 "choose your files" 클릭하여 선택
   • 커밋 메시지 작성 후 "Commit changes" 클릭
2. Git 명령어 사용:
3. git add . git commit -m "Add website files" git push origin main
4. GitHub Desktop 애플리케이션 사용:
   • 변경사항 선택 및 커밋 메시지 작성
   • "Push origin" 버튼 클릭

4. 사용시 주의할 점

1. 저장소 크기 제한: GitHub Pages 소스 저장소는 1GB를 초과하지 않아야 합니다[13].
2. 게시된 사이트 크기 제한: 게시된 GitHub Pages 사이트는 1GB를 초과할 수 없습니다[13].
3. 대역폭 제한: GitHub Pages 사이트는 월 100GB의 소프트 대역폭 제한이 있습니다[13].
4. 빌드 제한: GitHub Pages 사이트는 시간당 10회의 소프트 빌드 제한이 있습니다[13].
5. 용도 제한: GitHub Pages는 무료 웹 호스팅 서비스로 사용되어서는 안 되며, 온라인 비즈니스, 전자상거래 사이트 또는 상업용 소프트웨어 제공에 사용해서는 안 됩니다[13].
6. 콘텐츠 제한: 폭력적이거나 위협적인 콘텐츠, 과도하게 폭력적인 콘텐츠, 성적으로 노골적인 콘텐츠는 허용되지 않습니다[13].
7. 사용자 데이터: GitHub Pages 사이트는 민감한 사용자 데이터를 수집하거나 처리해서는 안 됩니다[13].

이러한 가이드라인을 준수하면서 GitHub Pages를 사용하면 효과적으로 정적 웹사이트를 호스팅하고 관리할 수 있습니다.