컴공 이것 저것

Github.io로 포트폴리오 사이트 만들기

excited-hyun 2021. 2. 12. 13:09
반응형

개발자로 취준을 하는 입장에서 꼭 포트폴리오 페이지를 하나 만들어둬야 하지 않을까 하여 마음먹은 김에 만들자! 하고 만들기 시작했습니다.

저는 뼈속까지 공대생이기 때문에 디자인 능력이 좀 많이 떨어져서 다른분들이 잘 만들어 두신 템플릿을 사용하기로 하였습니다.

 

github 가입하기

github.io를 이용해서 포트폴리오를 만든다는 것에서 알 수 있듯이 우선 github계정을 만드셔야합니다. 아직 사용을 안해보셨다면 꼭 사용하시길 추천드립니다.

github.com

 

GitHub: Where the world builds software

GitHub is where over 56 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

 

gihub계정을 만들고 사용하는 방법에 대한 내용은 작성하지 않겠습니다. 아래에 잘 정리가 되어있으니 한 번 보세요!

medium.com/@codesquad_yoda/초심자를-위한-git과-github-30분-맛보기-c2366dc1d421

 

초심자를 위한 git과 github 30분 맛보기

두 줄 요약

medium.com

 

원하는 포트폴리오 템플릿 찾기

제가 찾아본 사이트만 알려드릴게요!

1. 구글에 '지킬 테마'라고 검색을 하시고 아래의 사이트로 들어가셔서 마음에 드는 템플릿을 골라보세요.

jekyllthemes.org

 

Jekyll Themes

 

jekyllthemes.org

2. 저는 저중에 마음에 드는게 없어서 github.com에서 "dev portfolio" 라고 검색하여 나오는 것들중에 골라보았습니다.

 

제 취향은 아래 세가지 정도 였습니다.

github.com/saadpasta/developerFolio

 

saadpasta/developerFolio

🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer. - saadpasta/developerFolio

github.com

github.com/RyanFitzgerald/devportfolio

 

RyanFitzgerald/devportfolio

A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass - RyanFitzgerald/devportfolio

github.com

github.com/RyanFitzgerald/devfolio

 

RyanFitzgerald/devfolio

A modern and production-ready personal portfolio + blog template built with GatsbyJs and TailwindCSS - RyanFitzgerald/devfolio

github.com

여러 템플릿을 보시고 목적에 맞는 템플릿을 찾으시길 바랄게요! 전 블로그는 티스토리를 사용하고 있기때문에 블로그 기능을 넣을 필요가 없어서 두번째 템플릿을 선택했습니다.

 

반응형

fork 하기

지킬 테마에서 고르셨다면 hompage 버튼을 누르면 바로 그 템플릿이 제작된 깃헙 레포로 이동될 겁니다.

마음에 드는 템플릿의 깃헙 레포에 들어가면 이런 화면이 보이실거에요.

맨 오른쪽 상단에 fork라고 쓰여있는게 보이시나요? 그 fork 버튼을 클릭해줍니다!

그럼 저의 깃허브에 이 레포가 생겨있는게 보입니다.

user-name/devportfolio 라고 생성된 레포가 보일거에요.(user-name은 본인의 깃허브 user name이에요! 그리고 다른 테마를 선택하셨다면 그 뒤의 레포 이름도 저와 다를겁니당)

 

repo 이름 변경하기

 

이제 이 레포의 이름을 변경해주어야 합니다.

그러기 위해서 위의 사진처럼 setting버튼을 눌러줍니다. 제가 지워서 현재는 빈칸으로 보이지만 Repository name에 devportfolio라고 적혀있었습니다.

이제 저 칸에 user-name.github.io 라고 적어준 뒤 rename해줍니다. (user-name부분엔 본인의 user name을 적어주세요)

예를들어 github user name이 gildong 이라면 gildong.git.io 를 적어주어야 하는것 입니다.

그런 뒤 https://user-name.github.io  들어가면 그 템플릿으로 자신의 포트폴리오 사이트가 만들어져 있습니다.

 

템플릿 내용 수정하기

원본 템플릿에서 아무것도 수정하지 않았기 때문에 링크의 내용은 원본 그대로일 것입니다.

이제 이걸 알맞게 수정해서 본인이 나타내고 싶은 내용을 작성하면 됩니다!

 

 

728x90
반응형