Gorilla with Lion

블로그 이미지

Kim_gorilla

경기대 출신 멋사인이 운영하는 코딩블로그

[Github] github.io? github page는 뭘까?

Util/환경설정 2019. 3. 26. 07:13

Github.io, Github Pages는 뭘까?


사용자가 만든 HTML을 별 다른 서버와 데이터베이스 없이 웹페이지로 서비스 해주는 Github의 기능입니다.


Repository에 저장된 HTML을 실제 웹페이지처럼 웹서비스가 가능하게 만들어줍니다.


이게 무슨말이냐?


보통의 웹 서비스 과정은 서버, DB, 등 여러가지 기능을 서비스해줄 수 있는 일련의 과정이 있습니다. 


그 과정을 크게 두가지로 다음의 그림처럼 설명이 가능합니다.


이러한 서버를 이용해 사용자가 원하는 정보를 시시각적으로 변화하여 보여주는 서비스를 동적인 서비스라고 합니다.


동적인 서비스를 위해서는 DATABASE 와 SERVER의 역할이 필요합니다.

이 DATABASE와 SERVER없이 만든 웹서비스를 정적인 웹서비스라고 합니다.


변화된 데이터가 아닌 미리 준비된 데이터만 사용자에게 제공하는 형태입니다.


위 해당 서비스(정적인 페이지)를 쉽게 만들어 주는 기능을 하는것이 
Github.io입니다.

다만 정적인 서비스다 보니, 우리가 생각하는 보통 웹사이트에서 가진 기능을 활용하기에는 많이 부족한 모습을 보여줍니다.


먼저, 실제 웹사이트의 도메인을 얻어 서비스를 하기 전 우리의 HTML페이지가 어떻게 적용되는지 확인해봅시다.



자신의 github 계정에 있는 Repository에 들어갑니다.

만들어져 있는 Repository로 들어갑니다.




Settings에 들어갑니다.




Repository name을

본인닉네임.github.io   로 저장합니다.

(이름을 바꾸지 않아도 만들 수 있습니다.)




해당 source 부분에 있는 Dropdown 버튼을 눌러 None에서 master branch로 바꿔줍니다.

그리고 위에 나와있는 링크로 접속합니다.



사이트를 찾을 수 없다는 문구가 나올 수도 있습니다.

해당 링크 맨 뒤에 저희가 Repository에 올려놓은 파일의 이름을 써주면 해당 html로 이동하게 됩니다.

(index.html 파일로 만들고 push해서 Repository에 올리면 자동으로 메인화면이 index.html이 됩니다.)


자, 이런 화면이 나올 것입니다.

여러분은 이 링크를 타인에게 공유할 수 있고, 수정할 수 있습니다.

간단하게 여러분의 웹페이지를 배포하는 방법인 github pages에 대해 배웠습니다.


실제 배포를 하기 위한 첫 발걸음이라고 생각하시고 마음껏 활용해주시기 바랍니다.

저작자표시 비영리 (새창열림)

'Util > 환경설정' 카테고리의 다른 글

[Github] Git 사용법  (0) 2019.03.21
[Github] Git 설치부터 VSCODE 설정까지  (0) 2019.03.20
[editor] VSOODE 설치  (0) 2019.03.19
[구름IDE] 실행URL과 포트 바꾸기  (0) 2019.01.07
[Python] 파이썬 설치  (0) 2018.12.20
Posted by 알 수 없는 사용자

공지사항

  • 멋쟁이 사자처럼 공식블로그 이전
블로그 이미지

경기대 출신 멋사인이 운영하는 코딩블로그

by Kim_gorilla

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
방명록 : 관리자 : 글쓰기
Kim_gorilla's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

Gorilla with Lion

경기대 출신 멋사인이 운영하는 코딩블로그

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 분류 전체보기 (63)
    • 사진첩 (1)
      • 기타 (1)
    • Util (8)
      • 환경설정 (6)
      • Error (0)
      • Demo (1)
    • HTML (1)
      • 교육자료 (1)
      • 응용자료 (0)
    • CSS (2)
      • 교육자료 (0)
      • 응용자료 (2)
    • Python (9)
      • 기초문법 (4)
      • Django (4)
      • Tensorflow (1)
    • bootstrap (5)
      • 시작하기 (4)
    • Javascript (5)
      • React.js (0)
      • AJAX (1)
      • 이론 (2)
    • Gorilla-Kim (20)
      • Project (16)
      • TIL (4)
    • STUDY (0)
      • Algorithm (0)
      • Software-Engineering (0)
      • DataBase (0)
    • IT 백과사전 (7)
      • 알쓸신잡 (0)
      • WEB 관련 (7)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바