Home » » 2장. GitHub 리포지토리 만들기와 첫 업로드

2장. GitHub 리포지토리 만들기와 첫 업로드

By 

2장. GitHub 리포지토리 만들기와 첫 업로드

2-1. 새 GitHub 리포지토리 만들기

이제 블로그에서 연결할 실제 파일 저장소, 즉 GitHub 리포지토리를 만들어 보겠습니다. 이 리포지토리가 앞으로 구독자에게 소스 코드와 예제 파일을 제공하는 중심 창고가 됩니다.

1) GitHub 새 리포지토리 생성 단계

  1. 브라우저에서 https://github.com 에 접속하여 로그인합니다.
  2. 오른쪽 상단의 + 아이콘을 클릭한 뒤, New repository를 선택합니다.
  3. Repository name 입력란에 리포지토리 이름을 적습니다. 예: blog-download-examples
  4. Description에 간단한 설명을 적습니다. 예: 블로그 구독자용 예제 소스코드 모음
  5. Public을 선택하여 누구나 볼 수 있도록 설정합니다.
  6. Initialize this repository with a README 옵션은 체크해 둡니다.
  7. 마지막으로 Create repository 버튼을 눌러 리포지토리를 생성합니다.

여기까지 완료하면, 이제 블로그 글에서 링크를 걸 수 있는 빈 창고가 하나 생긴 것입니다. 다음 단계는 이 창고에 실제 예제 파일을 올려 두는 일입니다.

스크린샷 예시: 새 리포지토리 생성 화면

전자책에서는 아래와 같은 장면을 캡처해 이미지로 보여 주세요.

  • Repository name과 Description 입력 칸이 보이는 화면
  • Public 라디오 버튼이 선택된 상태
  • 화면 하단의 Create repository 버튼이 강조된 상태

HTML에서는 다음과 같이 이미지를 삽입할 수 있습니다. 

<img src="images/github-new-repo.png"
     alt="GitHub 새 리포지토리 생성 화면">

2-2. 예제 파일 구조 준비하기

리포지토리를 만들었다면, 이제 블로그에서 공유할 예제 파일을 하나의 폴더 구조로 정리해야 합니다. 이 구조가 깔끔할수록 구독자가 받았을 때 이해하기가 쉬워집니다.

1) 기본 폴더 구성 예시

blog-download-examples/
├─ 01-basic-button/
│  ├─ index.html
│  └─ README.md
└─ 02-advanced-layout/
   ├─ index.html
   └─ README.md

각 예제 폴더 안에는 최소한 index.html 과 사용법을 적은 README.md 파일을 두는 것을 권장합니다.

2) README.md 예시 내용

아래는 “블로그에서 GitHub 파일 공유 버튼 만들기” 예제용 README 예시입니다. 

# 블로그용 GitHub 다운로드 버튼 예제

이 예제는 블로그 글에서 사용할 수 있는 GitHub 다운로드 버튼 HTML 코드입니다.

## 포함 파일

- index.html : 버튼 HTML 예제
- screenshot.png : 버튼이 적용된 화면 예시

## 사용 방법

1. index.html 파일 안의 <a> 태그 코드를 복사합니다.
2. 블로그 글의 HTML 모드에 붙여넣습니다.
3. href 속성에 자신의 GitHub ZIP 링크를 넣어줍니다.

2-3. 웹 화면에서 첫 파일 업로드하기

로컬에서 준비한 폴더와 파일들을 GitHub 리포지토리에 업로드해 보겠습니다. 여기서는 Git 설치 없이, 브라우저만 사용한 업로드 방법을 다룹니다.

1) 단일 파일 업로드

  1. 방금 만든 리포지토리의 메인 페이지로 이동합니다.
  2. Add file 버튼을 클릭하고, Upload files를 선택합니다.
  3. 로컬 컴퓨터에서 index.html, README.md 파일을 드래그 앤 드롭합니다.
  4. 페이지 하단의 Commit changes 영역에서 메시지를 간단히 적습니다. 예: add basic download button example
  5. Commit changes 버튼을 클릭하여 업로드를 완료합니다.

2) 예제 폴더째 업로드

웹 UI는 폴더 구조 업로드가 조금 불편할 수 있습니다. 간단한 방법은 예제 폴더를 ZIP으로 압축한 뒤, 압축을 푼 상태로 다시 폴더 채 업로드하는 것입니다.

또는 Git을 설치한 뒤, 로컬에서 git push로 올리는 방법도 있지만, 이 전자책에서는 “처음 시작하는 사람도 바로 따라 할 수 있는” 웹 기반 방법에 집중합니다.

스크린샷 예시: Upload files 화면

독자 이해를 돕기 위해 아래 장면을 캡처해 넣을 수 있습니다.

  • Add file → Upload files 메뉴를 선택한 화면
  • 업로드 영역에 파일이 드래그되어 있는 장면
  • 하단의 Commit changes 버튼이 보이는 화면

예시 HTML 코드는 다음과 같습니다. 

<img src="images/github-upload-files.png"
     alt="GitHub Upload files 화면">

2-4. 블로그에서 사용할 기본 리포지토리 링크 확보

파일 업로드까지 완료했다면, 이제 블로그 글에서 사용할 “기본 리포지토리 링크”와 “ZIP 다운로드 링크” 두 가지를 확보해야 합니다.

1) 리포지토리 메인 링크

브라우저 주소창에 보이는 URL이 바로 리포지토리 메인 링크입니다. 예를 들어 다음과 같은 형태입니다. 

https://github.com/사용자명/blog-download-examples

이 링크는 “코드를 직접 보고 싶은 구독자용”으로 안내합니다.

2) ZIP 다운로드 링크

구독자에게는 전체 파일을 한 번에 받을 수 있는 ZIP 링크가 더 편합니다. GitHub에서는 다음과 같은 URL 형태를 사용합니다. 

https://github.com/사용자명/blog-download-examples/archive/refs/heads/main.zip

브라우저에서 이 주소를 열어 보면, 리포지토리의 main 브랜치를 ZIP 파일로 내려받을 수 있습니다. 블로그 글에서는 이 주소를 다운로드 버튼의 href로 사용하게 됩니다.

3) 블로그에서 바로 쓸 수 있는 버튼 HTML

아래 코드는 1장에서 살펴본 버튼 예제를 2장에서 만든 리포지토리 링크와 연결한 완성형입니다. 

<a href="https://github.com/사용자명/blog-download-examples/archive/refs/heads/main.zip"
   style="display:inline-block;padding:10px 18px;
          background:#1a73e8;color:#ffffff;
          text-decoration:none;border-radius:4px;
          font-weight:600;">
  블로그 예제 소스코드 다운로드 (.zip)
</a>

이 버튼 하나만 있으면, 블로그 글 어디에서든 “GitHub에 올려 둔 최신 예제 소스”를 구독자에게 바로 제공할 수 있습니다.

2장 정리

이 장에서는 새 GitHub 리포지토리를 만들고, 예제 파일을 업로드한 뒤, 블로그에서 사용할 리포지토리 링크와 ZIP 다운로드 링크를 확보하는 과정까지 살펴보았습니다. 다음 장에서는 이렇게 준비한 예제를 바탕으로, 블로그 글 구조를 어떻게 설계하면 “다운로드 포스트” 느낌을 극대화할 수 있는지 구체적으로 다뤄 보겠습니다.

2장. GitHub 리포지토리 만들기와 첫 업로드

#가나 투데이 #ganatoday

그린아프로
Share:  Facebook Twitter Google+