생활코딩

Coding Everybody

코스 전체목록

닫기

웹호스팅 github pages (2022년 수정판)

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 누르시면 됩니다. 

 

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

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

댓글

댓글 본문
  1. 우주소년AtOm
    완료!
  2. 김강민
    혹시 업로드 할때 파일이 100개 이상이거나 100메가가 넘어도 업로드 하는 방법이 있나요? 방법 공유해주시면 감사하겠습니다.
  3. 아까그애
    2022-01-20 완료
  4. chio
    20220119
  5. 220117
  6. 헬코
    thank u
  7. 김멈머
    220111
  8. habong
    220111
  9. tori
    답변 감사합니다 ㅎㅎ 확인해볼게요!!
    대화보기
    • 달수
      20220107
    • 권힛치
      깃허브가 바뀐 부분이 생각보다 많네요 ㅠㅠ
    • 전역4달전시작
      칸료
    • 열정jk
      220104 감사합니다
    • NKBK
      22.01.04
    • Sansol Park
      html/css 로 가능합니다.

      아래 강의들 참고하시면 도움이 되실거에요.

      배경꾸미기
      https://opentutorials.org......969
      css의 등장
      https://opentutorials.org......312
      글자색 꾸미기
      https://opentutorials.org......965
      html 사전
      https://opentutorials.org......811

      마우스를 올리면 설명창이 뜨는 것도 html 태그 안에 설명을 넣어서 해결할 수 있습니다.
      https://www.opentutorials.org......943
      https://opentutorials.org....../66

      alt 나 title 태그를 사용하거나
      오튜 댓글들을 보니 긴 설명은 longdesc 태그를 사용한다고 하네요.
      대화보기
      • 김두현
        22.01.02
      • tori
        다른 분들이 올리신 사이트를 보면 글씨에 색이 칠해져있거나 글 배경에 색이 들어 있고 마우스를 올리면 설명 창이 뜨는데 이런건 어떻게 하는건가요? 강의에선 못 봤던거 같은데.. 혹시 이게 css라는 걸까요?
      • chipkkang9
        21.12.31 완료
      • yogitzer
        완료
      • yeunjeong
        2021.12.24
      • ㅁㄱ
        완료
      • 요Q르트
        21/12/21 완료
      • 다몽이
        완료
      • 과거부터미래까지
        2021-12-15 수강완료
        알려주신 내용대로 Github 사이트에서 앞서 만들었던 html 파일을 업로드 하고
        [settings] - [pages] - [Source] 에서 None > main 으로 변경하여도
        404 pages not found가 뜨시는 분들은 구글링 좀 해보셔도 나오겠지만,
        github에 html 파일을 올린다고 바로 빌드가 반영되는게 아닌거 같아요.
        index.html 파일을 조금 수정하고 다시 commit 하면 바로 접속이 되네요.
        혹시 오류 뜨시는 분들 참고하세요!!
      • 롤링
        오후 6:12 2021-12-13
      • 그니
        21.12.10 수강완료
      • 내리
        21.12.10 수강완료
      • 곰이된쑥이
        제가 웹을 예시를 보고 하나 만들었는데 깃허브 main branch후에 사이트를 클릭했는데 결과가 다르게 나와요... 어떻게 해야하나요?
      • ProTaTo
        21.11.29 수강완료
      • klozer9999
        21.11.29 완료
      • Suky Choi
        21.11.29 완료
      • 크림치즈마늘빵
        21.11.29
      • 크림치즈마늘빵
        와...진짜 멋있습니다...!
        대화보기
        • JeffSam
          21.11.28.완료.
        • 민택기
          21.11.27 완료
        • 코딩혁명
          2021.11.21.감사합니다
        • 코딩혁명
          2021.11.21 수강완료.감사합니다.
        • survive
          21.11.19
        • 2021.11.18 이것만 배워서 예제를 저렇게 만든건가요... 와
        • aristia
          2021.11.15
        • 이슬
        • 20211113 github를 이용한 static web hosting.
        • 수정
          감사합니다! 덕분에 열심히 만든 제 웹사이트가 살아서 움직이는 기분이에요!
          아직 부족한 것도 많고 배울 것도 많고 그러지만 더 열심히 해보겠습니다! 감사드려요 ^^
          대화보기
          • 수정
            좋은 칭찬 해주시니까 부끄럽기도 하고 막 막 더 열심히 공부하고 싶은 마음이 드네요!
            더 열심히 해볼게요! 칭찬 감사합니다!!!
            대화보기
            • 이선비
              첫번재 만든 연습용 사이트인데 엄청 예쁩니다 ^_^
              라이언 플레이 리스트 일할 때 듣기 딱 좋네요.
              대화보기
              • Sansol Park
                와, 진짜 예쁘게 잘만드셨네요!
                카카오프렌즈에서 dj 라이언 유튜브채널이 있다는 것도 처음 알았어요!
                대화보기
                • 수정
                  안녕하세요!
                  이고잉님 수업들으면서 열심히 만들어본 제 개인 연습용 사이트에요.
                  사람들에게 도움이 될 수 있는 웹페이지를 만들고 운영하는게 제 목표이고, 이건 제 첫번째 프로젝트 페이지에요!

                  https://ourbeautifuldiamond.github.io......tml

                  유튜브 카카오프렌즈 채널에서 공개하는 플레이리스트를 듣다가 영감받아서 4주정도에 걸쳐서 조금씩 만들어봤어요.
                  모든 이미지와 브랜드 로고는 카카오톡에서 직접 따온거고요.
                  파비콘과 사용되는 모든 문구 그리고 기타 디자인적 부분은 제가 직접 만들거나 애플 공식 홈페이지와 삶에서 영감을 받고 만들어봤어요.

                  궁금하시면 한번씩 놀러와주세요! 유용하게 쓰셔도 되구요!
                  댓글도 달아주시고 링크 걸어주시면 저도 한번씩 놀러갈게요!
                  다 같이 열심히 배워서 멋진 사이트 만들어봐요 우리!
                  * ^_^ *
                • 2021-11-07 완료
                • 게임장
                  넘나 재밌잖아 ㅠ
                • 21.10.28. 시험기간엔 딴 공부가 제일재밌어. 드가자 ~
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기