구 원트노/AWS 디플로이

[멋쟁이 사자처럼 5기] c9 프로젝트 github 페이지에 올리기 1

C9 코드를 github 페이지에 올리기 1


첫 주차 마지막에 c9 코드를 github에 올리는 작업을 했는데 다시 한 번 정리해보겠습니다.


C9과 GITHUB에 대해서 궁금하다면 이전 글인


[멋쟁이사자처럼/1학기 보조] c9과 github이란? 을 참고해주세요


일단 우리가 이 작업을 왜 하냐면


C9에서 만든 웹사이트는 계속 켜져 있지 않습니다.


run을 누르고 나서 1시간 정도 지나면 



이렇게 벚꽃화면을 보게 됩니다.. 웹사이트가 꺼진거죠..


그렇다면 어떻게 해야 꺼지지 않는 웹사이트를 가질 수 있을까요?


방법은 뭐 AWS 인스턴스 호스팅을 한다던가, 헤로쿠를 사용해 업로드를 한다던가 등등이 있지만 위 방법들은 나중에 배우기로 하구요.


이번에는 github을 이용해서(github 페이지기능) 꺼지지 않는 웹사이트를 구현해 보도록 하겠습니다.




전체적인 흐름에 대해 설명하겠습니다.


일단 c9 코드를 처음으로 github에 올리는 흐름입니다.


  1. c9에 코드를 작성한다.
  2. run을 통해 c9웹사이트 작동을 확인한다.
  3. github에서 'owner이름.github.com' 이름의 repository를 만든다 (github 페이지기능사용). (ex) owner이름이 jomno라면 jomno.github.com
  4. c9 코드를 위 github repository에 올린다.(명령어들....)
  5. github에 올라가서 github을 통해 꺼지지 않는 웹사이트가 돌아간다. (ex) 위의 예라면 jomno.github.io



이런 흐름대로 작동을 하게 됩니다.


여기서 주요하게 볼 부분은 4번째에 명령어 부분입니다. 


1
2
3
4
5
6
7
8
9
git init
 
git remote add origin github repository 주소.git
 
git add .
 
git commit -"first commit"
 
git push - u origin master
cs


명령어 각각의 간단한 설명을 하겠습니다.



git init 

 

이 프로젝트에서 git을 사용하겠다. git을 설치하는 명령어


git remote add origin github repository 주소.git


c9 프로젝트와 git repo와 연결시킨다. origin이라는 이름으로 repository 주소 기억, 아까 (ex)를 따르면 

git remote add origin https://github.com/jomno/jomno.github.com.git


git add .


c9 프로젝트의 모든 내용을 add 시키겠다. commit을 할 준비를 하겠다. (repository에 올릴 준비 1)


git commit -m "first commit"


first commit이라는 이름으로 위의 add된 내용을 commit 하겠다. (repository에 올릴 준비 2 끝)


git push -u origin master


origin 즉 위에 연동한 github repository에 위의 "first commit" 들을 push하겠다. (repository에 올림)




각 명령어들은 이런 의미를 가집니다. 


이번에는 c9코드를 수정했을 때 github에 추가로 올리는 작업을 해보겠습니다.




아까와의 차이점은 git은 이미 설치가 되어있고 , origin도 이미 저장되있는 상태라는겁니다.


위의 말이 이해가 안 된다면 그냥 명령어만 치셔도 됩니다. 모르셔도 아무 문제 없습니다. 


1
2
3
4
5
git add .
 
git commit -"another commit"
 
git push - u origin master
cs


아까보다 두 줄이 줄었습니다. 


저 3개의 명령어를 사용하면 c9의 모든 내용이 github repository에 저장됩니다.


위에도 설명했듯이 저 3개의 명령어가 내 코드들을 github에 올리는 역활을 하는 명령어들입니다. 


헷갈리신다면 그냥 저 3개 순서대로 치면 됩니다.


모두 화이팅하고 질문 있다면 연락하세요!! ㅅㄱㅅㄱ!!