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. kate roh
    3번의 시도끝에 완성했어요!
    감사합니당:)
  2. 말차녹차
    2019/07/15 완료
  3. 김베리
    19.07.10
  4. Joshua Joo Hyeon Kim
    190708 감사합니다
  5. 분위기
    190701 완료
  6. 이규원
    19.06.27
  7. 루미큐브
    완료했습니다.
  8. Heisenberg
    `19.06.23 완료
  9. 야망쟁이
    출석함다ㅏ 일단 다음 영상을 보기보다는 이번영상까지 복습을 해야겠어요!
  10. dawnofus
    6/19
  11. 박혜연
    6/18 감사합니다!
  12. 치킨시켜먹어라
    당신들 초보 아니죠ㅜ 다들 왤케 잘합니까?! 나도 따라가야지
  13. 심심
  14. 정원철
    다시 복습 5/14
  15. 올파인
    190509출완
  16. axpeson
    5/8 코딩
    가즈아~
  17. 근육맨이될운명
    감사합니닷
  18. 코돌이
    서버 만들고 바로 들어갔을 때는 404 Not Found 떴는데, 알려주신대로 뒤에 /index.html 치니까 정상 접속되었습니다! 이제 링크 친구랑 공유해보려구요ㅋㅋㅋ
  19. 코딩합니다
    감사합니다
  20. Jongjin Park
    5/6 완료
  21. 코드장인
    완료
  22. 허공
    190504 감사합니다.
  23. 허정우
    완료
  24. qweasdfgzx
    repository 이름만 뜨는 거 해결하신 분 계신가요??ㅠㅠ 아까 전에는 됬는데 지금 계속 해봐도 안되네요ㅠㅠ
  25. 190427 완료 :)
  26. 영미
    서버이름만 나올때 저는 index.html 파일안에 <a href="index.html">페이지이름</a> 을 안적었었는데
    적고 나니까 해결됬습니다. 이유는 잘모르겠어요;
  27. 위준우
    완료
  28. reddog12
    자꾸 404오류가 떠서 왜 그런가 헤메었는데 파일명을 HTML.1(대문자)로 해서 안되던 거였네요ㅋㅋㅋㅋㅋ
  29. 하건필
    깃허브에서 그 주소로 사이트 열었는데 내용은 표시가 안되고 README.md. 내용 만
    표기가 되네요 web1. 이것만 나타네요 ㅠㅠ
    무엇을 잘못했는지 모르겠습니다
  30. cooipop
    완료요~~^^
  31. 밈밈님
    완료!!!!!
  32. 끝가지간다
    완료!
  33. 윤원빈
    감사합니다~!
  34. roamer
    static web hosting
  35. 맨 처음 페이지를 index.html로, a href로 연결된 맨 처음 페이지의 이름을 index.html로 고치세요. 그럼 오류는 사라집니다.
  36. Jineun Hong
    완료~ 고맙습니다.
  37. supernet
    완료
  38. 뽀코
    완료
  39. 경신중재이불치야
    github 감사합니다.
  40. 키무
    서버 이름만 뜨시는 분들 저도 같은 증상으로 헤맸는데 리파짓토리 이름을 소문자로만 쓰니까 정상적으로 나오더라구요ㅠㅜㅜ 같은 이유일지 모르겠지만 한번 해보시길ㅠ
  41. 물만난꼬부기
    완료
  42. 파일을 삭제하고 싶을때는 어떻게 하면 되나요?ㅠㅠ 그냥 저장소 자체를 삭제하면 될까요?
  43. 완료!
  44. Thank you!
  45. 백지홍
    3월 1일 자 완성. 아직 제대로 작성되지 않은 페이지이다. 아마 되는대로 수정해가겠다. 오늘부로 대학에 들어간다. 그 곳에서 학점을 3.5~4.0정도로 관리하며 반수를 준비할 계획이다. 저번 입시에서 노력했지만 결과는 씁쓸했다. 주변 외적 요인이 가장 컸지만, 내가 확신을 가지지 못하고 행동한 것이 결정적이었다. 물론 지금 내가 꿈에 확신을 가지고 있는지 잘 모르겠다. 하지만 계속 헤메가며 부닥치며 내가 이루려는 꿈을 이루려 한다. 나는 세상을 근사하게 완전히 바꿔버릴 것이다. 절대로 나아가는 동안 자만하지 않으며, 체스 챔피언처럼 한 수, 한 수를 치열하게 둘 것이다. 나는 굉장히 '충동적으로 행동하는 실행가'처럼 살아가겠다. 그 동안은 잠시 프로그래밍은 뒤에 놔두려한다. 내가 더 몰입할 수 있는 환경에서 프로그래밍을 하는 게 더 나을테니까. 올해 이과 반수를 정말로 그 누구보다 치열하게 준비하겠다. 지금 당장 해야될 공부를 할 거다. 1년이면 충분히 도전할 가치가 있으니까. 그리고 내가 하고 싶은 일에 모든 것을 쏟아부어 그 일을 할 거다.
  46. 완료
  47. 뚜기두밥
    사이트 다들 너무 아기자기하게 잘 만드셨네요ㅎㅎ 만나서 칭찬하고 싶어
  48. Jinseo Koo
    완료 !
  49. 칠칠석
    2019년 2월 23일

    완료!
  50. 제발요
    저도 마찬가지에요 누가 좀 알려주세요 ㅠ
    대화보기
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기