Github의 다양한 기능 중 하나인 github page를 사용하는 방법에 대해서 알아보겠습니다. 먼저 github.com에 접속해줍니다. github 계정이 없다면 홈페이지에서 회원가입을 하고 이미 계정이 있다면 우측 상단 Sign in에서 로그인 해줍니다. 로그인을 하면 보이는 페이지의 우측 상단에서 + 기호를 클릭하여 새로운 저장소(New repository)를 만들어 줍니다. New repository를 누르면 다음과 같은 페이지로 이동합니다. 1. Repository name을 입력해줍니다. 2. Public과 Private 중, 'Public'를 선택해줍니다.(github page 기능을 무료로 사용하기 위해서 입니다.) 3. Add a README file을 선택해 줍니다. 1~3까지 모두 완료하였다면 페이지 하단의 'Create repository'를 눌러 저장소를 생성합니다. 생성을 완료하고 나면 다음과 같은 페이지가 보입니다. 상단 메뉴바의 Settings를 클릭해줍니다. Settings 페이지에서 스크롤을 내려 하단의 Github Pages로 이동합니다. 위의 그림처럼 설정하고 Save 버튼을 누릅니다. Save버튼을 누르면 페이지가 새로고침 되는데 다시 스크롤을 내려 하단으로 이동해보면, 생성된 webpage 주소가 링크되어 나타납니다. https://(github아이디).github.io/(저장소이름)/ 으로 접속해보면, github 웹페이지가 성공적으로 생성된 것을 확인할 수 있습니다. 여기까지 github page를 이용해서 웹페이지를 만들어보는 방법에 대해 알아보았습니다. 다음번에는 github page에 직접 페이지를 생성하여 업로드 하는 것에 대해 알아보겠습니다. GitHub에서 제공하는 정적 웹페이지(static webpage) 호스팅 서비스로, 포트폴리오 사이트 같은 간단한 사이트를 만드는데 활용된다. 요즘에는 이곳에 Jekyll 이라는 서비스를 결합해 블로그를 만드는 경우도 있다. 이 글에서는 정적 웹페이지를 이용해 간단히 사이트를 올리는 만드는 방법에 대해 알아볼 것이다. GitHub Page 만들 준비하기GitHub Page를 만들기 위해서는 다음 두 작업을 먼저 해야한다.
템플릿 다운로드 하기이번 글에서는 https://html5up.net/ 에서 제공하는 photon이라는 템플릿을 활용해 실습을 진행한다. Photon은 CCA 3.0 license를 사용하므로, 저작자를 표시해야 한다는 점을 주의하자. 1. https://html5up.net/photon 사이트에 접속해 오른쪽 상단의 Download 버튼을 누른다 Photon by HTML5 UP A simple (gradient-heavy) single pager that revisits a style I messed with on two previous designs (Tessellate and Telephasic). Fully responsive, built on Sass, and, as usual, loaded with an assortment of pre-styled elements. Have fun! :) html5up.net 2. 압축을 풀면 다음과 같은 파일 목록이 나온다. 준비가 끝났다. github 저장소 만들고 다운받은 템플릿 올리기1. https://github.com/new 에서 저장소를 새로 만든다. 이 글에서는 저장소 이름을 demo-page라 한다. GitHub: Where the world builds software GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 2. 다음 명령어를 로컬에서 수행해 해당 저장소를 위한 git을 만들자
3. 다음 명령어를 사용해 remote repo를 add한다.
이 부분에 대해 잘 알비 못한다면 https://kotlinworld.com/284 글을 참조하도록 하자. [Git Remote] git remote, push를 이용해 Remote 저장소(GitHub, GitLab, etc)를 다루는 방법 git의 remote란 무엇인가? git에서의 remote 는 외부의 깃헙 저장소가 있는 url에 대한 alias(별칭)을 만들어 관리하기 위한 명령어이다. 이 명령어는 단순히 GitHub만을 위한 것이 아니며, GitLab, Garrit 과 kotlinworld.com 4. 그림 2의 폴더의 파일을 만들어진 폴더에 넣는다. 5. 다음 명령어로 추가된 파일을 git에 올리고 remote repository에 올린다.
자 여기까지 준비가 끝났다. 작업을 모두 완료했으면 다음과 같은 화면이 나온다. GitHub Page만들기자 이제 마지막 단계이다. 단순히 몇가지 설정만으로 위에 올린 웹페이지의 호스팅이 가능해진다. 1. GitHub Page를 만들기 위해 Settings-Pages 탭에 진입한다. 2. Source의 Branch를 main으로 바꾸고 영역을 /(root)로 바꾼후 Save한다. 3. GitHub Page가 만들어졌다. 다음 주소에 만든 웹페이지가 올라간다. 올라가는데 5분 정도 걸리니 커피 한잔을 먹고 오자.
4. 웹페이지가 잘 올라간 것을 확인할 수 있다. 내부 내용은 index.html 파일을 바꿈으로써 수정할 수 있다. 데모 페이지데모 페이지는 https://github.com/simplistudio/demo-page 다음 주소에서 확인할 수 있다. GitHub - simplistudio/demo-page: Demo of GitHub Pages Demo of GitHub Pages. Contribute to simplistudio/demo-page development by creating an account on GitHub. github.com |