Home 블로그 시작하기
Post
Cancel

블로그 시작하기

Blog Platform 선정

블로그를 시작해야겠다고 결심한 순간 블로그를 만드는 방법에 대해서 찾아보았습니다. 처음에는 “블로그 플랫폼은 거기서 거기 아닌가??” 라고 생각했지만 생각보다 다양한 블로그 플랫폼이 존재했고, 각 플랫폼이 장/단점이 명확하게 드러나서 어느 플랫폼을 사용하는 게 좋을 지 고민해야 했습니다. 그리고 저는 블로그를 시작하는 것이 처음이기 때문에 개인적인 경험에 의존하지 않고 각 플랫폼을 사용해보신 다른 분들의 후기를 기반으로 결정했습니다.

우선, 블로그 플랫폼을 선정하기 위해 이상적인 블로그의 특징에 대해서 고민하고 정리했습니다.

  • 장기적으로 운영될 것을 고려하여 커스텀이 유연해야 한다.
    블로그가 장기적으로 운영되면 추가적으로 필요한 기능이 발견될 수 있습니다.
    떄문에 다양한 기능을 지원하거여 plug-in형태로 추가할 수 있거나 직접 개발하여 기능을 추가할 수 있어야한다고 생각했습니다.
  • 비용 부담 최소화 한다.
    당연히 돈이 안들어가면 좋겟죠…?
    무료로 운영이 가능하다면 가장 좋지만 경우에 따라 연간 10만원까지는 투자할 생각이 있었습니다.
  • Markdown Format으로 작성할 수 있어야 한다.
    md(markdown)파일은 어느 플랫폼에서나 읽을 수 있고, 작성하기 간단하기 때문에 지금도 문서 정리에 사용하고 있습니다. 블로그 작성만을 위해 다른 에디터를 사용하고 싶지 않았습니다.

이를 토대로 여러 블로그 플랫폼을 살펴보았고, 고민 끝에 비용과, 유연한 커스텀 측면을 고려하여 Jekyll + Github.io 조합을 사용하기로 결정했습니다.

  • Medium : 간단하게 생성이 가능하고 무료이지만… 커스텀이 되지 않았습니다
  • Velog : 22 간단하게 생성이 가능하고 무료이지만… 커스텀이 되지 않았습니다.
  • Wordpress : 포트폴리오, 개발일지, 기술 블로그 등의 다양한 템플릿이 존재했고, 기능도 다양하며 커스텀도 가능합니다. 하지만 1개월 당 $4 비용 부담이 있습니다.
  • Jekyll + Github.io : 코드를 직접 작성하여 정적 웹페이지를 생성하는 형태이기 때문에 커스텀이 상당히 유기적이며, Github.io는 Public Repository 형태라면 무료로 운영할 수 있습니다. (Jekyll : 정적 사이트 생성기, Github.io : 웹페이지를 퍼블리싱하기 위한 용도. (무료))

Jekyll 설치

Jekyll은 Vue, React처럼 정적 사이트를 만들어주는 도구(혹은 프레임워크)이며 블로그 지향적이기 때문에 테마와 플러그인이 다양하고 풍부합니다. 이러한 특징 때문에 블로그, 포트폴리오 같은 정적 페이지를 만들 때 주로 사용됩니다.

Jekyll은 Ruby기반으로 동작하기 때문에 Ruby 관련 패키지를 설치해야 하며, 빌드를 위해서 GCC, MAKE 패키지를 설치해야 합니다. 현재 글을 쓰는 시점에서의 요구사항은 아래와 같지만, 정확한 요구사항과 설치 방법은 Official page를 참고하는 것이 좋습니다.

Jekyll Requirements (2021.09.30 기준)

  • Ruby version 2.5.0 or higher, including all development headers (check your Ruby version using ruby -v)
  • RubyGems (check your Gems version using gem -v)
  • GCC and Make (check versions using gcc -v,g++ -v, and make -v)

공식 페이지 내용을 기반으로 간단하게 설치 방법을 정리해보겠습니다. (아래 내용은 Ubuntu 배포판을 기준으로 하며 공식 페이지 내용을 발췌하였습니다.)

Ruby와 다른 전제조건을 설치합니다.

1
2
sudo apt-get update
sudo apt-get install ruby-full build-essential zlib1g-dev

gem설치 경로를 현재 사용자 홈 디렉터리 아래의 gems 위치로 변경합니다. (*환경변수 및 ~/.bashrc파일을 사용)

1
2
3
4
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

마지막으로 Jekyll과 bundler를 설치합니다.

1
gem install jekyll bundler

Jeklly Theme 선정

저는 모든 기능을 개발하여 사용하기보다는 공개 테마를 적극적으로 활용하였습니다. 모든 기능을 개발하다보면 글을 쓰는 시간보다 기능을 개발하고 유지보수하는 것에 시간이 많이 들어갈 것 같았기 때문입니다.
테마는 Jekyll-theme-chirpy를 사용하였습니다. 무료, 깔끔한 UI, 필요한 기능들(댓글,검색,태그 분류)을 내포하고 있기 때문에 선택하였습니다. (무료 테마 중에는 만족하는 테마가 많지 않아서 꽤 오래 찾았던 것 같네요.)

Jekyll Theme Chirpy 다운로드

제가 선택한 Jekyll Theme Chirpy를 Github Repository에서 다운로드 받고 실행시켜봅니다. 물론 Github Repository READMD파일에 자세하게 정리되어 있으므로 이를 참조하는 것이 가장 좋습니다.

Git clone

1
git clone https://github.com/cotes2020/jekyll-theme-chirpy.git

Gemfile의 내용을 기반으로 소스코드를 bundling합니다. (Chirpy테마의 경우 _site 경로에 bundling된 파일들을 저장합니다.)

1
2
cd jekyll-theme-chirpy 
bundle install

Jekyll 실행해봅니다. (저는 WSL을 사용하기 때문에 호스트 윈도우OS에서 접근가능하도록 --host 옵션을 주었습니다.)

1
bundle exec jekyll serve --host=0.0.0.0

실행한 뒤 4000포트로 접근하면 블로그가 보입니다. *(이를 활용해서 github에 업로드 전에 이미지가 깨지진 않는 지, 글자 폰트는 적절한지 등의 내용을 검토해볼 수 있습니다.)

Chirpy-home

Github 업로드

이제 github을 활용하여 github.io 페이지를 생성하고 Jekyll을 통해 만든 블로그를 업로드합니다.

github repository 생성

  • username.github.io 이름으로 repository를 생성합니다.
  • Repository는 공개 범위가 Public 으로 설정되어야합니다. (Private으로 설정하면 page 개설에 비용을 부과 해야합니다.)

Chirpy-github-repo

github.io 페이지를 생성하기 위해서 초기화 스크립트를 수행합니다. 명령을 수행하면 특정 디렉터리와 파일이 삭제되니 유의합니다.

  • .travis.yml
  • files under _posts
  • folder docs
1
bash tools/init.sh

로컬에서 Git 프로젝트의 remote(origin)를 제 Repository로 변경합니다.

1
2
git remote remove origin 
git remote add origin https://github.com/wsscc2021/wsscc2021.github.io.git

Github repository에 push 합니다.

1
git push origin master

Github repository에 push하면 자동으로 빌드/배포가 수행되는 것을 Action 탭에서 확인할 수 있습니다.

Chirpy-github-action

그리고 빌드/배포의 결과로 gh-pages branch를 생성하고 bundling된 파일들을 commit한 것을 볼 수 있습니다.

Chirpy-github-gh-pages

마지막으로 github pages의 source branch를 gh-pages branch로 변경하여 퍼블리싱합니다.

Chirpy-github-page-branch

완료되면 웹브라우저에서 wsscc2021.github.io 로 접근하여 블로그를 확인할 수 있습니다.

This post is licensed under CC BY 4.0 by the author.

-

블로그 댓글 기능 추가하기 with Disqus