지난 시간 우리는 우리 웹페이지에 댓글창을 띄우는데 실패했다. 그 이유는 웹에 페이지가 올라가 있지 않아서이고, 지금부터 그 문제를 해결하기 위해 github를 이용할 것이다.
사실 이문제를 해결하는 방법은 굉장히 여러가지가 있다. 하지만 그 중에서 github를 고른 것은 무료라는 점, 추가적인 프로그램 설치가 필요없다는 점, 어차피 프로그래밍을 공부하다 보면 만나게 될 사이트라는 점 등의 이유가 있다.
Git은 소스 코드를 관리하기 위한 분산 버전 관리 시스템이라고 한다. 뭔지 몰라도 된다. 그냥 프로그래밍한 자료를 올려두는 저장소 같은 거라고 생각해라. Github는 그런 서비스를 제공하는 인터넷사이트다. 온라인 소스 저장소! 라고 생각하자. 소스를 올려두면 친구가 짠 소스도 볼 수 있고 다른 사람들이 만들어놓은 소스도 가져다가 쓸 수 있고 여러모로 유용하다. Github는 무료로 저장소도 제공해주고 블로그를 운영할 수 있게끔 웹 호스팅도 해준다.(나 대신 웹에 페이지를 올려준다)
가입은 매우 간단하다.
사이트에 접속하고, username과 email주소 password를 적고 sign up 버튼을 누르면 끝!
공짜로 쓸래, 유료로 쓸래 물어보는데 그냥 continue를 누르자.
그냥 간단한 설문조사다. 아무거나 찍고 submit.
이런 좋은 서비스를 제공해주는 github에게 미안하다면 성심성의껏 작성해주자.
그러면..
짜잔. 가입성공.
이제 우리가 만든 페이지를 올려보자.
저기 보이는 new repository 버튼을 클릭!
이메일 인증을 안했다면 이런 화면이 뜬다. 이메일 인증하고 돌아와서 다시 진행하자.
그러면 repository 이름을 적으라는 창이 뜬다.
정성껏 시키는 대로 써라.
유저이름.github.io
나 같은 경우, 유저이름이 Ivenoid이므로 ivenoid.github.io라고 적으면 된다.
ihavenoidea줄인거다.. 이름을 정해야하는데 아무 생각이 없었으므로...
다른건 건드리지 말고 initialize this repository with a README 선택해준다.
이상태에서 create repository 버튼 클릭
그러면 짜잔. 저장소가 완성되었다.
여기에 upload files라고 버튼이 있다. 누른 다음 내가 만든 html파일을 올린다. 그대로 올려도 되지만 파일이름을 index.html로 바꿔서 올려주자.
드래그 앤 드롭 해도 되고, 파일을 찾아서 올려주면 된다.
‘주의’ 사진이나 다른 html페이지의 링크가 걸려있다면 관련된 파일 전체를 옮겨줘야한다. 경로설정이 달라지면 페이지가 열리지 않는다. 경로설정을 잘 맞추자.
파일을 다올렸다면 위에 아무말이나 쓰고 commit을 누른다.
그러면 짜잔.
파일이 올라갔다.
이제 주소창에 https://유저이름.github.io를 치고 접속한다. 내 경우 https://ivenoid.github.io로 접속.
그러면…
안녕 댓글창아!
댓글창이 열린다. 여기까지 따라오느냐 고생했다. 이걸로 무작정html은 끝이다. 우리가 다루었던 html 태그들을 기본으로 몇몇개의 태그들을 더 배워보면서 css를 다룰거다.
이제 웹페이지를 예쁘게 만들 일만 남았다.
Week2. 다루었던 내용
인프런 - https://www.inflearn.com/
코드카데미 - https://www.codecademy.com/