[Github] 깃허브 블로그 만들기 (Jekyll, 지킬)

반응형

IT 전공자라면 한번쯤은 들어봤을법한 '깃허브'

깃허브에서 정적 웹페이지 무료 호스팅 서비스를 제공한다는 얘기 들어보셨나요?

이미 많은 사람들이 해당 기능을 사용하여 포트폴리오, 블로그, 프로젝트 소개용 사이트 등을 제작하고 있습니다.

 

저도 한때 마크다운 작성법을 익히기 위해 깃허브 블로그를 만들어 학원에서 공부했던 내용들을 .md 파일로 작성하여 블로그에 게시하기도 하였는데요, 이렇게 익힌 마크다운 작성법은 현재 실무에서도 유용하게 쓰고 있습니다.

 

추후에 기회가 된다면 마크다운 문법에 대해 적어보도록 하고, 우선은 깃허브 블로그 만드는 방법에 대해 설명드리겠습니다.

 

이 글을 검색하고 오신분들은 당연히 가지고 계시겠지만, 깃허브 블로그가 없는 분들은 아래의 링크를 클릭하여 깃허브로 이동해 주세요.

 

해당 이미지를 클릭하면 깃허브로 이동합니다.

 

홈페이지로 이동하여 Sign up을 해줍니다.

 

 

회원가입이 정상적으로 끝났다고 가정하고, 로그인 후 본인의 깃허브로 이동합니다.

입력한 회원정보 중 userName이 깃허브 주소가 됩니다.

https://github.com/{userName} (ex - https://github.com/iamheonil) 

 

이후 Repositories 메뉴에서 신규 레포지토리를 만들어 주시면 되고, 이때 저장소 이름은

무조건! 무조오오오오건 본인의 userName.github.io 로 만들어 주셔야 합니다.

(ex - iamheonil.github.io)

 

아무것도 없는 상태에서 블로그 접속을 해본 적이 없어서 오류가 뜨는지, 다른 페이지가 뜨는지 확인은 못해봤습니다..! 시도해 보신 분이 계시다면 알려주세요!

 

어쨌든 여기까지 해주셨다면 앞으로 해당 저장소에 Commit시, 깃허브에서 자동으로 파일 배포를 진행해 줄 것입니다!

 

이제부터는 블로그 뼈대를 만들어 가꾸어 나가면 됩니다. 여기서부터 방법이 두 가지로 나뉩니다.

 

첫번째, Jekyll 블로그 테마를 이용

 

두번째, Zero-base에서 시작

 

찾아보면 리액트나 Vue로 블로그를 제작하신 분들이 더러 계시던데, 저 같은 경우에는 프론트엔드쪽을 잘 알고 있지 못해서 첫번째 방법인 Jekyll 테마를 사용하여 블로그를 제작했었습니다. 이유로는 수정하는데 큰 어려움이 없고 조금의 시간만 들인다면 얼마든지 커스터마이징(라이센스 허용한도 내)하여 사용할 수 있기 때문입니다.

 

지킬 블로그 테마를 바로 확인해 볼 수 있는 사이트들이 몇 군데 있는데 아래에 링크를 올려놓겠습니다. 제가 블로그 테마를 여러 번 바꾸면서 느낀 점은 부동산과 똑같다는 점입니다. 발품을 팔면 팔수록 선택할 수 있는 폭이 정말 넓어지는 거 같습니다. 이쁜 테마, 깔끔한 테마, 본인 마음에 드는 테마는 많지만 한번에 찾기 어렵기 때문에 여러군데 확인해보시고 선택하시는 게 좋습니다.

 

Jekyll Themes

 

 

Jekyll Themes – a curated directory

 

 

Free Jekyll Themes | Jekyll Themes

 

 

Jekyll Themes

 

 

Jekyll Themes

 

위의 사이트들 말고도 테마를 확인하고, 다운받을 수 있는 사이트는 더 있으니 참고하세요!

 

간단하게 설명드릴 블로그 테마는 jekyllthemes.org 에서 다운받은 Monophase 테마입니다.

첫번째 줄 두번째 항목 Monophase 를 클릭해주세요.

클릭해서 상세보기 페이지로 이동하면

위와 같은 버튼들이 보입니다.

Homepage, Download, Demo, License

 

• Homepage - 개발자의 홈페이지로 이동합니다.
• Download - 업로드된 테마의 소스파일을 zip 형태의 파일로 다운로드 받습니다.
• Demo - 실제 구동 중인 블로그 테마를 확인해볼 수 있습니다.
• License - 해당 테마의 라이센스 정보입니다.

---

다운로드 버튼을 클릭하여 파일을 받으시거나, 개발자 홈페이지(보통은 해당 테마 깃허브 레포지토리로 이동합니다.)로 이동해서 파일을 다운로드 받거나, 저장소 전체를 Fork하는 방법이 있습니다.

 

Fork 기능을 사용하여 내 리포지토리로 파일을 복사한 경우, 해당 리포지토리의 이름을 'userName.github.io' 로 수정해주셔야 하고, 파일을 직접 다운로드 받아 올리는 경우, 생성한 리포지토리에 압축 해제한 파일들을 전부 올려주시면 됩니다.

 

모든 파일이 정상적으로 커밋이 됐다면 이제 userName.github.io 로 접속해보시면 됩니다.

설정한 테마가 정상적으로 출력되시나요?!

테마마다 설정 파일, 파일 내 문법들이 조금씩 달라서 처음에는 어려울 수 있지만, 보다 보면 점점 눈에 익숙해지실 겁니다. 거의 필수로 수정해주셔야 하는 파일 중 하나는 최상단 디렉토리에 존재하는 config 파일인데요.

 

해당 파일에는 블로그의 타이틀, 키워드, url 등이 존재하는데, 테마를 받고 나서 수정한 부분이 없다면 온라인에 공개되어 있는 그대로의 상태일 것입니다.

 

프론트엔드 IDE 툴이나 깃허브 레포지토리 내에서 직접 수정 어느 방법을 사용하셔도 문제가 되진 않습니다.

---

깃허브에서 제공하는 기능은 여기까지입니다. 위의 내용을 참고해서 블로그, 포트폴리오, 기업 소개서, 프로젝트 소개서 등 응용이 가능합니다. md 파일을 이용하여 글을 올리는 방법이나 테마를 커스터마이징 하는 내용은 해당 글에는 담지 않을 생각입니다.

 

추후에 작성하고 싶을 때.. 아무 때나 작성해서 올리도록 하겠습니다 ㅋㅅㅋ틀린 부분, 빠진 부분, 진행하다가 어려운 부분은 답글이나 메일 주시면 답변 드리겠습니다.

 

다음에는 기회가 된다면 Ruby를 이용한 블로그 제작 방법에 대해서도 포스팅 해보겠습니다. (크흠)