Github.io 블로그 만들기 (with jekyll)

Fabian·2021년 4월 11일
0
post-thumbnail

Intro (TMI)

평소에 글을 적는 것을 좋아하기 때문에, 개발자가 된 후 "블로그를 꾸준히 작성해보자" 라는 생각을 갖고 있습니다.
그로인해 자연스럽게 몇몇 블로그 플랫폼 들을 이용해본 후 현재는 Velog 에 정착하고자 첫 글을 포스팅합니다. (TMI 를 건너뛰시려면 Jekyll? 로 이동해주세요!)

어떤 플랫폼들을 써봤는데?

코드스테이츠 부트캠프 수강생일 당시에는 Medium 이라는 플랫폼을 사용하였고, 이후 코드스테이츠 운영엔지니어 포지션에서 인턴근무를 했을 당시에는 Github.io 를 통해 직접 블로그를 만들어서 사용했습니다.
이렇게 블로그들을 이동해본 이유는 Medium은 컨텐츠는 넓고 다양하지만 결제를 해야한다는 점,
Github.io 은 커스터마이징이 가능하고 글을 포스팅하는 방식이 커밋을 하는 방식이기에 잔디가 심어지지만, 마크다운언어를 사용해야하기에 이미지를 이용하는 부분이 번거롭다는 단점이 있었습니다. (마크다운은 정말 잘 쓰게되었다..!) 그리고 무엇보다 잔디가 심어지는 것이 좋기도하고... 좋지 않기도하고.. !

결국 Velog로 정착하게 되며, Github.io 를 만드는 방법에 대한 글을 포스팅하고자 합니다.
(Velog에서 Github.io 만드는 법을 작성하는 것이 조금 맞나 싶긴하다..^^)

현재도 Medium 에 올렸던 Github.io 블로그 만들기 라는 게시물을 보시는 분들이 많아 관심있으신 분들이 많을 것 같다는 생각도 든다!


Jekyll ?

먼저 지킬이란, 루비로 만든 정적 웹사이트 생성기로, Template 와 Contents 등의 다양한 포맷의 텍스트 데이터를 읽어 정적 웹사이트를 생성해줍니다. 간단하게 마크다운 파일을 사용하는 블로그 플랫폼입니다!

Github Pages 만들기

  1. Repository 를 생성합니다.
  • Repository name 은 꼭 "본인의GithubUserName.github.io" 을 설정해야합니다.
  • 저는 Public 으로 설정하고 Readme도 추가하였지만, 가끔.. 무단으로 clone을 해가시는 분들이 있기 때문에, Private 설정도 추천입니다!

Github username이 khgkimhyungyu 라면
khgkimhyungyu.github.io 로 만드셔야합니다!
(현재는 codeFabian 으로 username이 변경되었습니다.)

Ruby 설치하기

루비가 있다면 정말 간단하기 때문에 설치했었습니다. (너무 만든지 오래되서 올바른 방법인지는..!)
apt 명령어로 설치합니다.
$ sudo apt install ruby ruby-dev build-essential

Jekyll 과 Bundler 설치하기

gem install 명령어를 사용하여 jekyll 과 bundler를 설치한다.
gem 은 분산패키지 시스템으로 라이브러리의 작성,공개,설치를 도와주는 시스템이라고 합니다.
$ gem install jekyll bundler

혹시라도 설치가 안된다면 앞에 sudo 를 붙여보자!!

Jekyll theme 선택하기

빠르고 쉽게 블로그를 꾸미길 원한다면 jekyll thema를 사용하면 되는데
무료 thema 중 minimal-mistakes 는 가장 인기있는 thema 중 하나라고 합니다.

Jekyll theme 다운로드

원하는 테마에 들어가서 클론을 합니다.
저의 경우에는 폴더를 생성한 뒤에 그 안에 클론을 했었습니다.

midir githubio   // githubio라는 directory 를 생성
cd githubio  // 생성한 githubio directory 로 이동
git clone https://github.com/thiagorossener/jekflix-template.git 
//클론

클론이 완료 되었다면, 폴더 안으로 이동한 뒤에 bundler 를 수행합니다.

cd jekyfilx 클론한 폴더   // 클론한 폴더로 이동한 것입니다
$ bundle             // bundle 수행을 하면 아래와 비슷한것을 확인할 수 있습니다.
etching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 10.5.0
...
Bundle complete! 3 Gemfile dependencies, 47 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
$

설치가 완료되면 지킬 샘플 블로그 처럼 웹호스팅이 가능합니다.
아래 명령어를 실행하고 localhost:4000 주소를 확인하자

$ bundle exec jekyll serve
theme가 적용된 블로그를 생성한 것을 볼 수 있을 것 입니다.
여기서 끝난 것이 아니라 가장 중요한 부분으로 자신의 github.io주소로 웹호스팅하는 것만 남았습니다.

username.github.io 주소로 웹호스팅

지금까지는 로컬에서만 웹페이지가 확인되었는데, 이제 블로그를 Github pages에 올릴 차례입니다.
전에 만들었던 github repository 를 사용합니다.
먼저, 다운로드 받았던 테마의 폴더명을 앞으로 내 저장소로 쓸 예정이니 폴더명부터 익숙하게 바꿔줍니다. 저는 단순하게 Github_Blog 로 사용했었습니다.

그리고 전에 만들었던 저장소, 즉, username.github.io 에 remote를 설정합니다.

$ git remote -v     // 이미 remote 되어있는 것을 확인할 수 있다.
$ git remote remove origin // 기존의 remote 삭제
$ git remote add origin "본인이만들었던 repo 주소" 
$ git remote -v      // 본인의 repo가 remote 된 것을 확인할 수 있다.
$ git push -u origin master     //본인의 git repo에 소스가 업로드될 것이다.
만약 push 과정에서 에러가 생겼다면 pull 을 해야한다 이런 에러메시지를 확인할 수 있는데
(아마 reject 어쩌고...? )
$ git pull  을 하면 될 것이고, 그래도 새로운 에러메시지가 보인다면
$ git stash 를 해준 다음에 다시 push를 해주자
만약!!! 이것도 되지 않는다? 
$ git push -u origin +master  를 한다. 
master에 +를 붙인 것인데, 나 역시도 에러로 인해 이렇게 진행하였다.

여기까지 완료를 했다면, username.github.io 로 접속했을 때, 테마변경까지 완료되었을 것입니다.

제가 그동안 사용했던 Github 블로그를 소개합니다!
Github contributions 까지 연동을 했었고, 클릭 시 개인 노션으로 이동합니다.
(하지만 앞으로는 Velog를 사용할 예정입니다.)

글 작성해보기

마크다운언어가 익숙하여 글을 작성해서 포스팅을 했더라도, 정해진 형식을 지키지 않았다면 글이 포스팅되지 않을 것 입니다. 따라서 글을 작성하는 방법에 대해 다뤄보겠습니다.

Convention 이라는 것을 잘 지켜야만 글이 정상적으로 포스팅이 됩니다.
컨벤션이란, 파일명이나 프로젝트 폴더 트리구성을 약속된 규칙에 따라 작성하면 자동으로 설정되는 것을 의미합니다.

---
layout: post
title: 프로토타입 이해하기
subtitle: "프로토타입 뽀개봅시다"
type: "TIL"
createDate: "2020-12-17"
til: true
text: true
author: codeFabian
post-header: false
header-img: ""
order: 12
---

실제로 제가 사용하는 convention 입니다.

  • layout 부분은 post 로 대부분 둔다. 포스팅 할 때는 이부분을 수정 할일이 없을 것 입니다.
  • title 은 게시물 제목으로 표시됩니다. 제목 뿐만 아니라 링크 될 페이지의 타이틀까지 결정됩니다.
  • subtitle 은 벨로그에서는 태그와 같은 부분입니다. (태그기능은 설정하지 않았습니다.)
  • type 은 카테고리 매뉴 중 어떤 카테고리에 포스팅 될지를 결정했었습니다.
  • createDate 이 부분은 중요한 부분인데, 만약 현재 날짜보다 이전의 날짜로 지정한다면 정상적으로 올라가지 않을 것이고, 현재시간이 15일인데 18일로 설정한다면 18일에 글이 포스팅 되는 경우도 있습니다! (설정에 따라 다릅니다)

또한 파일명도 꽤 중요합니다.
파일을 만들 때, 2019–08–19-FirstPost.md 이런느낌으로 중간중간 - 를 통해 구분해야합니다. 2019.08.19.FirstPost.md 이렇게 . 으로 구분할 때, 정상적으로 포스팅이 되지 않았습니다


이렇게 깃헙블로그를 만드는 방법에 대해서 글을 적어보았습니다.
제가 사용했던 깃헙블로그 입니다!
실제로 이 방법을 사용해도 잘 되지 않을 수 있기 때문에 제가 참고했던 블로그도 남겨놓겠습니다.

참고한 블로그: 차근차근 깃헙블로그시리즈

profile
Frontend Engineer

0개의 댓글