[블로그] GitHub Pages와 Jekyll 이용하여 테크 블로그 만들기
안녕하세요 마개입니다.
기존에 네이버 블로그를 이용하여 IT 기술들에 대한 내용을 작성했는데 IT 기술을 작성하는 것은 다른 블로그에 작성하고자 합니다. 네이버에서 코드를 작성할 때 가독성이 떨어지는 문제도 있고 원하는대로 꾸미기가 힘들었기 때문입니다. 이에 대한 내용들을 공유합니다.
플랫폼 선정하기
테크 블로그로서 Tistory, Velog, Medium, GitHub Pages 등 여러 플랫폼들이 있지만 그 중에도 GitHub Pages를 이용하기로 결정했습니다.
GitHub Pages를 선택한 이유는 몇 가지 있습니다.
- 코드를 작성하기 좋고 가독성이 좋다.
- 개발자로서의 포트폴리오를 만들고 싶다.
- GitHub 코드와 연결하여 사용하고 싶다
- 광고를 붙여야 한다. (이왕이면…)
그래서 다른 플랫폼들도 훌륭한 플랫폼이지만 GitHub Pages를 이용해 보기로 했습니다. 이제 만들어봅시다.
Repository 생성하기
첫 번째로는 저장 공간을 만드는 것입니다. GitHub에 로그인하여 좌측 상단에
New를 클릭하여 신규 Repository를 생성합니다.
여기서 중요한 것은 Repository name입니다. 여기 이름은
GitHub유저명.github.io로 해주셔야 제대로 동작합니다. 저의 경우 “magaeTube.github.io”로 생성했습니다. 하단에 “Add a README file”도 체크하고 Create repository를 클릭합니다. 이러면 일단 웹페이지는 완성입니다. 당장 브라우저를 열어 각자의 github.io 주소 https://GitHub유저명.github.io 로 이동해봅니다.
이러면 아주 심플한 모습이 나온 것을 확인하실 수 있습니다. 이대로 이용하면 매우 허전하니 여기에 테마를 적용하고 내용을 붙여보겠습니다.
다시 GitHub으로 돌아와서 Repository를 Clone해서 꾸며보겠습니다. 우측 상단에
Code를 클릭하고 HTTPS의 주소를 복사합니다.
복사한 주소를 원하는 로컬 위치에 놓고 clone합니다.
Jekyll 설치하기
저는 Jekyll을 이용하여 블로그를 꾸미기로 생각하고 설치 작업을 진행합니다.
터미널을 열고 아래 명령어를 실행합니다.
1
$ gem install jekyll bundler
설치가 제대로 완료되었는지 로그를 통해 확인합니다.
설치 과정에서 위와 같은 권한 에러가 발생한다면 아래의 블로그를 참고하여 설치를 진행합니다.
Jekyll 생성
설치가 완료되면 github.io 디렉터리로 이동해서
Jekyll을 생성합니다.
1
$ jekyll new ./
해당 명령어를 실행하기 전에 디렉토리에 있는 파일들을 전부 삭제합니다. (README.md 포함)
bundle install
완료가 되었다면 다음으로는
bundle을 설치합니다.
1
$ bundle install
위의 명령어를 입력해서 설치를 진행합니다.
설치 시에 위와 같은 에러(
uninitialized constant DidYouMean::SPELL_CHECKERS (NameError))가 발생할 수 있습니다.
이럴 때 bundler를 업데이트해서 해결할 수 있습니다.
1
$ bundle update --bundler
위의 명령어로 업데이트하고 다시 실행합니다.
로컬에서 Jekyll 확인하기
완료되었다면 서버를 띄워서 확인을 해보겠습니다.
1
$ bundle exec jekyll serve
위의 명령어를 입력해서 서버를 실행합니다.
실행했을 때 위와 같은 에러가 발생한다면
csv를 추가합니다. 추가하고 다시 실행을 진행합니다.
1
$ bundle add csv
실행했을 때 혹시 위와 같은 에러가 발생한다면
webrick을 추가합니다.
1
$ bundle add webrick
추가되었다면 다시 실행해봅니다.
위와 같은 에러가 발생한다면 메인 페이지에서
Gemfile.lock 파일을 삭제하고 다시 실행합니다.
위와 같이 뜨게되면 http://localhost:4000/ 또는 http://127.0.0.1:4000으로 접속하여 확인합니다.
위와 같이 뜨게 되면 정상적으로 처리된 것이고 이제 테마를 찾아서 적용합니다.
테마 적용하기
테마 선택하기
테마를 적용하기 전에 가장 먼저 해야할 것은 테마를 선택하는 것입니다.
Jekyll을 이용해서 블로그를 꾸미는데 Jekyll은 텍스트를 이용해서 정적 사이트를 만들어주는 것입니다. Jekyll 테마를 고를 수 있는 사이트는 아래와 같이 다양하게 있습니다.
- https://jamstackthemes.dev/
- http://jekyllthemes.org/
- https://jekyllthemes.io/
- https://jekyll-themes.com/
테마 다운로드하기
원하는 테마를 선택했다면 해당 깃허브로 이동해서 소스를 다운로드합니다. 저는
minimal-mistakes 테마를 이용했습니다.
해당 깃허브로 이동하여 ZIP 파일을 다운로드합니다.
소스 옮기기
해당 ZIP 파일을 받고 압축을 풀어 안에 있는 파일들을 우리가 clone받은 github.io에 복사합니다. (내용은 전부 덮어쓰기합니다.)
bundle 재설치 및 실행
위에서 작업했던 bundle을 설치하고 실행하는 작업을 다시 진행합니다.
1
$ bundle install
이제 완료되었으면 다시 http://127.0.0.1:4000으로 이동해보겠습니다.
그러면 위에서 보듯이
Minimal Mistakes 테마가 적용된 것을 확인하실 수 있습니다. 테마를 적용했으면 각자에 맞는 내용으로 바꿔서 진행하면 됩니다.