WEB1 - HTML & Internet

웹호스팅 (github pages)

 

 

 

---

 

 

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

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

 

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

 

 

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

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 

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

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

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

 

 

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

 

 

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

1. choose your files(파일을 선택하세요)을 누르세요. 프로젝트 폴더에 있는 파일을 다중선택합니다.

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

 

 

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

 

 

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

Github Pages 항목에서 master branch를 선택하고 Select branch 중 master branch를 선택합니다. 그리고 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. 데미안
    https://mijisu.github.io/1/1.html 은 동작하네요.
    대화보기
    • YS
      clear
    • 혼포
      완료
    • 미지수
      404에러가 떠요 계속.. 뭐가 뭔지 모르겠어서 계속 헤매는 중이예요. 어떻게 치면 잘 나오고 .. 이유 좀 알려주실 수 있을까요?
      https://mijisu.github.io/1/
      주소입니다
    • 타나
      감사합니다. 정말 좋은 강의에요.
    • Mr.Kwon
      GitHub에서 파일 다 업로드 하고 master branch save까지 했는데 웹페이지에 저장소 제목만 뜹니다..
      어떻게해야 업로드한 html 페이지가 뜨게 할 수 있죠.. ㅠ
    • 필립
      완료
    • Aaron Soon Woo Kwon
      완료
    • 완료!
    • 이용석
      안녕하세요?
      bitnami wampstack-7.1.20-1다운받아 공부 하던중 매니저 먼트 서버 리스타트 버튼 클릭후 스티트가 안되어
      삭제하고 다시 다운받아 볼려니 mysql폴더내의 bin, data파일이 열려있어 삭제못한다고 하니 어떻게 하면 삭제후
      다시 다운받을수 있을까요? 무엇이 문제인지 몰라서 차근차근 삭제하다보니 그파일 땜에 삭제가안되었는데 다시 쓸수도 다운받을수도 참 난감하네요!!!
      해결방법 아시는분 알려주세요 Help me please!
    • 김성윤
      CLEAR
    • 안녕하세요~ 정말 인간적이고 도움이 많이 되는 수업 만끽하고있습니다. 정말 감사합니다.

      파일명을 index로 바꾸니 내용이 안보이는 문제가 해결되었는데, 항상 첫페이지는 index로 해야하나요? 그리고 수정후 업로드시 기존 파일은 삭제하지 않아도 되나요? 삭제하는 방법을 모르겠습니다 ㅠㅠ

      웹 서버를 운영할때 제 ip주소뒤에 /(파일제목).html을 해도 페이지를 찾을 수 없다고 뜹니다 ㅠㅠ 그냥 go to application하면 잘 뜨구요...어떻게 해결해야하나요 ㅠ?
    • 문일용
      7일차 클리어~^^
    • Allen
      좋은 사이트 공유 감사드립니다.
    • 공부다시해보자
      clear!
    • 김소윤
      좋은 강의 감사합니다.
    • ㄸㄸ
      안에 html 여러개 모아놓고, 또, 이미지 폴더를 따로 만들어서 링크해놨었는데( <img src="/img/xx.png>) 이런식으로 폴더를 또 만들어 놨었는데, 그건 업로드로 안들어가지네요.
    • 박세진
      감사합니다
    • 박수빈
      감사합니다!
    • 제리미
      드디어 되었습니다,!
    • kong'st
      주제를 뭘로 정해야할지 고민하는 1인 입니다...
      강의 정말 잘 보고 있으면, 감사를 표합니다..
    • Peter Dowon Kwon
      웹 호스팅 완료~^^
    • Suhyun
      좋은 강의 감사합니다~!
    • KyeongSik Kim
      good!!
    • 유니
      감사합니다 ㅎㅎ 유투브 동영상을 업로드 하는 건 어떻게 하나요 ??
    • IWBAP
      맛있는 강의 감사합니다! ^^
    • 악동
      감사합니다
    • James
      주말도 야학 갑니다!
    • 시간속으로
      완료
    • soosoo
      고맙습니다.ㅠㅠ HTML 배워봐야지 하는 생각은 갖고있었는데 미루고 미루고 있었어요 3일전에인가 깃허브둘러보다가 ektl HTML에서 막혀서 이곳을 발견한건데, 마침 또 그 많은 호스팅 중에서 깃허브를 선택해주시다니.. 고맙습니다.ㅠ
    • 사차원
      완성한 웹사이트를 알려주세요. 이거 구글 서비스죠???

      이게 또 신기하네요~~~ ^^
    • egoing
      와 멋있어요 :)
      대화보기
      • kimmy
        404 오류가 나서 댓글보고 read를 소문자로 바꾸니까 바로 뜨네요 ㅎㅎ 이고잉 선생님 감사합니다 ㅠ ㅠ주륵 제가 사이트를 만들다니... https://gmlwo1031.github.io......rs/ :) 지금 자바 듣고있는데 자바들으면서 더 적용해보겠습니다 감사해요 ㅎㅎ
      • 감사합니다.
      • 웹공부푹빠짐
        너주 재밌고 유익한 강의 잘보고있습니다^^ 감사합니다!!

        질문이 있어 글올립니다.
        자주묻는 질문에 사진이 깨지는 문제가 있어
        꼭 Initialize this repository with a README 기존에도 체크하였지만 혹시나하고 다 삭제하고 다시 체크하고 하였는데도 사진이 깨지는 문제가 발생하는데 ㅠㅠ 혹시 추측되는 문제 있으신가요..
      • YiWon
        와 깃허브를 이용하게 되다니 ㅠㅠ 뿌듯하네요. 감사합니다!
      • 춘천이
        감사합니다~
      • maxpark
        저도 계속 README가 떠서 이것 저것 해봤는데요

        https://max7819.github.io......tml

        이런식으로 뒤에 /<html파일명>

        치니까 되긴하네요
      • 과천영일
        인터넷주소를 치니 제가 만든 웹페이지가 나오네요..신기신기..
      • 리오
        index 파일이 없어서 그래요..index.html 로 수정해보세요
        대화보기
        • 리오
          안녕하세요 강의 정말 잘 보고있습니다.
          궁금한게 있는데 어떤게 우리가 만든 html 페이지를 기준으로 웹주소가 생성이 된건지 궁금합니다.
          그리고 저는 계속 readme파일이 오픈되네요..설정법 알려주시면 감사하겠습니다.
        • egoing
          넵 거기서는 서버측 기술은 제공하지 않아요~
          대화보기
          • ruviter@naver.com
            github에는 php서버를 작동할 수 없는건가요? php파일을 올려봤는데 404에러만 뜨네요ㅠ
          • 해리
            오 제가 만든 웹페이지가 저기에! 예전에 열심히 만들고 잊어버렸는데 아직 살아 있네요 감사합니다 이고잉님
          • 추가한 기능을 X라고 할때
            <P> x </p>
            피테그로 감싸보세요.
            기존의 코드랑 간섭을 받는건 아닌지 태그가 끝나는 부분에
            </br>을 삽입해서 코드와 코드간 줄바꿈을 해줘보세요.

            html 동영상삽인관련 아래의 블로그에 상세하게 나와있습니다. 참조해보세요.
            http://studyforus.tistory.com/98
            대화보기
            • 깃허브에서 폴더안에 파일을 넣어놓고
              HTML 주소에서 파일을 로드하려니까 에러창이 자꾸뜨네요.
              폴더를 없애버리고 경로를 매우간단하게 바꾸니까 에러없이 잘뜹니다.

              /html/page_01.html -> page_01.html
              /img/main.jpg -> main.jpg
            • 이다예
              @Sia 아 저도 님이 문제삼으신 1번이 저도 문제였는데요. 님처럼 해봤는데도 안되네요.
              대화보기
              • 감사합니다.
              • 업로드하고나서 나중에 다른 부분을 추가하고 htdocs 여기에 넣고 다시 켜봤는데 추가한게 나오지가 않은데 왜그런가요? 그리고 혹시 동영상도 추가했는데 동영상은 어떻게 업로드하나요?
              • egoing
                도움을 청하실 때는 정보를 풍부하게 주신다면 큰 도움이 된답니다.

                github의 주소와 github의 홈페이지 주소등을 알려주시면 다른 분들이 도움을 드리는데 중요한 단서가 될 것 같습니다.

                :)
                대화보기
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기