안녕하세요.

오픈소스컨설팅 김세연입니다.

이번에는 Bitbucket cloud에 jekyll을 이용하여 Blog Publishing을 해보겠습니다.

Bitbucket Cloud 회원가입

https://bitbucket.org/account/signup/

gmail 또는 Atlassian 계정을 생성합니다.

Repository 생성

Repository를 생성할 때 이름은 Bitbucket 고유 주소의 bitbucket.io가 붙습니다.

저는 it2seiyon으로 회원가입을 했기 때문에 it2seiyon.bitbucket.io 값으로 했습니다.

This is private repository 체크 해제 후 Create repository를 합니다.

생성된 Repository의 URL을 보시면 bitbucket.org/it2seiyeon/it2seiyon.bitbucket.io를 확인할 수 있습니다.

https://it2seiyon.bitbucket.io 접속해 보면 아직 index파일이 없어서 File not found 가 뜹니다.

다른 주소 bitbucket.io를 만들고 싶으시면 Team 추가하여 만들 수 있습니다.

+ 버튼으로 추가할 수 있으며 Team ID 또한 고유 값을 갖습니다.

그래야 겹치지 않는 주소를 갖겠죠?

Repository Clone

Bitbucket Cloud Repository(remote repository)를 내 컴퓨터에 복사를 합니다.

저는 Atlassian의 Soruce Tree를 이용해서 Repository를 관리해보겠습니다.

https://www.sourcetreeapp.com/

Branch history를 그래프로 표시해주는 기능이 정말 편리합니다.

설치 완료 후 계정의 원격 저장소에서 앞에서 만든 Repository를 확인할 수 있습니다.

Repository옆에 작은 Clone 버튼으로 저장소를 내 컴퓨터에 복제합니다.

이제 Jekyll을 설치하고 Blog를 생성하여 remote repository에 추가해 보겠습니다.

Jekyll

설치

이 글의 ruby 버전은 2.4.4, jekyll은 3.6.2 입니다.

macOS 사용자는 쉽게 jekyll를 시작할 수 있습니다. macOS는 Ruby가 기본으로 설치되어 있거든요..

https://jekyllrb.com/docs/quickstart/

Windows는 조금 더 작업을 해야 합니다. 자세한 과정은 아래 링크를 확인해 주세요.

https://jekyllrb.com/docs/windows/

• Ruby devkit installer를 이용하여 설치합니다.
• Start command Propt with Ruby로 jekyll을 설치합니다.
  

Jekyll theme 적용

처음부터 블로그를 만들기는 어렵기 때문에 기존에 인기 있는 jekyll 테마를 다운로드 받아서

새로 만든 blog에 적용해보겠습니다.

Jekyll theme중 인기있는 jasper를 적용해 보겠습니다.

https://github.com/jekyller/jasper

Download zip으로 Source code를 다운로드 받습니다.

jekyll은 _data, _layout, _include, _post 등 소스코드로 _site를 생성합니다.

_config.yml 수정

Bitbucket 주소를 수정합니다.

short_url: ‘ it2seiyon.bitbucket.io/ ‘

baseurl: /

블로그를 효과적으로 운영하기 위해서는 많은 항목들을 수정해야합니다.

Google Analytic도 추가하고 댓글 기능도 추가할 수 있습니다.

Start Command Prompt with Ruby를 실행합니다. ( Ruby devkit으로 설치 )

Local Repository로 이동하여 theme에 필요한 패키지들을 설치합니다.

cd C:\Users\sy\Downloads\jasper-master\jasper-master
C:\Users\sy\Downloads\jasper-master\jasper-master>bundle install

패키지 설치 후 Local에 server를 띄워 확인해 보겠습니다.

C:\Users\sy\Downloads\jasper-master\jasper-master>bundle exec jekyll serve

기본 테마 환경으로 올라왔습니다.

이제 Remote Repository에 올리기 위해서 빌드를 실행합니다.

C:\Users\sy\Downloads\jasper-master\jasper-master>bundle exec jekyll build

빌드 후 jasper-pages 디렉터리가 생성됐습니다. _config.yml 설정에 의해서 생성되는 위치를 변경할 수 있습니다.

jasper-pages의 파일들을 Local Repository에 복사합니다.

Remote Repository에 추가

Soruce Tree에서 추가된 소스를 확인할 수 있습니다.

내 Local 스테이징 환경에 모두 추가합니다.

git 명령어로는 git add . 이 되겠습니다.

스테이지에 올린 후 커밋 메시지와 함께 커밋을 합니다.

그리고 Push로 Remote Repository에 소스를 추가합니다.

Bitbucket에서 추가된 소스코드를 확인할 수 있습니다.

웹사이트를 확인해 보겠습니다.

https://it2seiyon.bitbucket.io/

잘 나오네요. 앞으로 할 일은 블로그를 꾸미고 jekyll 빌드를 하고 생성된 소스를

Repo에 올리는 일입니다.

마무리

Jekyll를 이용하여 웹 사이트를 생성하고 Bitbucket cloud에 Publishing을 해봤습니다.

Bitbucket colud로 blog를 운영할 때 장점이 아래와 같이 있습니다.

• Blog CSS, Javascript 수정
• 무제한 traffic
• https 사용
• 무료 domain

Jekyll Theme를 수정해서 나만의 블로그를 빠르고 쉽게 만들 수 있는 방법입니다.

앞에 설명한 단계를 요약을 하면

• Bitbucket 가입
• Repository 생성 ( .bitbucket.io 가 뒤에 붙습니다. )
  • 다른 repository를 생성하여 publishing 하고싶을 땐 team을 추가하여 진행하면 됩니다.
• Sourece Tree 설치 (git 관리 프로그램)
  • git clone
• Jekyll 설치
• Jekyll Theme 다운로드
• Jekyll _config.yml 수정
• Jekyll build
• 생성된 Sourece code  복사 → Local Repository 붙여 넣기
• Sourece Tree에서 소스 스테이지환경 추가 → 커밋 → 푸시
• 내 Bitbucket page 확인 ( https://it2seiyon.bitbucket.io/ )

Bitbucket cloud의 pipeline을 이용하면 더 많은 방법으로 응용이 가능합니다.

마무리 하겠습니다. Bibucket으로 Happy CI/CD 하세요~

감사합니다.