GitHub로 무료 웹호스팅하기(깃허브, GitHub Desktop 사용)

수성비전자방입니다. 웹사이트를 만들고 나면 다른 사람들에게 보여주고 싶죠? 그런데 서버를 열기가 부담스러운 분들도 있을 것입니다. 웹호스팅 서비스를 이용하자니 요금이 부담될 수도 있죠. 그런 분들께 도움이 될 수 있는 정보를 드립니다. GitHub를 이용하는 방법입니다.

 

GitHub는 오픈소스 Git 저장소이므로 여러분이 올린 소스코드들을 다른 사람들도 보게 된다는 점 알아두세요!

보안이 중요한 웹사이트는 GitHub로 호스팅하면 안 되겠죠?

 

1. https://github.com 에 접속합니다.

2. 오른쪽 위의 Sign in을 클릭하여 로그인하거나, Sign up을 클릭하여 회원가입합니다.

*. Free 계정과 Pro 계정 중에서 선택할 수 있습니다. 오늘 할 것은 Free 계정으로 충분히 할 수 있는 일입니다.(아래 더보기 참고)

 

3. 좌측 상단의 New를 클릭하거나, 오른쪽 위의 +를 누르고 New repository를 클릭합니다.

(위의 스크린샷은 여러분의 화면과 다를 수 있습니다. 저는 이미 repository가 있어서...)

 

4. 빈칸을 적절히 채우시고 Create repository를 클릭합니다.

 

빈칸을 채운 예시입니다. 화질이 많이 안 좋지만...

 

그러면 이런 화면이 뜰 것입니다.

 

5. GitHub Desktop이 없으신 분은 설치하시기 바랍니다.

5-1. https://desktop.github.com 으로 접속합니다.

5-2. 본인 운영체제에 맞는 프로그램을 내려받습니다.

 

내려받아서 실행하면 그냥 GitHub Desktop이 열리는 것처럼 보이는데, 사실 PC에 설치된 것입니다.

 

5-3. Sign in to GitHub.com을 클릭합니다.

 

5-4. 웹브라우저 창에서 열기를 클릭합니다.

 

5-5. 계정을 설정합니다. GitHub 계정의 이름과 전자 우편(회원 정보의 메일과 @users.noreply.github.com 중 택1)을 그대로 사용하는 방법이 있고, 이름과 전자 우편을 사용자 지정하는 방법이 있습니다.

 

6. GitHub Desktop에서 Clone a repository from the Internet...을 클릭합니다.

('Clone'에 주목! 이미 로컬 repository가 있으신 분은 왼쪽 위 Current repository를 클릭하시고, Add를 누른 뒤, Clone a repository를 클릭합니다.)

 

7. 본인 repository들이 뜹니다. 원하는 repository를 선택하세요.

8. 로컬 파일 경로를 바꾸시려면 Choose...를 클릭하세요.(선택사항. 저는 안 했습니다.)

9. Clone을 클릭하세요.

 

그러면 repository 이름의 폴더가 정해진 파일 경로(기본값: 문서\GitHub)에 생겼을 것입니다.

 

10. 만들어진 폴더에 웹사이트의 모든 파일을 넣습니다.

11. GitHub Desktop의 왼쪽 아래 빈칸들을 적절히 채우시고, Commit to main을 클릭하세요.

 

12. 상단의 Publish branch를 클릭합니다.

 

이제 github.com/본인repository 로 들어가세요.

방금 올린 파일들이 있는 것을 보실 수 있습니다.

 

13. Settings에 들어갑니다.

14. Pages에 들어갑니다.

15. Source에서 None▼을 클릭하고, main을 클릭합니다.(Source를 main으로 설정하라는 소리.)

 

16. 경로가 /(root)인 것을 확인하시고, Save를 클릭합니다.

 

17. 이제 https://아이디.github.io/본인repository 로 들어가시면 웹사이트가 나오는 것을 확인하실 수 있습니다.

적용되는 데 시간이 걸릴 수 있으니 제대로 안 뜨면 잠시 기다려 주세요.

 

이제 PC에서 파일을 수정하거나 추가/삭제하면 GitHub Desktop 앱에서 안내가 있을 것입니다. 11~12번 과정과 마찬가지로 왼쪽 아래 빈칸을 적절히 채우시고, Commit to main을 클릭하신 뒤, Fetch origin 하시면, 시간이 흐른 뒤 적용됩니다.

 

저의 글을 읽어주셔서 감사합니다. 다음에 만나요!

수성비의 2in1 노트북은 갤럭시 북 Flex2입니다.