생활코딩

Coding Everybody

코스 전체목록

닫기

웹호스팅 (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. haha
    업로드하고나서 나중에 다른 부분을 추가하고 htdocs 여기에 넣고 다시 켜봤는데 추가한게 나오지가 않은데 왜그런가요? 그리고 혹시 동영상도 추가했는데 동영상은 어떻게 업로드하나요?
  2. egoing
    도움을 청하실 때는 정보를 풍부하게 주신다면 큰 도움이 된답니다.

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

    :)
    대화보기
    • OHOHAOHO
      깃허브에 제목밖에 안나오네요..ㅠ 아무리 해봐도 안돼요
    • egoing
      비슷힌 증상에 대한 아래 댓글 참고 부탁 드립니다.

      https://opentutorials.org......182
      대화보기
      • 고구마100개
        혼자 새롭게 만들어 봤는데요
        read.me 에 써있는 이름만 나옵니다.

        댓글에 나온 방식 다 해보았고

        강의대로 만든거는 되는데

        왜 안될까요???

        답변 좀 주세요
      • 나래손
        강의가 재미있어요ㅋㅋㅋㅋ
      • 기훈
        뒤에 주소를 추가할 때 index.html이라고 쓰라고 하시잖아요
        그런데 본인이 Index 글자를 첫글자 대문자로 만들었으면
        주소창에서 Index.html로 첫글자대문자로 추가하니까 되네요~
      • 현빈
        드디어 궁금증 해결..... 정말 감사합니다.
        사랑합니다 ㅋㅋㅋㅋㅋㅋㅋ
        대화보기
        • winers79@naver.com
          올리신 파일 이름 index.html로 변경하셨나요 우선 순위가 index.html이 파일이 없을 경우 resume 파일이 우선권을 가진다고 하네요 올린 html 파일 이름 변경해서 다시 커밋하세요
          대화보기
          • 현빈
            404 에러보다는
            readme.md파일에 있는 글자만 출력이 되는지 이유를 모르겠습니다. ㅠㅠㅠ
            애초에 파일 올릴 때 create new file로 하면 코드친대로 화면에 출력이 되는 데
            도대체 왜 upload files로 올리기만 하면 README.md 파일에 있는 글자만 화면에 출력이 되나요??

            이것때문에 답답해서 못하고 있슴다 ㅠㅠ
            대화보기
            • 소월
              404에러뜰때..
              1. README 파일 이름을 소문자로 변경 readme.md
              2. 1.html 파일 이름을 index.html 로 변경

              ^^
            • Hyun
              Readme 파일에 있는 글자만 뜨는 데 이유가 뭔가요??
              atom에서 작업한 파일이 안뜨고 왜 readme파일만 화면에 나오는 거죠?>
              readme 파일을 제거해도 되는 건가요?
              대화보기
              • egoing
                좀 기다려보시면 나오지 않나요? 금방 구동이 되지 않아서요.
                대화보기
                • Hyun
                  404오류가 왜뜨는 건지 이해가 안갑니다.
                  다른 댓글보고 참고했는데. README > readme로 바꾸고 재설정까지 했는데... ㅠㅠㅠㅠㅠ
                  해결법을 모르겠네요
                • blaky
                  프로그래밍은 교양으로 몇 번 배웠는데 실제로 웹 호스트에 올린 건 이거 보면서 따라한 게 처음이네요ㅋㅋ
                  넘넘 감사합니다
                • 띨띨구
                  오오!! 이고잉님 강의 잘 듣고 만들었습니다!!

                  너무너무 신기하고 재미있습니다!! 감사합니다!!
                • 서춘열
                  감사합니다
                  2년전부터 웹사이트 제작하려 하였으나 주의만 맴돌다
                  올해 50이 되어서 용기내어 도전하고 있슴다.
                  강의 내용이 넘 재미 있네요 ^^

                  운명이 어케 바뀔지는 모르겠지만 삶의 희망을 주신분
                  egoing 님 넘 감사합니다.
                • 공부가좋아
                  아...가르쳐주신 대로 한 거 같은데...
                  주소까지 다 생성됐는데 누르면 404페이지로 뜨네요.
                  왜 그런 걸까요?
                  다 똑같이 따라한 거 같은데...어디선가 문제가 있었던 거겠죠?
                  한번 찬찬히 다시 봐봐야겠습니다.....

                  --> 안 되면 5분 후에 다시 해보라는 말씀이 뒤늦게 보여서,
                  조금 있다가 다시 시도했는데 됐어요.
                  너무 좋아요.^^
                • 햅싸
                  0511 감사합니다
                • 햅싸
                  0511 감사합니다
                • 페이지는 잘 나오는데
                  1. HTML 2. CSS 3. JaveScript
                  를 클릭하였을때, 다른 페이지로 이동이 되지않습니다..ㅠㅠ
                  - readme체크 하였고
                  - README.md 를 readme.md 로 바꾸고
                  - Settings 탭에서 master branch 설정을 재설정 하였습니다.
                  그런데도 되지를 않네요 ㅠㅠ
                  => 익스플로러에서는 잘 됩니다. / 다만 다른 분들은 다 파폭에서도 링크연결이 되는데 왜 저만 안될까요..?ㅠㅠ
                  해결=>2.CSS , 3.JaveScript 파일명 뒤에 확장자인 .html 를 기재 후 index.html 파일에도 href="2.CSS.html" 로 수정함.
                  문제=>확장자를 기재하지 않아 생긴 문제임.
                • 감사합니다.
                • 별별이
                  180423 / 감사합니다.
                • 스페이스몽키
                  감사합니다. 꿈을 꿀 수 있게 되었어요
                • rekiss428
                  web1 이라고만 나왔을 때

                  두가지 작업을 해봤더니 잘 보입니다.

                  한가지는

                  1.README.md 를 readme.md 로 바꾸고

                  2. Settings 탭에서 master branch 설정을 재설정

                  해보니깐 잘 나오네요
                  대화보기
                  • Dreaming_Joyy
                    제 웹을 세상의 모든 사람들이 들어오고 함꼐 정보를 공유할 수 있다니. 행복합니다!!!! Web server에 대해 얼른 알아보고 싶습니다!!!!
                  • egoing
                    넵~
                    대화보기
                    • 하빛
                      내가 혼자 홈페이지 만들고 웹서버에 등록하고

                      사람들이 검색해서 내 서버를 자유롭게 들어올 수 있는거죠?
                    • HTML을 소문자 html로 변경하시고 다시 해보세요.
                      대화보기
                      • 재봉2
                        인문계열 전공자도 알기 쉽게 알려준다는 강의 듣다 매번 포기했는데 ,
                        생활코딩 이 강의는 정말 쉽고 재미있네요
                        첫 강의부터 쭉 잘 듣고 있습니다.
                        넘넘넘넘넘넘넘 *1000000000 감사드립니다.
                      • Songhee
                        최고네요! 공유할수도 있게 만들어주셨네요 ^^ 덕분에 즐겁게 배우고있습니다~ 감사해요!
                      • 정승호
                        저두그래요ㅜ
                        대화보기
                        • 정승호
                          저도그래요.ㅜ web1만떠요
                          대화보기
                          • cactusky
                            정말 신기하고 재미있습니다!
                          • 제갈량
                            github에 대해 잘 알지 못했는데
                            이 강의로 확실히 알게 됐습니다.
                            저는 개인 웹 서버를 가지고 있는데요 내년에 서비스가 종료되면
                            그 이후가 걱정이 많이 됐는데
                            이 guthub로 이용하면 되겠네요.
                            감사합니다. ^^
                          • 초연
                            우와신기해요 재밌어요
                          • 구자현
                            404 에러 페이지 떠서 댓글들 읽어보던중에 찾아서,

                            README.md 를 readme.md 로 바꾸니까 더이상 에러페이지가 뜨지 않습니다.

                            단순히 대문자만 소문자로 바꾸면 되는 문제인가요?
                          • cgleebhp
                            저두 404 라고 뜨는데...ㅠㅠ
                            강제로 주소창 뒤에 index.html을 넣어도 똑같네요...
                            강의내용 그대로 따라 했는데.. 왜 안 될까요...??
                          • 유진희
                            저도그래요 ㅠ
                            대화보기
                            • hodduck0121
                              감사합니다.
                            • LEESHAN
                              안녕하세요 수업 굉장히 잘 보고 있습니다. !
                              완전 처음 시작하는 저도 이해가 되게 설명을 잘해주시니 감사할 따름입니다.
                              오늘 강의를 듣고 github으로 주소를 만들었어요. 그런데 web1만 뜹니다. 왜 이런걸까요
                            • 잘봤습니다~!!!
                            • 김민승
                              웹 호스팅에 대해서 배웠습니다~ github 아이디 드디어 만들었네요~
                            • 최동희
                              PHP나 Java 소스가 동작하기 위해서는 PHP 서버나 Java 서버 프로그램이 설치되어 있어야 하는데, Github pages 에서는 해당 서비스를 지원하지 않고 있습니다. 대안에 대한 논의가 stack overflow에 있어 주소 적어 둡니다.
                              https://stackoverflow.com......ive
                              대화보기
                              • 최동희
                                index.html 파일이 없어서 그렇습니다.
                                동일한 문제를 겪는 분들이 많은 듯 합니다.
                                아래의 설명을 참고하시기 바랍니다.
                                https://github.com......184
                                대화보기
                                • 녀뇨
                                  만약 제 웹페이지에 php나 java소스가 들어가게 되면 github에서 웹서버주소를 만들어 줄 수가 없는건가요?
                                • Mj Hong
                                  https://github.com......git

                                  무얼 놓친 걸까요???
                                  몇번을 다시 해 봐도
                                  이름만 뜨고 열리질 않습니다
                                • egoing
                                  반영했습니다!
                                  대화보기
                                  • Chaerim Song
                                    꿀잼!!!
                                  • keynemo
                                    다이나믹 웹 호스팅도 알려주세요
                                  버전 관리
                                  egoing
                                  현재 버전
                                  선택 버전
                                  graphittie 자세히 보기