오픈 소스를 활용한 github로 웹 포트폴리오 만들기

https://chasimyeong.github.io/

SiMyeong Portfolio

오픈 소스를 활용하여 만든 제 포트폴리오 사이트 입니다.

 

직접 디자인을 다하진 않고 오픈 소스를 활용하여 내용만 저한테 맞춰 바꾸었습니다.

 

github에 g, HTML에 H도 모르는 제가 만드는데 시간이 오래걸리지 않았습니다.

 

필요 한 것

1. github 가입 및 repository 생성

2. 오픈 소스를 활용한 본인의 웹 만들기

3. javascript를 통한 내용 수정

 

 

Step 1. github 가입

 

`

www.github.com에 바로 들어가면 위와 같이 회원가입을 시키도록 합니다. 

 

아이디가 있다면 스크린샷에는 보이지 않지만, 사이트 우측 상단에 sign in이 있습니다.

 

아이디가 없다면 위와 같이 본인의 Username(닉네임)과 메일을 받을 수 있는 Email과 비밀번호를 설정하고

sign up을 하면 가입한 Email로 확인 메일이 날라옵니다.  

 

확인 후 repository(이하 repo)를 만들라고 바로 연결해주는 데 지금 굳이 안만들어도 됩니다.

 

이제 아이디를 만들었다면, 이것저것 한 번 구경해보세요 ㅎㅎ.. 영어에 익숙해질 필요가 있습니다.

 

 

만들 후 홈에서 상단 우측을 클릭하면 메뉴가 내려옵니다. 여기서 Your repositories를 클릭합니다.

 

클릭 후 New로 새로운 repo를 만들어 줍니다.

 

 

여기서 중요한게 Owner 이름 즉, 가입했을 때 Username과 Username.github.io로 앞의 이름이 같아야 합니다.

저는 test-casim0으로 저렇게 설정을 했습니다. 그리고 README는 체크를 해서 만들어도 되고 안만들어도 되는데,

전 항상 만듭니다. 필요 할 때 파일을 다시 추가하는게 귀찮아서 입니다.

 

그리고 create repository를 누릅니다.

 

 

여기서 우측에있는 Clone or download를 누릅니다.

저는 개인적으로 git CLI 또는 git bash를 써도 되지만,

아직 git의 많은 기능을 다룰 게 아니라서 github desktop을 활용합니다.

desktop의 장점은 버튼만 누르면 branch, commit, push, pull 다 가능하기 때문에 간단합니다. 

 

그래서 open in desktop을 누른후 본인의 사양에 맞는 github desktop을 다운로드합니다.

 

 

다운로드를 하고 새로 고침 후 다시 open in desktop을 클릭하던지

또는 다운이 되어있는 사람은 이런식으로 창이 뜹니다.

 

 

그리고 Clone을 누르면 이렇게 본인의 repo가 추가가 됩니다. 

 

자 그리고 이제 포트폴리오를 만들기 위해 웹을 다 만들 실력이 된다면 상관이없지만,

정말 간단하게 만들기 위해서 다른 사람의 오픈소스를 활용합니다. 

 

 

Step 2. 오픈소스를 통한 본인의 웹 만들기

 

https://ryanfitzgerald.ca/devportfolio/

My Portfolio

저는 이 디자인을 활용할 것입니다.

https://github.com/RyanFitzgerald/devportfolio

이 사이트에 가서 웹을 만들기 위한 소스코드들을 다운 받을 수 있습니다.

 

 

위 github 사이트에 가서 똑같이 Open in Desktop을 통해 열어줍니다.

 

 

 

현재 repo가 devportfolio로 되어 있는 상태에서 우측에 Show in Explorer를 눌러줍니다.

 

 

본인들이 미리 설정한 경로로 파일들이 있을 텐데 여기서 .git을 제외하고 다 복사를 합니다.

숨김폴더 표시를 안하면 .git이 안보이겠죠?

 

그리고 current repository에서 제일 처음 우리가 만든 repo를 클릭한 후 똑같이 show in explorer를 눌러줍니다.

이젠 거기에 다 붙여넣기를 합니다. README는 그냥 덮어쓰기 해도 됩니다.

 

 

그리고 github desktop으로 돌아오면, 이런식으로 commit을 하라고 알려줍니다.

Summary부분은 필수적으로 적으라니 대충 적고 바로 commit을 합니다.

 

 

그리고 push origin버튼을 누르면 본인의 github 페이지에 파일들이 올라갑니다.

 

 

 

올린 후 View on GitHub버튼을 누르면 위와 같이 종속성 관련 보안 문제가 생깁니다. 

 

 

여기서 Pull requests를 눌러줍니다. 저 문제가 다른 라이브러리 등 버전과 관련하여 업데이트를 해줘야하는데,

지금 github는 자동적으로 업데이트를 해주는 기능도 있습니다. 물론 수동으로 바꿔야될수도 있지만요,,

 

 

누른 후 나오는 모든 목록에 하나 씩 눌러서 보면, 가장 아래에 위와 같은 Merge pull request 버튼이 있습니다.

싹다 모조리 눌러줍시다. 

 

그래도 아직 종속성 문제가 있다고 뜰것입니다. View Security alert를 눌러 줍니다.

 

 

목록에 set-value가 있습니다. 이것도 눌러주면 위와 같이 뜰것입니다.

set-value를 2.0.1이상의 버전으로 만들어줘야할 것 같습니다.

그렇다면 제일 처음에 만들었던 window에 repo 폴더로 들어가서 pakage-lock.json 파일을 클릭합니다.

 

 

저는 메모장으로 열었는데 편하게 수정할 수 있는대로 열면 될것 같습니다.

여기서 ctrl+F를 통해 set-value를 찾아 줍니다.

 

 

2.0.0버전으로 되어있는 것을 2.0.1로 바꿔 줍니다.

 

 

 

그리고 한 번 더 찾아서 version이 2.0.0으로 되어있는 것을 찾습니다.

여기서 2.0.0으로 되어있는 부분을 다 2.0.1로 바꿔줍니다. resolved 부분도 바꿔야 합니다.

 

 

이제 desktop으로 돌아가서 commit을 합니다.

그리고 push origin을 누르면 Fetch하라고 뜹니다.

github 웹 사이트에서 자동으로 수정했기때문에, 본인의 로컬에도 수정을 위해 Fetch를 해야합니다.

Fetch를 해준 후 pull origin, push origin을 다해줍니다.

 

 

그리고 본인이 만든 repo 이름을 주소창에 넣습니다.

https://test-casim0.github.io/ 저는 이렇게 되어있습니다. 이처럼 웹 주소창에 넣어 들어갑니다.

 

그러면 기본적인 오픈 소스를 활용한 웹 셋팅은 다 끝난 것입니다. 

 

 

Step 3. javascript를 활용한 내용 수정

그 이후로 저는 자바스크립트인 sublime text3 소프트웨어를 활용하며,

기본적인 내용 수정을 위해서는 index.html을 열어줍니다.

 

 

저는 듀얼 모니터를 쓰는데 본인의 repo폴더에서 index.html을 클릭해서 열어주고,

sublime text3를 활용하여 index.html을 열어줍니다.

 

 

조금 내려보면 lead-content안에 Ryan Fitzgerald라는 부분이 있습니다.

왠지 화면에서 제일 처음보인 부분에 들어가는 내용인 것 같습니다.

 

위의 저 부분을 test-casim0으로 바꾼 후 ctrl + s를 통해 저장하고,

웹에서 새로고침을 하면 웹에서 바뀌는 것을 볼 수 있습니다.

이런식으로 수정을 한다면 자바스크립트를 몰라도 본인만의 웹을 만들 수 있습니다.

 

또 한, devportfolio의 README에 가면 어떤 부분을 수정하면 되는지에 대한

간략한 영어 설명이 있어서 이부분을 참고하면 될 것 같습니다. 

 

꼭 수정 후에는 이렇게 바뀐 부분이 비교되어서 Commit를 하라고 뜨니,

Commit후 push까지 해주면 github에 적용됩니다!

 

구체적인 수정 방법은 저도 자바스크립트를 모르기 때문에 다른 오픈소스들을 찾아보면서 참고해야 할 것 같습니다!

 

끝~