github.io 제작하기

포트폴리오를 만들려고 구글에 예시를 검색했다가 웹페이지형 포트폴리오를 여럿 보았는데, 깔끔한 디자인과 생동감있는 화면에 감탄했다. 개발자를 지망하는 경우, ppt 형식 외에도 웹페이지형 포트폴리오를 만들어 주소를 공유하는 형식도 많이 사용한다고 해서 나도 만들고 싶어졌고, 어디에 어떻게 만들어야할지 찾다가 github.io 라는 깃허브 페이지를 알게 됐다. 현재 듣고 있는 SeSAC 수업 리더님께 "웹페이지형 포트폴리오 만들기에는 github.io가 깃허브에서 연결할 수 있고 배포하기도 쉽다"는 조언을 듣고, 나도 깃허브 페이지를 만들기로 했다.🙌

---

github.io 만드는 방법

github.io 페이지를 만들기 위해서는, 우선 자신의 github 프로필에서 repo를 만들어야 한다.

"아이디.github.io" 라는 이름으로 repo를 생성한다.

다음 순서를 위해서는 README 파일을 자동으로 만들어지도록 하는게 좋다.

---

repo를 정상적으로 만들었다면 우측의 Code 버튼을 통해 codespace로 들어간다.

codespace는 나도 이번에 처음 써보는거라 이걸 어떻게 사용하는건지 궁금해서 github의 설명을 읽어봤다.

제대로 이해한건지는 모르겠지만.. 웹 상에서 파일을 편집하고 서버에 저장하는 형태로, 저장시간을 기본적으로 30분을 제공하는데, 만약 그보다 시간이 더 걸리면 시간만큼 금액을 지불해야하는 것 같다.🤔

https://docs.github.com/ko/codespaces/setting-your-user-preferences/setting-your-timeout-period-for-github-codespaces

Github Codespaces의 시간 제한 기간 설정 - GitHub Docs

아무튼 codespace를 들어가면 이렇게 vscode랑 똑같은 화면이 나오는데, 여기에서 파일을 만들고 vscode로 하는 것처럼 git add, commit, push하면 repo에 업로드된다. 그리고 자신의 github.io 주소로 들어가면 페이지가 정상적으로 보여지는 것을 확인할 수 있다.👍

하지만 codespace는 금액이 지불될 수 있으니 vscode로 개발해서 push하는게 나을 것 같다.

---

github.io 페이지의 경우에는 구글링으로 템플릿을 찾아서 적용해도 되고, 역량이 있다면 HTML + CSS + JS를 직접 작성해서 만들 수도 있다. 리더님께 웹페이지형 포트폴리오에 대해 물어봤을 때, 시간이 굉장히 많이 걸릴거라고 했던게 이런 이유였구나 새삼 깨달았다. 이거 아니어도 할 일이 많은데 이건 또 언제 하나 싶지만, 시간 있을 때마다 틈틈히 해야지.😉

※ 참고 https://dinae.tistory.com/120

---

필자의 제작과정

github.io로 포트폴리오 페이지를 만들겠다고 결심하고 repo를 만든게 (이 글을 작성했던) 3월초였는데, SeSAC 수업 진도를 따라가고 동기들과 팀플을 진행하느라 작업은 하지 못하고 있었다. 5월에 SeSAC 수업이 종강하고, 7월부터 시작된 새로운 교육에서 강사님이 개인 포트폴리오 페이지를 만드는게 좋다고 제안하셨다. 그래서 당시에 만들어둔 기본 구조를 수정해서 배포하고, 지속적으로 수정과 보완을 거쳤다. 모바일에서도 예쁘게 보여야해서 미디어쿼리도 신경써서 작업했고, 새로운 교육에서 배운 GSAP과 Lodash를 활용해서 동적인 페이지처럼 보이게 만들려고 노력했다.

그럼에도 아직 부족한 부분이 많아보이고, 사실 이걸 React로 바꾸고 싶지만 그건 재건축 수준이라 시간이 많이 걸려서 일단 이렇게 두기로 했다. 그래서 2024년 7월 현재는 이런 상태다. 앞으로 지속적으로 보완해야지.🔥

https://github.com/hjinn0813/hjinn0813.github.io

GitHub - hjinn0813/hjinn0813.github.io: 2024.03~ make github page for web portfolio