생활코딩

Coding Everybody

코스 전체목록

닫기

웹호스팅 github pages

github pages 로 실습을 하는데 문제가 생겼다면 netlify.com 을 이용하는 아래 수업을 참고해주세요. 
netlify.com 으로 웹호스팅 하기 바로가기

 

 

---

 

 

직접 웹서버를 운영하는 일은 쉽지 않은 일입니다.
우선 컴퓨터가 있어야 하고요,
컴퓨터가 냉장고처럼 항상 켜져 있어야 합니다.
웹서버라는 프로그램을 배워서 설치해야 합니다.
또 인터넷을 통해서
외부로 정보를 전송할 수 있게
설정을 해야 합니다.
쉽지 않습니다.

그래서
이런 일을 대행해 주는 회사들이 있습니다.
인터넷에 연결된 컴퓨터 하나 하나를 호스트라고 합니다.
이런 컴퓨터를 빌려주는 사업을 호스팅이라고 합니다.
웹서버를 전문적으로 빌려주는 비즈니스를
웹호스팅 업체라고 부릅니다.

 

수많은 웹호스팅 업체가 있습니다.
그 중에서
무료이고, 유명한 서비스를 이용할 것입니다.

 

 

바로 github(https://github.com)의 pages 기능입니다.

 

 

이 서비스는
프로그래머들에게는 성지와 같은
중요한 서비스입니다.
전세계의 수많은 오픈소스들이
이곳에서 만들어지고 있거든요.
 

 

이 서비스 자체는
우리 수업의 주제는 아니니까
나중에 살펴보시면 됩니다.

 

 

우리는 github가 제공하는 여러 기능 중
웹호스팅 기능을 이용해서
우리의 홈페이지를 운영할 것입니다.

 

 

회원가입하시고(sign up),
로그인해 주세요(sign in)

 

 

 

저장소(repository)라는 것을
생성해 주셔야 합니다.
저장소는 소스코드를 보관하는 곳이라고
생각하시면 됩니다.
New 버튼을 누르면 됩니다.

 

 

아래와 같은 화면이 나오는데 저장소를 생성하는 화면입니다.

1. Repository name 에는 프로젝트의 이름을 적어 주세요. 저의 경우 web1이라고 할 것입니다.
2. public(공개), private(비공개)는 저장소의 공개여부를 정하는 것입니다. public으로 해 주세요. (누구나 여러분의 소스코드를 볼 수 있습니다)

저장소 생성하기(Create repository) 버튼을 눌러주세요.

 

 

아래와 같은 화면이 나타날 것입니다.

 

 

이 중에서 uploading an existing file라는 부분을 클릭해 주세요. 아래와 같은 페이지가 뜰 거에요.

1. 작업한 파일을 드래그 앤 드롭 합니다. 

2. 변경된 내용을 적습니다. 파일이 변경될 때마다 업로드를 해야 하기 때문에 변경된 내용을 적어줍니다.
3. Commit changes 버튼을 누르세요. 업로드가 시작됩니다.

 

 

업로드가 끝나면 아래와 같이 파일의 목록이 보입니다.

 

 

그럼 우리가 업로드한 웹페이지를 인터넷을 통해서 서비스 해봅시다. Settings 버튼을 선택합니다.

 


 

사이드 바에서 Pages를 선택합니다. 

 

 

Branch를 main 혹은 master를 선택하고 Save 버튼을 누릅니다.

 

 

그럼 아래와 같이 주소가 표시됩니다. (물론 주소는 각자 다르겠죠?)

 

이 주소로 방문해 보시면 자신이 만든 웹페이지가 보일 것입니다. (혹시 나오지 않는다면 5분 후에 다시 접속해 보세요)

 

 

감동적이지 않나요?
이제
내가 만든 웹페이지를
전세계 사람들에게 서비스할 수 있게 되었습니다.
축하합니다.
 

 

그럼 우리가 한 일을 이론적으로 정리해보겠습니다.

 

삼자가 있습니다. my는 여러분의 컴퓨터입니다. visitor는 여러분의 웹페이지를 보고 싶어하는 사람입니다.

여러분의 컴퓨터는 현재로서는 컨텐츠를 서비스 할 수 없습니다.  우리는 github의 pages 기능을 이용했습니다. github에 파일들을 업로드하고, pages 기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜집니다. 그리고 우리에게 웹서버의 주소를 알려줍니다.

이제 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 됩니다.

 

 

웹서버를 직접 운영하는 것에 비해서
웹호스팅을 이용하면
쉽습니다.

 

 

단점은
인터넷의 원리가 감춰져 있다는 것입니다.

하지만
현업에서 웹서버를 직접 운영하는 경우는 많지 않아요.
웹서버를 운영하기 위해서는 많은 노하우가 필요하거든요.

우리는 github를 사용했지만
미래에는 이 서비스를 이용하지 못할 수도 있습니다.
또 github pages는 제약이 많은 서비스이기도 합니다.
중요한 것은 github의 사용법이 아니고,
여러분이 필요한 웹호스팅을 찾아내는 능력입니다.

 

우리는 HTML만으로 웹페이지를 만들었습니다.
HTML은 웹브라우저가 해석하기 때문에
서버쪽에서 특별히 해 줄 일이 없습니다.
이런 특성을 정적(static)이라고 합니다.
자연스럽게 HTML만으로 만들어진 웹사이트를
호스팅하는 서비스 중에는 무료가 많습니다.

 

그럼 동적(dynamic)인 것이 있냐고요?
있습니다. 나중에 배울 php나 python, ruby, java와 같은
기술을 이용하려면 대체로 비용을 내야 합니다.
이런 기술을 활용하기 전까지는
유료 서비스를 이용할 필요가 전혀 없습니다.

 

아래와 같이 검색하시면
여러분의 목적에 맞는 웹호스팅을 찾을 수 있습니다.

 

free static web hosting

 

현시점에서 추천 드리고 싶은 서비스들은 이런 것들이 있습니다.


하지만 미래에는 없어졌을 수도 있고,
더 좋은 서비스도 있을 수 있기 때문에
더욱 중요한 것은 검색을 통해서
찾아낼 수 있는 능력이라는 것을 기억해 주세요.

 

 

자주 묻는 질문

질문 : upload file이 보이지 않습니다. 
답변 : 아래와 같이 저장소를 생성할 때 꼭 Initialize this repository with a README 옵션을 체크해주세요. 

 

질문 : 아래와 같은 오류가 뜹니다. Please verify your email address Before you can contribute on GitHub, we need you to verify your email address. An email containing verification instructions was sent to 이메일 주소.
답변 : 회원가입 후에 이메일 인증을 해야 한다는 의미입니다. 이메일로 가셔서 Verify email address 누르시면 됩니다. 

 

질문하실 때는 gihub id와 저장소 이름을 알려주시면 더 좋습니다. 

 

 

완성한 웹사이트를 알려주세요.

다른 사람들의 웹사이트를 구경하세요.

 

댓글

댓글 본문
  1. 안성
    완료
  2. 야생의코린이
    2024-05-05 완료
  3. 코딩앤수학
    2024-05-04 완료
  4. 이사야
    2024-05-01 완료!
  5. nathan
    2024-04-19 완료
  6. 마우스오른쪽버튼
    깃허브 만들 때, 다시 보기.
  7. 김태규
    24.4.1 완료
  8. 2024.03.16 어려웡
  9. hanryang
    왜 안나오지ㅠㅠ엉엉
  10. 심해
    2024.03.13.수
  11. hg042428
    https://github.com......git

    입니다. 제가 만든건데 아예 안되네요 ㅜ
    대화보기
    • Sansol Park
      혹시 site not found 404 라고 뜬 사이트 링크를 알려주실 수 있을까요?

      몇몇 링크는 접속이 안되기도 하는데, 아마 시간이 흘러서 등록자분이 삭제하신 것 같아요.

      다른 링크들은 정상적으로 접속됩니다!
      대화보기
      • hg042428
        site not found 404 라고 뜨고 위에 다른 사람들 웹사이트도 안들어가지는데 무슨 문제이며 어떻게 해결해야 하는걸까요?
      • 사슴튀김소스
        20240301
      • 4월의눈꽃
        20240211
      • 미래도비
        02/07
      • 로삶
        2024.01.26 완료
      • Sansol Park
        해당 오류 메시지를 번역하면 다음과 같습니다:

        "이 주소로 설정된 사이트에 요청된 파일이 없습니다.

        이것이 당신의 사이트라면, 파일 이름의 대소문자가 URL과 일치하는지 그리고 모든 파일 권한을 확인하세요.
        루트 URL(예: http://example.com/)의 경우, index.html 파일을 제공해야 합니다.

        GitHub Pages 사용에 대한 자세한 정보는 전체 문서를 읽어보세요."

        이 메시지의 해석은 다음과 같습니다:

        설정된 웹 주소에서 웹 브라우저가 찾고 있는 특정 파일을 찾을 수 없음을 알려주고 있습니다.
        만약 이 웹사이트가 사용자 소유라면, 두 가지를 확인해야 합니다:

        업로드된 파일 이름의 대소문자가 URL에 있는 대소문자와 정확히 일치하는지 확인하세요.

        파일이 올바른 권한으로 설정되어 있어야 합니다.

        루트 URL에 접속했을 때, 즉 도메인의 가장 상위 레벨(예를 들어, example.com 처럼)에 접속했을 때 index.html이라는 이름의 파일이 존재해야 합니다.

        이 메시지의 마지막 부분은 GitHub Pages를 사용하는 방법에 대해 더 알고 싶다면, 관련 문서를 참고하라고 권장하고 있습니다.
        대화보기
        • Sansol Park
          GitHub Actions를 통해 deploy가 완료되었음에도 사이트 접속 시 404 오류가 발생한다면, 몇 가지 확인해봐야 할 사항이 있습니다.

          1. 올바른 브랜치 설정: GitHub Pages는 설정에 따라 특정 브랜치의 파일을 호스팅합니다. Settings > Pages에서 설정된 브랜치가 deploy된 브랜치와 일치하는지 확인해 보세요.

          2. index.html 파일: GitHub Pages는 루트 URL에 대해 index.html 파일이 필요합니다. 이 파일이 저장소의 루트 또는 설정된 브랜치의 루트에 존재하는지 확인하세요.

          3. 파일 이름의 대소문자: URL은 대소문자를 구분합니다. 파일의 이름과 URL의 대소문자가 정확히 일치하는지 확인하세요.

          4. 파일 권한: 파일이 올바른 권한 설정으로 업로드되었는지 확인하세요. GitHub에서는 일반적으로 이 부분에 문제가 생기진 않지만, 혹시 모를 상황에 대비해 확인하는 것이 좋습니다.

          5. 최근에 변경사항을 반영하는 데 시간이 걸리는 경우: GitHub Pages는 변경사항을 반영하는 데 조금의 시간이 필요할 수 있습니다. 몇 분 기다린 후 다시 시도해 보세요.

          6. CNAME 설정: 도메인을 커스텀 도메인으로 설정했다면, CNAME 파일이 올바르게 설정되어 있는지도 확인해보세요.

          7. GitHub Actions 로그 확인: deploy 과정에서 문제가 발생했을 수 있습니다. Actions 탭에서 deploy 과정의 로그를 확인하여 에러가 없었는지 확인해 보세요.

          이 문제들을 해결해도 여전히 사이트가 보이지 않는다면, 저장소의 설정을 다시 한번 점검하거나 GitHub의 문서를 참고하시거나, 필요하다면 GitHub 지원팀에 문의할 수도 있습니다.

          cathxrine528/web1 저장소에 대한 구체적인 내용은 제가 직접 확인할 수 없지만, 위에서 언급한 사항들을 꼼꼼히 확인해 보시면 문제를 해결하는 데 도움이 될 것입니다. 혹시 다른 질문이나 추가적인 도움이 필요하시면 알려주세요.
          대화보기
          • Cathxrine
            Actions에서 deploy까지 되었는데 사이트 들어가면 안떠요.. 파일 업로드도 다 확인 했는데 어떤게 문제 일까요?
            cathxrine528/web1

            404
            File not found

            The site configured at this address does not contain the requested file.

            If this is your site, make sure that the filename case matches the URL as well as any file permissions.
            For root URLs (like http://example.com/) you must provide an index.html file.

            Read the full documentation for more information about using GitHub Pages.
          • 레나
            2024.01.21 완료
          • ECLECTIC
            시작
          • Sansol Park
            GitHub Pages가 새로운 변경사항을 반영하는데 몇 분 정도 지연이 있을 수 있습니다. 그래서 수정한 내용이 바로 반영되지 않을 수 있습니다. 이 지연은 GitHub의 서버 상태나 트래픽 등 여러 요인에 따라 달라질 수 있습니다.

            따라서, 수정한 파일을 업로드한 후 바로 확인하셨다면, 몇 분 후에 다시 한 번 확인해 보시는 것이 좋습니다.

            만약 몇 분 후에도 변경사항이 반영되지 않는다면, 다음과 같은 문제가 있을 수 있습니다:

            1. 파일이 올바르게 업로드되지 않았을 수 있습니다. GitHub 저장소에서 업로드한 파일이 정상적으로 보이는지 확인해 보세요.

            2. HTML, CSS, JavaScript 등의 코드에 오류가 있을 수 있습니다. 코드에 문제가 있다면, 웹 페이지가 정상적으로 빌드되지 않을 수 있습니다. 코드를 다시 한 번 확인해 보세요.

            3. GitHub Pages 설정에 문제가 있을 수 있습니다. GitHub 저장소의 'Settings'에서 'Pages' 섹션을 확인해 보세요. 'Source'가 올바르게 설정되어 있는지, 'Theme Chooser' 설정이 올바른지 확인해 보세요.

            위의 방법들로도 문제가 해결되지 않는다면, 더 구체적인 상황 설명이 필요할 수 있습니다. 어떤 파일을 어떻게 수정했는지, 어떤 에러 메시지가 나타나는지 등의 정보를 더 제공해주시면, 더 정확한 도움을 드릴 수 있습니다.

            GPT-4를 활용한 답변입니다.
            대화보기
            • 축구는개발,마음은개발
              24.01.08
              WEB1 - 18
            • 김현지
              2024.1.6
            • 20231218 done
            • ckstmznf
              안녕하세요 3년만에 감사인사를 드리네요.
              제가 개발을 처음 시작한지 벌써 3년이나 지났다는것도 신기하고
              이렇게 도움을 주신것도 감사합니다.
              대화보기
              • 수정파일 업로드는 됐는데 빌드가 새로안되는데 왜그런지아시는분...
              • 집게사장
                2023.11.23 수강완료
              • 므갱이
                2023.11.06 완료.

                처음으로 깃허브에 올려보게되네용..

                https://meugaeng.github.io......te/
              • KunWoo
                231030
              • nicktheman
                23.10.27
              • 샌디에고러버
                231019 수강 완
              • 4Tomorrow
                웹호스팅은 호스팅업체에 내 웹사이트 자료를 넘겨줘서 걔네들이 인터넷을 통해 고객들에게 서비스하도록 하는 것.
                html은 static해서 무료 웹호스팅 이용함. 아마존, 구글.
              • 개발자아내
                첫 배포! 개똥으로 만들었지만 넘 뿌듯! https://ttomyfly.github.io......te/
              • 리니웹
                230927 완료
              • 정연세
                230923완
              • 굴러들어온돌맹이
                230908 완
              • 정윤수
                23.09.05완
              • carpediem
                2023.09.02 완료!!
              • 소연
                23.09.01완료
              • 30늦은나이아니라고해줘
                2023-08-22 완료
              • 나쵸
                230821 완료
              • 양념묻은비니
                230821 완료
              • 니코니코드
                2023.08.13.
              • 후리후리
                2023.07.27
              • 코딩두
                23.07.06 완료
              • 아멜리아
                2023.07.05
              • setting > pages > Branch - main/save 이후에 액션을 들어가도 진행중인 화면이 안나오고
                Get started with GitHub Actions
                Build, test, and deploy your code. Make code reviews, branch management, and issue triaging work the way you want. Select a workflow to get started.
                이 문구가 나오는데 무엇이 문제인지 모르겠네요 ㅜㅜ
              • 맑고 묽게
                2023.06.30
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기