겁나 빠른 웹 레시피

github를 웹호스팅으로 이용하기

수업소개

git은 프로그램의 소스코드의 변경사항(버전)을 관리해주는 프로그램입니다. github은 git으로 관리되고 있는 버전을 보관해주는 온라인 서비스입니다. 이 서비스에서는 수 많은 오픈소스가 만들어지고 있기 때문에 프로그래밍의 세계에서 단순한 온라인 서비스 이상의 의미를 가지고 있습니다. 이 서비스를 이용하면 html, css, javascript등을 이용해서 웹사이트를 운영할 수 있습니다. 또 도메인을 붙일수도 있습니다. 

사용기술

주요개념

여기서는 git을 이용한 간단한 버전관리부터, github를 이용한 소스코드 공유, github를 이용해서 웹사이트를 운영하는 방법, freenom을 이용해서 도메인을 구입하는 방법, 도메인을 github에 붙여서 나만의 도메인으로 웹사이트를 운영하는 방법을 알아봅니다. 

수업

수업 소개 

git을 이용한 버전관리 

 github.com으로 소스 공유

github  page 기능을 이용한 웹사이트 운영

도메인 적용하기 (freenom.com)

참고

github을 이용해서 자신의 포트폴리오를 운영중인 신동주님의 멋진 사이트입니다. 

Mopsy

댓글

댓글 본문
  1. Sansol Park
    제가 이해한 바로는, Github를 이용해 웹 호스팅을 하고 있는데, 페이지를 접속할 때 CSS가 제대로 적용되지 않아 HTML 태그와 이미지만 보인다는 것 같습니다. 이 문제의 원인은 여러 가지가 있을 수 있습니다.

    CSS 파일 경로 문제: HTML에서 CSS 파일을 참조할 때, 상대 경로 혹은 절대 경로를 잘못 지정한 경우 CSS 파일을 찾지 못해 스타일이 적용되지 않을 수 있습니다. 경로를 확인해 보세요.

    CSS 파일의 로딩 문제: 웹 페이지는 HTML, CSS, JavaScript 파일을 순차적으로 로딩합니다. 이 과정에서 CSS 파일이 제대로 로딩되지 않았다면, 스타일이 적용되지 않을 수 있습니다. 이럴 때는 웹 페이지를 새로고침하거나 캐시를 지워보세요.

    호스팅 설정 문제: Github Pages는 기본적으로 Jekyll을 이용해 정적 웹사이트를 구축합니다. 만약 Jekyll 설정에 문제가 있다면, CSS 파일이 제대로 적용되지 않을 수 있습니다. Jekyll 설정을 확인해 보세요.

    CSS 파일의 문법 오류: CSS 파일 자체에 문법 오류가 있을 경우, 웹 브라우저는 오류 부분을 무시하고 그 이후의 스타일을 적용하지 않을 수 있습니다. CSS 파일의 문법을 확인해 보세요.

    이 외에도 여러 원인이 있을 수 있으니, 문제가 해결되지 않는다면 구체적인 상황을 설명해 주시면 좀 더 정확한 도움을 드릴 수 있습니다.
    대화보기
    • gaory
      깃허브를 활용해서 파일 정상 업로드 하고 다 하고 페이지 접속하는데 자꾸 CSS가 벗겨져서 나옵니다.
      그러니까, HTML 태그와 이미지 날것이 그대로 띄워지는데, 또 간혹 되는날도 있습니다(?) 왜 이러는건지
      구글링을 해도 모르겠습니다.
    • jeisyoon
      2021.07.11 Using Github for Web Hosting - OK
      다시 복습 하고 갑니다. 감사합니다
    • jeisyoon
      2021.07.11 Using Github for Web Hosting - OK
    • 마릴곰이
      정말이지 너무나 감사합니다! 정말 많이 배우고 있습니다 스승님~~~!!!!!
    • 1214sw
      Domain's DNS record could not be retrieved.
      라고 떠서 20분넘게 기다려도 안 됐는데

      1시간 지나고나니 되네요... 안 되시는 분들 한 번 인내심을 갖고 기다려보시길...
    • 1214sw
      깃허브 설정에
      Domain's DNS record could not be retrieved.
      라고 뜨면서 안 되네요 ㅠㅠ
    • 주니어개발자
      [2020/12/29 현재 시점]

      마지막 영상인 도메인 적용하기 (freenom.com) 에서
      freenom DNS 관리에서
      github ip쪽으로 a레코드 설정하는 부분에 대해 소개하십니다.

      현재 댓글 작성 시점 기준으로
      Learn more 링크로 들어가서 소개해주는 4개의 ip 중 1개 이상을 등록해주시면 됩니다
      ///
      To create an A record, point your apex domain to the IP addresses for GitHub Pages.
      185.199.108.153
      185.199.109.153
      185.199.110.153
      185.199.111.153
      ///

      바로 안되시더라도 갱신될 때까지 조금 기다리시면 됩니다.
    • LILIS
      자바스크립트는 전부 동작합니다. 다만 PHP와 같이 서버사이드는 동작하기 어렵습니다.
      대화보기
      • 김훈
        좋은 내용 감사합니다.
      • 이런식으로 만든 홈페이지에서 안되는 기능이 혹시 있나요?
        자바스크립트나 이런거 모두 작동이 된나요?
      • jaballet
        감사합니다
      • index.html 파일을 만들고 url에도 index.html 을 추가하였는데 404 에러가 뜨는데 무슨이유일까여
      • 우탄
        마침 프리놈 1년 무료가 끝나서 들어왔습니다ㅎ 답변 감사합니당.
        현재 깃헙에는
        185.199.108.153
        185.199.109.153
        185.199.110.153
        185.199.111.153
        4개가 올라와 있네요.
        대화보기
        • 지나가다 1년전 질문에
          index 라는 이름은 일종의 약속같이 생각하시면 됩니다.
          URL중에서 디렉토리까지만 명시되었을 경우 해당 디렉토리에서 index.* 이름의 파일을 찾아서 응답하는 형태에요.
          (* 부분의 확장자는 사용하고 있는 어플리케이션 엔진에 따라 여러가지가 바뀔 수 있습니다)

          원하시는 것처럼 index4라는 이름을 꼭 사용하고 싶은 이유가 있으시다면,
          웹 서버 프로그램을 수정하거나,어플리케이션을 작성하는 방법 외에는 방법이 없어 보이네요.
          대화보기
          • 져난
            깃헙에는 node.js 파일을 올릴 수 없어요ㅠㅠ
            대화보기
            • Cafe24
              cafe24에서 구입한 도메인을 github의 커스텀 도메인으로 이용하고 싶을 때는 어떻게 하나요?
            • egoing
              추천 검색어 : atom menu show
              제가 기억하기에는 alt 키를 누르면 보이는 것으로 기억하고 있어요
              대화보기
              • 불신
                여기에 질문해도 되는지요? ATOM 상단 메뉴를 없애버렸습니다. 활성화 방법 알수 있을까요? ㅠㅠ
                아무리 찾아봐도 모르겠네요
              • 질문자
                깃헙에서 node.js를 올리고 싶을때는 어떻게 하나요?
              • 라이언
                깃헙에서 부트스트랩을 적용하려면 별도 부트스트랩 설치가 필요없는건가요
                ??
              • illliilllliillliii
                감사합니다
              • 우탄
                질문이 있습니다. 도메인을 적용했는데 오류가 나길래
                혹시 index가 아니라 index4로 되어 있어서 그런가 싶어, index4를 index로 수정하고
                다시 레퍼지토리를 만드니 접속이 잘 됩니다.
                왜 이럴까요 도메인을 적용할 때 index4로 접속하게 하는 방법은 없을까요?
              • 런던나잇
                잘봤습니다.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기