내가 만든 웹페이지를 실제로 웹사이트에서 실행하는 방법 (Github)

2025. 2. 8. 15:21ㆍ공부

728x90
반응형

1. HTML 파일로 저장

  1. 코드 내용을 파일로 저장합니다.
    • 파일 이름은 index.html로 저장합니다.
  2. 파일 확장자는 반드시 .html이어야 합니다.

2. 호스팅 옵션 선택

웹사이트에서 실행하려면 파일을 호스팅해야 합니다. 무료 호스팅 방법 중 하나를 선택하세요:

방법 1: GitHub Pages

  1. GitHub에 업로드:
    • GitHub 계정이 없으면 GitHub에서 계정을 만듭니다.
    • 새 리포지토리를 생성한 후 index.html 파일을 업로드합니다.
  2. GitHub Pages 활성화:
    • 리포지토리 설정(Settings)으로 이동합니다.
    • Pages 섹션을 찾아 Branch를 main으로 선택하고 저장합니다.
    • 제공된 URL에서 웹사이트를 볼 수 있습니다.

방법 2: Netlify

  1. Netlify에 가입:
  2. 드래그 & 드롭:
    • 대시보드에서 Add new site를 클릭하고 Deploy manually를 선택합니다.
    • index.html 파일이 있는 폴더를 드래그하여 업로드하면 URL이 생성됩니다.

방법 3: Vercel

  1. Vercel에 가입:
  2. 프로젝트 배포:
    • Vercel 프로젝트를 생성한 후 index.html 파일을 업로드합니다.
    • Vercel이 자동으로 URL을 생성해줍니다.

 

 

이중에 GitHub 업로드 방법을 실제로 써봤다

 

1. GitHub 계정 생성

  • GitHub 계정이 없으시다면 GitHub에 방문하여 계정을 만드세요.

2. 새 리포지토리 생성

  1. 로그인 후 오른쪽 상단의 + 버튼을 클릭하고 New repository를 선택합니다.
  2. 리포지토리 이름 입력:
    • 예: sum-to-10-game
  3. 공개(공용) 리포지토리 선택:
    • "Public"을 선택하세요.
  4. 초기화 설정:
    • "Add a README file"은 체크하지 마세요.
  5. 생성:
    • "Create repository" 버튼을 클릭합니다.

3. HTML 파일 업로드

  1. 리포지토리 페이지에서 **Add file > Upload files**를 클릭합니다.
  2. 파일 업로드:
    • index.html 파일을 드래그하거나 선택하여 업로드합니다.
  3. 커밋:
    • 아래의 Commit changes 버튼을 클릭하여 저장합니다.

4. GitHub Pages 활성화

  1. Settings로 이동:
    • 리포지토리 페이지에서 Settings 탭을 클릭합니다.
  2. Pages 설정:
    • 왼쪽 메뉴에서 Pages를 클릭합니다.
  3. 브랜치 선택:
    • "Source" 섹션에서 Branch를 main으로 선택합니다.
    • "Save"를 클릭합니다.
  4. 배포 URL 확인:
    • "Your site is ready to be published at" 아래에 표시된 URL(예: https://<사용자이름>.github.io/<리포지토리이름>/)을 클릭하여 웹사이트를 확인합니다.

 

 

📌 리포지토리를 Private 으로 만들면 안될까?

 

Private 리포지토리로 만들기

  1. 리포지토리 생성
    • 로그인 후 오른쪽 상단의 + 버튼을 클릭하고 New repository를 선택합니다.
    • 리포지토리 이름을 입력하고 Private을 선택합니다.
    • "Create repository"를 클릭합니다.
  2. GitHub Pages 활성화 (Private 리포지토리에서)
    • Private 리포지토리를 GitHub Pages에서 사용하려면, Pro 요금제 이상의 유료 플랜이 필요합니다.
    • Pro 요금제를 사용하는 경우:
      • 리포지토리 설정(Settings) → Pages 섹션에서 배포를 활성화할 수 있습니다.
      • 무료 요금제에서는 Public 리포지토리로 전환해야 합니다
무료를 사용해야하니까 그냥 Public 으로 하자

 

 

무료로 사용하고 싶다면 Public으로 전환

Private 리포지토리에서는 GitHub Pages를 무료로 사용할 수 없으므로, 무료로 사용하려면 리포지토리를 Public으로 전환해야 합니다.

  1. Public으로 전환
    • 리포지토리 설정(Settings) → Danger Zone → "Change repository visibility" → Public으로 전환.
  2. 다시 GitHub Pages를 활성화하고 웹사이트를 배포하세요.

 

 

"Add file"이 없는 경우 파일 업로드

"Add file" 버튼이 없는 경우, 로컬에서 Git을 사용해 파일을 업로드할 수 있습니다.

방법: 로컬에서 Git 사용

  1. Git 설치
  2. Git 초기 설정
    • 설치 후 터미널(또는 명령 프롬프트)에서 아래 명령을 실행합니다: 
    • bash
      복사편집
      git config --global user.name "Your Name" git config --global user.email "your_email@example.com"
  3. 리포지토리 클론
    • GitHub 리포지토리 페이지로 이동하여 "Code" 버튼을 클릭하고 HTTPS URL을 복사합니다.
    • 터미널에서 다음 명령을 실행합니다:
      bash
      복사편집
      git clone <리포지토리 URL>
    • 예:
      bash
      복사편집
  4. HTML 파일 추가
    • 클론한 리포지토리 폴더로 이동합니다:
      bash
      복사편집
      cd repository
    • index.html 파일을 복사하거나 생성합니다.
  5. Git으로 파일 업로드
    • 파일을 스테이징:
      bash
      복사편집
      git add .
    • 커밋:
      bash
      복사편집
      git commit -m "Add index.html"
    • GitHub로 푸시:
      bash
      복사편집
      git push origin main

3. GitHub Pages 활성화

Private 리포지토리의 경우, Pro 요금제가 필요합니다. Pro 계정을 사용하고 있다면:

  1. 리포지토리 페이지에서 Settings > Pages로 이동합니다.
  2. "Branch"를 main으로 설정하고 저장합니다.
  3. 배포된 URL이 표시됩니다.

 

 

내가 만든 웹사이트 링크는 어디서 보는걸까?

 

GitHub Pages에서 배포된 URL은 다음 위치에 표시됩니다:

1. Pages 설정에서 확인

  1. 리포지토리로 이동:
    • GitHub 리포지토리의 메인 페이지로 이동합니다.
  2. Settings 탭 클릭:
    • 리포지토리 상단 메뉴에서 Settings 탭을 클릭합니다.
  3. Pages 섹션으로 이동:
    • 왼쪽 사이드바에서 Pages를 찾습니다(일반적으로 "Code and automation" 섹션 아래).
  4. 배포 URL 표시:
    • Pages 섹션에 "Your site is ready to be published at"이라는 메시지가 나오며, 바로 아래에 배포된 URL이 표시됩니다.
    • 예: https://<사용자이름>.github.io/<리포지토리이름>/

2. URL을 확인할 수 없는 경우

배포 URL이 표시되지 않는다면:

  1. Pages 설정에서 Source를 확인합니다:
    • "Source"를 main 브랜치로 설정했는지 확인하세요.
    • 설정 후 Save 버튼을 눌러야 배포가 시작됩니다.
  2. 설정 후 1~2분 대기:
    • GitHub Pages는 배포에 시간이 걸릴 수 있습니다. 1~2분 후 URL이 나타납니다.

3. Pages 설정 위치 변경 가능성

GitHub UI가 업데이트되어 Pages 설정 위치가 바뀌었을 수 있습니다. 찾을 수 없다면:

  1. Search bar를 사용:
    • Settings 페이지의 상단에 있는 검색 창에서 Pages를 검색합니다.
  2. 결과로 표시된 Pages 섹션으로 바로 이동합니다.

4. URL 직접 추정

만약 URL이 보이지 않는다면, URL을 다음과 같이 추정할 수 있습니다:

기본 형식:

php-template
복사편집
https://<사용자이름>.github.io/<리포지토리이름>/
 
 
 
 
 
이미 올린 index 파일을 수정하고싶으면 어떻게 해야할까?
 
 
 
 

🔹 1. GitHub 웹사이트에서 직접 수정하는 방법

  1. GitHub에서 **해당 저장소(repository)**로 이동.
  2. 수정하려는 index.html 파일을 클릭.
  3. 우측 상단에 있는 연필 아이콘(✏️ Edit this file) 클릭.
  4. 파일을 원하는 대로 수정.
  5. 하단에 Commit changes 부분에서 메시지를 입력하고,
    • Commit directly to the main branch 선택 → [Commit changes] 버튼 클릭.

✅ 이 방법은 간단하지만, 파일이 많거나 큰 프로젝트에서는 비효율적일 수 있어.

🔹 2. 로컬에서 수정 후 Git을 사용하여 업로드하는 방법

(로컬에 Git이 설치되어 있어야 해)

  1. 터미널(또는 Git Bash)에서 저장소 클론:
  2. bash
    복사편집
  3. index.html 파일을 원하는 대로 수정.
  4. 변경된 파일 확인:
  5. bash
    복사편집
    git status
  6. 변경 사항을 스테이징:
  7. bash
    복사편집
    git add index.html
  8. 변경 사항 커밋:
  9. bash
    복사편집
    git commit -m "index.html 수정"
  10. 변경 사항을 원격 저장소로 푸시:(main 브랜치가 아니라면 git branch로 확인 후 푸시)
  11. bash
    복사편집
    git push origin main

 

728x90
반응형
저작자표시 비영리 변경금지

'공부' 카테고리의 다른 글

Github 에 올린 게임을 유저들의 최고 스코어를 기반으로 랭킹 시스템을 만드는 방법  (1) 2025.02.13
영어 공부 이상한 나라의 앨리스 - 1  (1) 2025.02.08

관련글

댓글 1

티스토리툴바