구 원트노/AWS 디플로이

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

C9 프로젝트 GITHUB 페이지에 올리기 2


이전 글


[멋쟁이 사자처럼 5기] c9과 github이란?

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


실제로 한 번 해보겠습니다.




1. C9 workspace 생성


Create a new workspace를 선택하여 workspace를 생성할 수 있습니다.



workspace 이름을 입력하고


choose a template에서 HTML5를 선택하면 됩니다.


이번에는 간단한 자기 소개 페이지를 만들기 때문에 HTML5를 선택했지만 이 후 실습에서는 


Ruby를 선택해서 진행할 예정입니다. 




2. C9 프로젝트 템플릿 적용


이제 구글에서 'bootstrap free templite'을 검색해서 마음에 드는 템플릿을 받아서 


c9 프로젝트에 추가해줍니다.


중요한 건 사진에서 처럼 집어넣을 최상위 폴더까지 드래그를 해야 추가가 됩니다.



네 이제 성공적으로 템플릿이 추가되었습니다.


여기서 중요한 부분이 있는데 위 사진의 프로젝트를 보면


index.html 도 있고 hello-world.html 도 있습니다.


여기서 각 페이지에 접근을 할려면 '전체주소/파일이름.html' 이런식으로 접근을 해야 합니다.


예를 들어 hello-world.html을 접근하려면 'mypage.com/hello-world.html' 이런 식으로 접근을 하게 됩니다. 


그런데 index.html은 특별하게 'mypage.com'까지만 주소를 입력해도 접근 가능할 수 있습니다.


이 index.html은 웹사이트에서 특정한 페이지를 지정하지 않을 때 표시되는 기본 페이지라고 생각하면 됩니다.


이 부분에 대한 더 자세한 내용은  여기서 보면 됩니다.


그래서 상단에 있는 Run을 누르면 C9 서버가 켜지구요.(웹사이트 켜짐)



이렇게 적용이 됩니다.



3. github page repository 만들기




이제 꺼지지 않는 웹사이트를 만들기 위해 github page repository를 만들어봅시다.


위 사진과 같이 'owner(이름).github.com'이나 'owner(이름).github.io'로 생성해주면 됩니다.


뭐 추가적인 이야기인데 사실 github page는 계정당 하나만 만들 수 있는거는 아니구요.


github 기능중에 organization을 만들 수 있는데 이 organization마다 또 page를 만들 수 있어서


산술적으로는 무한대로 사용 가능합니다.


4. c9코드 github repository에 올리기



명령어에 대한 설명은 [멋쟁이 사자처럼 5기] c9 프로젝트 github 페이지에 올리기 1 를 참고해주세요.


repository를 만들고 위처럼 명령어를 작성하면 성공적으로 github에 올라갑니다.


여기서 팁이 하나 있는데 


1
git remote add origin repository_address
cs


여기서 repository_address입력하기가 매우 귀찮고 무엇을 입력할지 어려울 수 있습니다.



이때 사진 속 저 버튼을 통해 정확한 주소를 copy할 수 있습니다.



이제 마지막으로 


1
git push -u origin master
cs

명령어 후 username에서 가입한 이메일(ID)를 입력하고


Password에 비밀번호를 입력하면 (주의 해야 할 점은 입력하는 내용이 보이지 않아요!! 주의해서 입력해야 합니다.)


성공적으로 github에 코드가 올라가게 됩니다.



그리고 github 페이지 웹사이트에 적용이 됬음을 확인할 수 있습니다.



5. 수정한 c9 코드 github에 올리기


이제 페이지를 수정해봅시다.


c9에서 코드를 수정해서 배경도 바꾸고 텍스트도 바꿔봤습니다.


이거를 github 웹사이트에 다시 올려 보겠습니다.



마찬가지로 명령어에 대한 설명은 [멋쟁이 사자처럼 5기] c9 프로젝트 github 페이지에 올리기 1 를 참고해주세요.


아까보다 간단한 코드입니다. 


이렇게 3줄을 입력하게 되면 자동으로 변경사항들만 아까 설정한 repository로 올라가게 됩니다.


변경사항들만 올라간다는 말은 변경사항이 없다면 올라가지 않는 뜻입니다.


주의 할 점은 c9은 자동 저장이 되지 않아서 코드를 변경하면 'ctrl + s'(저장)를 누르는 습관을 들이는게 좋습니다.


만약 코드는 변경했는데 올라가지 않았다면 저장을 하지 않은 것입니다.



성공적으로 push 되었다면 이렇게 코드 변경사항이 github에 올라가고


github 페이지 웹사이트에서 변경 부분을 확인할 수 있습니다.




이렇게 c9 프로젝트 github 페이지에 올리기 과정을 다 해봤습니다.


나중에 github page말고 그냥 코드를 저장하기 위해 또는 협업하기 위해 github을 사용하게 될텐데


방법은 지금까지 해 온 것과 똑같구요.


단지 repository를 생성할 때 이름을 아무렇게나 생성하면 됩니다.


궁금하신 점 있으시면 댓글 남겨주세요!!