생활코딩

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. 죠르지오
    23.02.05
  2. 문등리 까마귀
    2023.02.01 20:49
  3. 고원규
    2023.01.30
  4. 열공강아지
    1/27
  5. TheDuck
    2023. 01. 18 완료
  6. 수정
    뿔고래님 쵝오!!
    대화보기
    • 수정
      원래 공부라는건 처음 시작할땐 모르는거 투성이에요!
      모를땐 검색도 해보고 하나하나 실패하며 부딪혀보면서 배우는게
      제 경험에도 그렇고 많은 분들도 얘기하시는 거처럼 가장 빠른 방법인 거 같아요!

      실패라고 생각하지 말구 문제를 해결해나가면서 내가 오늘, 또 새로운 걸 배웠구나! 라고 자기 자신을 칭찬하면서
      열심히 해봐요 sue님!
      화이팅!
      대화보기
      • 수정
        짝짝짝!
        생활코딩님이 알려주신 방법대로 잘 따라오셨어요!
        너무 잘하셨습니다 드가자님!

        닉네임처럼 이제 웹 개발 공부의 시작이니까 앞으로도 힘내서 더 공부 들가봐요 우리!
        아자아자!
        대화보기
        • 수정
          맞아요! 역시 공부는 같이해야 더 오래오래 할 수 있는 거 같아요!

          생활코딩님이 알려준 방법에 추가로 새로운 링크도 걸어보고 슬라이드 효과도 넣어보셨네요!
          멋져요 태강님!
          나중에 CSS부분도 조금만 공부하시면 이미지 사이즈 적절하게 조정해서 표현해보실 수 있을거에요!
          화이팅입니당!
          대화보기
          • 수정
            멋진 사이트를 만들어보신 거 축하드려요! 앞으로도 열심히해봐요! 아자아자
            대화보기
            • 수정
              안녕하세요 여러분!
              다들 웹 페이지를 처음 만들어보는 감동 잘 느끼고 계시나요?
              저는 1년 전쯤에 이 강의를 수강한 생활코딩 애청자에요!

              다들 지금 느끼는 이 감동을 여기서만 끝내지 마시고 주위 친구나 가족에게도 보여주며 좋은 피드백 많이 누려보세요!
              그래야만 앞으로 더 많은걸 만들어보고 싶다는 열망의 불씨를 활활 키울 수 있어요.
              저는 그 열망을 잘 유지한채 계속 틈날때마다 조금씩 공부를 유지하고 있답니다.

              그래서 이번에도 새롭게 웹사이트를 만들었어요.
              https://wordcount.kr/ (글자수를 계산할 수 있는 사이트에요!)

              저는 이제 도메인 이름도 설정할 수 있고, 제가 원하는 아이디어가 있다면 웹에 검색해서 찾아가며 배우는 방법으로 그 아이디어를 어느정도 실현할 수 있게 된 거 같아요.

              저도 아직 많이 부족하지만 여러분보다 한 두단계 앞서 배움을 이어나가고 있는 애청자로써
              여러분들에게 좋은 동기를 가져다주기 위해서 이렇게 글을 작성해봐요!

              제 꿈은 많은 사람들이 이용할 수 있는 웹사이트를 만드는 일입니다!
              여러분들도 열심히해서 꼭! 이 배움을 시작할때 가졌던 자신만의 꿈을 이뤄나가시길 바라요!
              그럼 화이팅!
            • 고냥이
              22.12.30 냐옹
            • 틴더
              2022.12.28 대문자 때문에 안될 수 있나? 어쨋든 해결 완료!
            • 오오
              22.12.22
            • 민권
              22.12.21
            • 2022.12.19
            • 감자
              22.11.23 복습 다시시작!
            • 빵먹고싶다
              22.11.21
            • 22.11.18-1
            • 치즈공장사장
              https://cheesefactorymk.github.io......tml
              취미로 제가찾아보는 헬스장가기전 스트레칭관련 정보모음사이트를만들어봤습니다.
            • 박태강
              드디어 홈페이지를 만들었어요.감사합니다.
              좋은 뜻에서 같이 공부를 해보는 스터디도 직접 만든 사이트에서 소개하고 있어요.
              같이 이고잉님의 강의를 들을 학우 분들을 모집합니다 !!!
              https://parktaegang.github.io......ng/
            • 무즈
              2022.11.7 ㅎㅇㅌ
            • snowfield
              아마 DDUNY님의 GitID가 DDUNY이고 Repository name을 WOW로 설정하셨다면 주소가 https://DDUNY.github.io/WOW/ 이실거에요
              대화보기
              • 드가자
                https://degaja.github.io/mm6cm_
                제가 만든 사이트에 놀러오세요
              • 드가자
                index.html 파일이 있는지 확인해보세요
                대화보기
                • 안녕하세요~ 선생님 질문이 있습니다!
                  setting > pages > Branch - main/save 설정 뒤 액션에서도 page bulid and deployment 도 다 잘 된 것으로 확인 되는데요~ 주소에 들어가보면 404 File not found 에러가 뜨는데 왜 그럴까요 ㅠㅠ 파일은 다 잘 들어가져 있는데, 파일명을 뭔가 바꿔야 하는건지 질문 드립니다!
                  Eung-ddony/1st-web-site
                • 엠제이
                  10122022
                • 보통사람 박코딩
                  할수있다
                • 아아뜨아
                  221004
                • been06
                  220923
                • 코딩드림
                  22.09.22
                • 마미몬
                  2022.9.22
                • 장삼이사
                  와 소름 돋았어요 ㅠㅠㅠㅠ 내가 드디어 홈페이지를 만들 수 있다니...
                • 코딩왕초보
                  2022.09.15
                • 동지남매 아버지
                  호스팅 되었네요 신기합니다 ㅎㅎㅎ
                • index.html 로 하니까 바꼈어요! 감사해요 ㅠㅠ
                  원인은 근데 이해하지 못하겠네용
                  대화보기
                  • 신주현
                    예제들 보는 재미가 있네요! 이런 소중한 공간과 강의 만들어 주셔서 감사합니다 :)
                  • 신주현
                    22.09.06 완료
                  • 첫 페이지 제목을 index.html로 바꿔보시면 될 것 같습니다! 저도 다른 걸로 저장했다가 404 떠서 당황했네요ㅜㅜ
                    대화보기
                    • 당당
                      2022.09.05
                    • 바켠진
                      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.
                      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.
                      왜이러는걸까요
                    • 22.08.20 완료
                    • MelonMusk
                      08/13
                    • 모카
                      2022.08.16
                    • 참새튀김
                      22.08.14
                    • 이나츄
                      22.08.11 완료
                    • 김제갈
                      22.08.10
                    • 헤밍웨이
                      220809 완료
                    • Daniel
                      2022.08.09 완료했습니다.
                    • 뿔고래
                      내가 누구?
                      웹 사이트를 만들어서 서비스까지 한 사람
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기