부들코딩

github.io 와 템플릿을 사용하여 누구나 접속가능한 포트폴리오를 만들 예정이다.

설치 순서는

1. Ruby 설치

2. Jekyll 설치

3. 템플릿 연결

#1 Ruby 설치

🔗 https://rubyinstaller.org/downloads/

최신버전 x64 다운로드 후 설치파일 우클릭 관리자권한으로 실행, 라이센스 동의하고 디폴트로 설치

에러나면 x86

엔터 설치끝, cmd 창에서 Ruby 설치 확인

> ruby --version

#2 Jekyll 설치

cmd 창에서 설치(권한오류 뜨면 관리자권한으로 실행)

> gem install jekyll bundle

jekyll 설치 확인

> jekyll --version

> jekyll new 저장경로

jekyll serve 했는데 에러가 난다. 검색해보니 webrick이 빠져서 추가설치하면 된다

🔗 참고 https://junho85.pe.kr/1850 

webrick 추가설치

> bundle add webrick

> jekyll serve

경로로 접속해서 이렇게 뜨면 성공

#3 깃허브 Template 연결

유저이름.github.io 레파지토리를 생성할 건데 포트폴리오 템플릿을 사용했다.

템플릿 뒤적거리다가 맘에 드는 걸 찾았다. 감사합니다(※라이센스 확인하고 사용하기)

🔗 https://github.com/techfolios/template 

🔗데모 https://techfolios.github.io/template/   

+) 다시 들어가 보니 만들었을 때 보다 템플릿이 많이 바뀌었다. 참고하시길

Fork 해서 Rename 해주기

사용할 경로에서 git bash  열고 clone

버전 관리를 위해 Default 폴더를 만들어서 클론 했다.

$ git init
$ git clone 레파지토리URL

소스 경로로 들어가서 로컬에서 테스트해보기

> jekyll serve

해당 경로로 들어가면 템플릿 데모와 같은 화면이 나온다. 나중에 로컬에서 디버깅용으로 사용하면 된다.

이제 경로를 username.github.io 로 바꾸기 

_config.yml 파일에서 url을 본인의 깃허브.io 주소로 바꿔주고 basurl 을 "" 로 해주면 끝

보통 템플릿 설명에 어떻게 바꾸는 지 적혀있다.

누구나 접속할 수 있다

수정은 차차 진행할 예정..

참고링크

🔗 http://mooonchivekr.blogspot.com/2020/08/windows-10-github-pages.html

🔗 https://m.blog.naver.com/hsy2569/221865301644

🔗 살짝 꾸며봤다 2022.04.14 - [Web/CSS] - [CSS] 오픈소스로 움직이는 화면 만들기(CodePen)

블로그 말고도 미루고 미루던 깃허브...이젠 해야 될 때가 왔다. 

요즘 Readme를 프로필로 꾸며서 사용하던데  본격적인 사용 전에 나도 한 번 꾸며볼려고 한다.

#1. Repo 생성

새로운 Repo를 생성하고 이름을 owner와 똑같이 해준다.

그러면 밑에 하늘색 부분에 프로필을 꾸밀 수 있는 특별한 Repo라면서 설명이 나온다.

생성하고 깃허브 프로필에 들어가면 이렇게 나온다. markdown으로 수정해서 commit할 수 있다.

#2. 수정

수정 툴로는 VS Code를 사용했다. 요즘 많이 쓴다길래 한 번 써보면서 익숙해질 겸 설치해봤다. 폴더 하나 만들어서 clone 하고 VS Code로 Readme.md를 열어서 오른쪽 위에 preview 버튼을 누르면 markdown 미리보기를 할 수 있다.

깃허브 프로필에서 봤던 것과 똑같이 나온다.

꾸미기 위한 구성은 이름(헤더), Stats, 업무에 쓰는 것들, 스킬 스택(사용해본 기술들)으로 정했다.

Top languages 위젯을 쓸려고 했는데 업무 소스는 깃허브에 올리지 않아서 언어가 안 뜨니까 그냥 뱃지를 사용했다.

다크모드, 라이트모드 둘 다에서 괜찮은 위젯 색깔 고르기가 은근 어려웠다.

위젯 점수가 후해서 좋다...위젯과 뱃지를 나란히 하기 위해 <table>을 사용해서 <td> 에 각각 넣어줬다. 처음에는 마크다운 테이블로 했는데 헤더 밑에 구분선이 맘에 들지 않아서 태그를 사용해봤다.

#3. 커밋

커밋 했더니 테이블 테두리가 너무 보기싫다...style로 해봐도 안 없어진다.

#3 - 1. 커밋...커밋...

테두리를 너무 없애고싶어서 열심히 찾아본 결과 방법을 찾긴 했다.

🔗참고 https://stackoverflow.com/questions/19075023/flow-text-around-an-image-in-github-markdown

<img> 태그에서 align을 사용하는 방법이다. 묘하게 넓은 간격이 좀 맘에 안 들지만 지금은 이게 최선인 것 같다.

🔗 결과 소스 https://github.com/nrmhvr/nrmhvr/blob/main/README.md?plain=1 

참고

🔗아이콘 https://gist.github.com/rxaviers/7360908

🔗 위젯 https://github.com/anuraghazra/github-readme-stats

🔗 뱃지 https://github.com/Ileriayo/markdown-badges

🔗 뱃지 직접 만들 때 https://shields.io