Hong Cheung 
왜 GitHub 웹사이트를 원하시나요?
간편하고 무료이기 때문입니다. 시작하기 전에 장단점을 살펴보고 이것이 여러분의 필요에 적합한지 확인해 봅시다.
장점
도메인 이름을 알아서 관리해 주며, 저장 공간이나 높은 트래픽에 대한 요금을 걱정할 필요가 없습니다. 무료 GitHub 계정만 있으면 됩니다.
단점
GitHub Pages에서는 동적 사이트를 호스팅할 수 없고 정적 사이트만 가능합니다. 즉, express.js나 flask를 사용하듯 들어오는 트래픽을 처리하는 서버를 호스팅할 수 없으며, 정적 사이트만 호스팅할 수 있습니다. 다만 동적 정적 사이트는 가능합니다. 스크립트를 실행할 수는 있지만, 그 스크립트는 미리 로드되어 있어야 합니다.
또 다른 단점은 무료 계정으로 GitHub 페이지를 운영하는 경우 GitHub 저장소(웹사이트 파일과 디렉터리)가 공개된다는 것입니다. 즉, 누구나 여러분의 파일을 보고 방문할 수 있습니다. 따라서 웹사이트 폴더에 기밀 정보를 포함하지 않는 것이 좋습니다.
그렇긴 하지만, 코드를 공유해도 괜찮은 간단한 웹사이트를 호스팅하기에는 여전히 좋습니다. 개인 이력서, 간단한 회사 웹사이트, 간단한 블로그 같은 것이죠. 또는 자신만의 동적 정적 웹 앱을 테스트하고 싶을 때도 좋습니다.
사전 준비 사항
- 인터넷이 연결된 컴퓨터.
- 기본적인 컴퓨터 활용 능력.
- 무료 GitHub 계정.
무료 GitHub 페이지를 만드는 단계별 가이드
- GitHub 계정을 만드세요.
로그인한 후 새 저장소를 만드세요. “Public”을 선택해야 합니다.
빈 저장소를 만들었다면 “create new file”을 누르세요.
- 아래의 샘플 코드를 복사하여 붙여넣고, 파일 이름을 index.html로 지정하여 이 파일을 만드세요.
이렇게 보일 것입니다. commit changes를 클릭하세요.
Settings 탭 > 측면의 Pages > Branches로 이동하여 main을 선택하고 save를 클릭하세요.
이제 저장소로 돌아가 몇 분 기다리세요.
페이지를 새로 고치면 GitHub 페이지가 성공적으로 게시된 것을 볼 수 있습니다.
잘하셨습니다! 이제 이 링크를 통해 GitHub 페이지를 사용할 수 있습니다!
샘플 코드:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> <link rel="stylesheet" href="./style.css"> <link rel="icon" href="./favicon.ico" type="image/x-icon"> </head> <body> <main> <h1>Welcome to My Website</h1> </main> <script src="index.js"></script>2 collapsed lines
</body></html>다음은 무엇인가요?
초보자라면 freeCodeCamp.org의 무료 강좌를 수강하시길 적극 권장합니다. 웹 개발을 시작하는 데 필요한 거의 모든 것을 다룹니다.
GitHub 페이지는 설정하기 쉽지만 몇 가지 제한이 있어 웹 개발을 더 진행할수록 할 수 있는 일이 제한될 수 있습니다. 진지하게 임한다면 React, Next, Flask, Express.js 등 다양한 개발 기술을 알아두는 것이 중요합니다. 그런 점에서 GitHub Page로는 부족합니다. Netlify, Digital Ocean, 그리고 궁극적으로는 Docker 인스턴스를 갖춘 자체 호스팅 VPS를 찾아 웹사이트의 모든 부분을 직접 호스팅해야 합니다.
Cloudflare vs GitHub Pages
GitHub 페이지는 설정하기 쉽고 초보자에게 좋지만, 요즘 저는 Cloudflare pages를 사용하는 경향이 있습니다. 무료이면서 트래픽이 무제한일 뿐만 아니라, Cloudflare를 통해 도메인을 구매했다면 사용자 지정 도메인 설정도 처리해 줍니다. 게다가 저장소를 비공개로 둘 수도 있습니다. 사실상 GitHub 페이지의 더 나은 버전입니다. 이것도 확인해 보시길 권합니다.
이 가이드가 이해하기 어렵다면 GitHub의 공식 가이드를 여기에서 따라 하실 수 있습니다.
