GitHub Pages로 버전별 웹사이트 배포하기

임베디드 관련 카테고리/Github

GitHub Pages로 버전별 웹사이트 배포하기

CBJH 2024. 10. 27. 10:00

728x90

이 글에서는 GitHub Pages를 이용해 버전별 웹사이트를 배포하는 방법을 소개합니다. 각 버전의 페이지를 만들고, GitHub과 연동하여 사이트를 자동으로 배포하는 과정을 다룹니다.

GitHub Pages란?

GitHub Pages는 GitHub에서 제공하는 정적 웹사이트 호스팅 서비스입니다. HTML, CSS, JavaScript 같은 정적 파일을 사용해 무료로 웹사이트를 배포할 수 있습니다. 주로 포트폴리오, 블로그, 문서 등을 만들 때 사용됩니다.

예제 목표

이 예제에서는 GitHub Pages를 이용해 여러 버전의 웹사이트를 배포합니다.

v1.0과 v1.1 버전을 만들고, 각 버전 페이지를 링크로 연결합니다.
사용자는 각각의 버전 페이지에 쉽게 접근할 수 있습니다.

1. 준비물

GitHub 계정: GitHub에서 회원가입 후 계정을 만듭니다.
Git 설치: Git 다운로드에서 Git을 설치합니다.

2. 프로젝트 디렉터리 구조

mywebsite/
├── index.html          # 최신 버전의 메인 페이지
└── versions/           # 버전별 파일 저장 폴더
    ├── v1.0.html       # 버전 1.0 페이지
    └── v1.1.html       # 버전 1.1 페이지

구조에 맞게 파일들을 만든다. (mkdir, vi 명령어 이용)

3. 웹페이지 파일 작성

index.html (최신 페이지)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website - Latest Version</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is the latest version of my website.</p>
  <ul>
    <li><a href="versions/v1.0.html">Version 1.0</a></li>
    <li><a href="versions/v1.1.html">Version 1.1</a></li>
  </ul>
</body>
</html>

v1.0.html (버전 1.0 페이지)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website - Version 1.0</title>
</head>
<body>
  <h1>My Website - Version 1.0</h1>
  <p>This is the version 1.0 of my website.</p>
  <a href="../index.html">Back to Latest Version</a>
</body>
</html>

v1.1.html (버전 1.1 페이지)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website - Version 1.1</title>
</head>
<body>
  <h1>My Website - Version 1.1</h1>
  <p>This is the version 1.1 of my website.</p>
  <a href="../index.html">Back to Latest Version</a>
</body>
</html>

4. Git 저장소 초기화 및 커밋

터미널에서 프로젝트 디렉터리로 이동:

cd mywebsite

Git 저장소 초기화(선택): 해당 디렉터리에 .git을 만들어 깃허브 저장소에 추가한다.

git init

파일 추가 및 커밋:

git add .
git commit -m "Initial commit with index and version files"

5. GitHub 저장소에 파일 푸시

1. GitHub에서 새로운 저장소 생성:

이름: yourusername.github.io (사용자명과 동일한 저장소 이름)
공개 저장소로 설정합니다.

2. 원격 저장소와 연결:

git remote add origin https://github.com/yourusername/yourusername.github.io.git

3. 파일 푸시:

git push -u origin master

4.태그 생성 및 푸시:

git tag v1.0  # 현재 커밋에 v1.0 태그 생성
git tag v1.1  # 동일한 커밋에 v1.1 태그 생성
git push origin --tags  # 두 태그 모두 푸시

만약에 각 폴더를 다른 태그로 저장하고 싶다면

git add versions/v1.0.html  # v1.0.html 파일 스테이징
git commit -m "v1.0.html upload"  # 커밋 생성
git tag v1.0  # v1.0 태그 생성

git add versions/v1.1.html  # v1.1.html 파일 스테이징
git commit -m "v1.1.html upload"  # 커밋 생성
git tag v1.1  # v1.1 태그 생성

git push origin --tags  # 태그 푸시

6. GitHub Pages 설정

GitHub에서 저장소로 이동합니다:
https://github.com/yourusername/yourusername.github.io
Settings > Pages로 이동합니다.
Source에서 master 또는 gh-pages 브랜치를 선택하고 Save를 누릅니다.

7. 웹사이트 확인

홈 페이지:
https://yourusername.github.io/
버전별 페이지:
- 버전 1.0: https://yourusername.github.io/versions/v1.0.html
- 버전 1.1: https://yourusername.github.io/versions/v1.1.html

8. 새 버전 추가하기

1. 새로운 HTML 파일 작성:

예: versions/v1.2.html

2. 파일 커밋 및 푸시:

git add versions/v1.2.html
git commit -m "Add version 1.2"
git tag v1.2
git push origin gh-pages --tags

3. 사이트에서 버전 1.2 페이지 확인:

https://yourusername.github.io/versions/v1.2.html

9. 결론

이 예제를 통해 GitHub Pages로 여러 버전의 웹사이트를 배포하는 방법을 배웠습니다. 각 버전별 페이지를 만들어 GitHub과 연동하고, 사용자가 버전별 페이지에 쉽게 접근할 수 있도록 설정했습니다.

이제 여러분도 버전별로 웹사이트를 관리하고 GitHub Pages를 통해 배포해 보세요! 😊