Jekyll 블로그 만들기 #1 (개발 환경 세팅)

 

Jekyll을 이용해 나만의 블로그 테마를 만들고 싶나요? 정말 간단하고 명료한 가이드라인이 여기 있습니다!

 

1. 개발 환경 세팅

---

Jekyll과 블로그를 생성을 돕는 플러그인은 루비(Ruby) 언어로 개발되어 있으며, 따라서 가장 먼저 루비 설치가 선행되어야 합니다.

 

1-1. 루비(Ruby) 설치

Windows PC에 설치하는 경우

링크를 타고 들어가 상단에 위치한 설치 파일 Ruby+Devkit 3.x.x (x64) 을 다운로드 받습니다.

https://rubyinstaller.org/downloads/

Downloads

 

Linux PC에 설치하는 경우

Linux 계열의 OS에서 작업을 한다면, 패키지로 설치하는 방법이 있습니다.

# Debian 또는 Ubuntu
$ sudo apt-get install ruby-full

# CentOS, Fedora, RHEL
$ sudo yum install ruby

 

1-2. Jekyll 설치

Ruby는 ‘gem’이라는 패키지 관리자(Python에 pip이 있듯이)를 통해 개발 도구를 설치, 또는 업데이트합니다. 저희에게 필요한 패키지는 jekyll, 그리고 bundler(패키지 의존성 관리)입니다.

$ gem install bundler jekyll

 

이제 jekyll new [디렉토리 이름] 명령어로 블로그 템플릿을 생성합니다.

$ jekyll new myblog

 

디렉토리(예시에서는 myblog)가 하나 생성될 것이고 기본적으로 아래 이미지처럼 내용물들이 채워져 있을 겁니다.

 

각 리소스에 대해 하나씩 살펴보기 전에 먼저 블로그 서비스가 웹에 잘 띄워지는지 확인합니다.

$ cd myblog
$ bundle config path 'vendor/bundle' # jekyll plugin이 설치될 path 지정
$ bundle install
$ bundle exec jekyll serve

 

브라우저를 열고 주소창에 localhost:4000를 검색해보세요. 예제로 제공된 테마가 나타나야 합니다.

 

 

2. Jekyll 블로그 운영을 위한 리소스

---

앞으로 해야할 일은 블로그 디렉토리(myblog) 안에 있는 블로그 설정, 레이아웃, 디자인 요소, 메타데이터, 그리고 사이트에 게재될 글들에 해당하는 모든 리소스를 채워 넣는 것입니다.

 

2-1. 기본 디렉토리 구조

초기 디렉토리 구조는 아래와 같습니다.

myblog
├── _posts                     # Blog posts
├── _site                      # jekyll 빌드 결과물 ('결과물'이기 때문에 이 안에서는 작업 x)
├── .bundle                     
├── vendor                     # gem 패키지가 저장되는 공간 
├── .jekyll-cache              
├── _config.yml                # site configuration
├── 404.html
├── Gemfile                    # jekyll Bundler
├── .gitignore                

 

_posts

블로그에 등록할 게시물 파일이 저장되는 공간입니다. 해당 파일은 마크다운(.md) 또는 .html 확장자를 지원하며, 파일 이름을 지을 때는 지정된 형식 “연-월-일-제목.확장자”를 지켜야 합니다.

# 연-월-일-제목.md 또는 연-월-일-제목.markdown
2024-02-13-Post1.md

 

게시글을 작성하는 가이드라인은 추후에 따로 작성할 예정이며, 먼저 해당 문서를 참조하면 도움이 될 겁니다.

 

_config.yml

사이트의 메타 데이터와 플러그인 정보를 관리합니다. 블로그에 필요한 메타 데이터는 다음과 같은 것들이 될 수 있습니다.

• 블로그 타이틀
• 운영자 닉네임
• 이메일 주소
• Github, Facebook과 같은 소셜 서비스 정보

 

_site

_site는 Jekyll 페이지를 렌더링하기 위한 빌드 결과물을 임시로 저장하는 공간입니다. 디자인이나 다른 리소스를 수정하고 웹 페이지를 수정하면 바로바로 수정 사항이 반영되는데요. 그 말은 곧 디렉토리의 내용물이 계속 refresh된다는 것이므로, _site는 절대 편집하지 않습니다.

 

404.html

404 페이지 레이아웃을 담당합니다.

 

Gemfile

사이트에 필요한 패키지를 명시하고, 각 패키지의 dependency를 정의하는 파일입니다. 앞서 bundle install 명령어를 수행했을 때, 같은 경로에 위치한 Gemfile을 참고하는 것이죠.

 

2-2. 이제 어떤 요소들을 추가해야 하나요?

완벽한 블로그 커스터마이징을 위해서 다음과 같은 요소들이 준비해야 합니다.

• 페이지 레이아웃: html/md 류
• 스타일 시트: css/scss 류
• 웹 스크립트: js 또는 min.js 등
• 사용자 지정 폰트 파일
• 이미지: 프로필 사진, 사이트 아이콘, 기타 UI를 꾸미기 위한 이미지 등
• 메타 데이터: yml, json, csv 등
• 라이센스 (LICENSE)
• README.md

 

페이지 레이아웃/스타일 시트/웹 스크립트 이 3가지가 가장 핵심적인 요소입니다.

 

페이지 레이아웃

각 게시글 또는 URL 별로 사용자에게 어떤 UI를 보여줄지 결정합니다. 쉽게 생각해 HTML 파일이 여기에 해당합니다.

 

Jekyll에서는 _includes 또는 _layouts 라는 디렉토리를 만들어 레이아웃 파일을 관리합니다. 특히 _layouts 디렉토리 안에 html 파일을 배치할 경우 다음과 같이 게시글마다 참조할 레이아웃(ex., layout: post)을 지정할 수 있습니다.

 

스타일 시트

페이지에 표시되는 요소(텍스트, 버튼, 이미지 등)의 디자인 속성이 기록된 파일입니다. _sass 또는 assets/css 디렉토리 내에 위치합니다.

 

웹 스크립트

페이지 및 각 요소들의 동작, 또는 외부 API를 통해 특정한 기능을 수행하는 코드를 정리해두는 자바스크립트 파일입니다. assets/js 디렉토리에서 관리합니다.

 

2-3. 완성된 블로그 디렉토리 구조 예시

블로그 테마를 열심히 개발하면 대략적으로 아래와 같은 파일 트리를 얻게 될 것입니다.

myblog #(최종 예상 형태)
├── _includes                  # Theme includes
├── _layouts                   # Theme layouts
├── _posts                     # Blog posts
├── _sass                      # Sass partials (compiled into css at runtime)
├── assets
|  ├── js                         # JS compiled for distribution + raw sources
|  ├── css                     # CSS compiled for distribution
|  ├── fonts                       # Font-Awesome, and other fonts
|  └── img                         # Images used for the template
├── _data
|  ├── authors.yml             # Update the post authors configurations 
|  ├── biblio.yml              # To create a reference bibliography
|  ├── social.yml              # Social configurations to share posts (RSS, shares, ...)
└── index.html                 # sample home page (blog page paginated)
├── _site                      # jekyll 빌드 결과물 ('결과물'이기 때문에 이 안에서는 작업 x)
├── .bundle                     
├── vendor                     # gem 패키지가 저장되는 공간 
├── .jekyll-cache              
├── _config.yml                # site configuration
├── 404.html
├── Gemfile                    # jekyll Bundler
├── .gitignore   
├── LICENSE
├── README.md           

 

다음 포스팅에서부터는 각각의 리소스를 어떻게 개발하고 관리하는 지 하나하나 살펴보겠습니다.

 

n. 기타: vscode로 블로그 개발 시 유용한 플러그인

---

Jekyll이 아니더라도 HTML, CSS, 그리고 Javascript 코드를 다룰 때, 다음 확장팩들을 설치하면 도움이 됩니다.

 

Prettier

Javascript, Typescript, Css, Scss, HTML 등에서 자동 줄바꿈 기능을 제공합니다.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier - Code formatter - Visual Studio Marketplace

이미지 출처: https://glebbahmutov.com/blog/configure-prettier-in-vscode/

 

MinifyAll

css, js 파일의 용량을 줄이기 위해 소스코드를 압축하는 플러그인입니다.

https://marketplace.visualstudio.com/items?itemName=josee9988.minifyall

MinifyAll - Visual Studio Marketplace

 

Auto Rename Tag

HTML 태그의 유형을 수정할 때, 여는 태그와 닫는 태그가 동시에 업데이트 되도록 도와줍니다. 코드 몇 글자만 이더라도 시간을 줄일 수 있습니다.

https://marketplace.visualstudio.com/items?itemName=prasadbobby.auto-rename-tag

Auto Rename Tag - Visual Studio Marketplace