GitHub Blog 시작하기 - Jekyll과 GitHub Pages 블로그 만들기
GitHub Blog를 시작하려는 분들을 위한 가이드입니다.
이 글에서는 GitHub Pages, Jekyll, 그리고 인기 테마인 minimal-mistakes를 활용해
나만의 기술 블로그를 만드는 과정을 단계별로 설명합니다.
Jekyll 기반 GitHub Blog 생성
https://mmistakes.github.io/minimal-mistakes/
해당 Jekyll 테마(minimal-mistakes) 기준으로 작성 되어있습니다.
준비해야 할 준비물
개인 GitHub 계정 (https://github.com/)
Visual Studio Code (https://code.visualstudio.com/)
GitHub Blog 시작하기
https://github.com/mmistakes/minimal-mistakes
github 홈페이지에서 로그인을 한 상태로 해당 jekyll 테마 github 사이트에 접속합니다.
해당 사이트에서 위 오른쪽에 Fork가 있습니다. 해당 버튼을 눌러주세요.
Fork 버튼을 누르면 로그인하고있는 Github계정에 repositories(저장소) 에 똑같은 코드를 가진 Project(코드 저장소)가 생성이 됩니다.
Fork 작업이 완료되면 Setting 버튼을 눌러 Setting 홈페이지로 이동합니다.
코드 저장소의 이름을 바꿔줘야 합니다.
무조건 자기 자신의 githubID.github.io
저의 경우, 제 닉네임은 ruyshy 이므로 ruyshy.github.io 로 설정해줍니다.
다음으로 Code로 돌아가서 _config.yml을 클릭해서 해당 파일로 들어갑니다.
화면과 같이 펜모양 버튼을 눌러, 하단 메뉴인 Edit in place를 클릭하여 편집 화면으로 넘어갑니다.
url : “https://ruyshy.github.io”
제일 먼저 url을 위 형식처럼 변경해줍니다.
변경 후, Commit changes…를 눌러 편집 완료를 진행합니다.
이 작업을 통해 자신의 블로그를 접속하실 수 있게 됩니다.
다음으로 자신의 블로그 홈페이지(https://ruyshy.github.io/)를 들어가서 정상적으로 만들어졌는지 확인합니다. 제 블로그는 이미 작성이 되어있기 때문에 저와 다르게 보이긴 해도 블로그에 접속하실 수 있습니다.
Blog Post 작성 방법
다시 GitHub 저장소로 돌아와서 Add file 버튼을 눌러 Create new file을 선택합니다.
입력 칸에 _posts/ 를 입력해 폴더를 만들어줍니다.
다음 입력 칸에 포스트 파일을 작성할 것인데, 작성할 때, 형식은 다음과 같습니다.
예시) YYYY-MM-DD-PostName.md (2025-04-10-TestPost.md)
.md 확장자는 마크다운 파일 형식입니다.
https://mmistakes.github.io/minimal-mistakes/docs/configuration/#paginate-v2
해당 홈페이지에 들어가면
살짝 스크롤을 내려보면
Then, create /posts/index.html with the following content:
밑에 코드 블럭을 복사해서 깃허브 코드에 붙여줍니다.
입력 후, 아래 줄에 아무 텍스트나 적어서 테스트를 진행 해봅시다.
편집이 다 끝나면, Commit changes… 을 눌러 저장소에 적용합니다.
적용 후, Action을 눌러 가보면 맨위에 노란색으로 뜨며 해당 액션을 눌러서 보면
이런식으로 빌드가 진행되고 있습니다.
위 스크린샷처럼 완료가 되면 홈페이지에 적용이 됩니다.
포스트 작성까지 진행이 되었습니다.
Posts를 눌러 작성이 된 내용이 뛰워지는 것을 확인할 수 있습니다.
Visual Studio Code 간단 사용 방법
저는 이미 설치가 되어있기 떄문에 한글입니다. 한글 설정하는 방법은 다음에 이어서 진행하겠습니다.
우선, 먼저 해야할 것은 해당 위에 이미지 처럼 visual studio code 창에 자기 자신의 프로젝트 폴더를 드래그하여, 열어줍니다!
해당 폴더가 열리면서 왼쪽에 파일 리스트가 열립니다. 수정할 파일을 열어서 편집하거나, 마우스 오른쪽 클릭하여 파일을 추가/삭제/이름 수정 작업을 진행할 수 있습니다.
위 빨간색 박스모양이 extension(확장) 인데요. 클릭하여 확장 탭으로 들어가줍니다.
Korean Language Pack for Visual Studio Code 검색칸에 해당 확장을 검색하여 설치하면 한국어 설정이 됩니다.
설치 진행 후, Ctrl + Shift + P 를 입력 후, configure display languag 선택 후, 한국어를 설정해주고 재실행하면 적용 됩니다.
Visual studio code 쓸만한 extension 추천
Material Icon Theme
Material Icon Theme은 Visual Studio Code에서 파일 및 폴더 아이콘을 Google의 Material Design 스타일로 바꾸어 개발 환경을 더욱 직관적이고 세련되게 만들어주는 인기 확장 프로그램입니다.
Prettier - Code formatter
Prettier - Code formatter 는 Visual Studio Code에서 널리 사용되는 코드 포맷터 확장 프로그램으로, 일관된 코드 스타일을 자동으로 적용하여 가독성과 유지보수성을 향상시킵니다.
Prettier 설정 방법
위에 빨간 박스를 클릭하여 Prettier - Code formatter을 찾아 초록 박스를 클릭 후, 설정을 클릭 해서 설정 창으로 이동합니다.
- 상단 검색 창(빨간 박스)에
format on save을 입력합니다. - 노란 박스 부분의 옵션을 체크 해줍니다.
- 해당 기능은 파일 저장
Ctrl+S을 할 때 마다 코드를 이쁘게 정렬 해주는 옵션입니다.
- 상단 검색 창에
Default Formatter을 검색합니다. - 설정이 prettier format (esbenp.prettier-vscode) 로 설정되어 있는 지 확인하고 안되어 있다면
Prettier - Code formatter해당 확장을 선택해 줍니다.
Markdown
Markdown 기능 목록입니다.
- .md 파일을 열면 자동으로 문법 강조(syntax highlighting)가 적용된다.
- Ctrl+Shift+V 를 누르면 Markdown 미리보기(Preview)를 열 수 있다.
- Markdown 파일을 수정하면 미리보기가 자동으로 갱신된다.
- 링크 클릭, 이미지 삽입, 표 작성 같은 것도 기본적으로 지원한다.
해당 버튼을 클릭하면 markdown 문법이 적용된 것을 미리보기를 열 수 있습니다.
Markdown All in One
저는 개인적으로 Markdown 보다 해당 확장을 추천합니다.
사용하기 간편하고, 해당 확장에서 간편하게 사용법을 익힐 수 있습니다.
Markdown 확장과 같이 Preview를 통해 미리보기가 가능합니다.
{% %} 해당 문법은 preview에 적용되지 않긴하지만, markdown 문법들은 적용되서 괜찮은거 같습니다.
GitHub Blog 기본 설정 설명 (_config.yml)
프로필 설정
author: 해당 코드에서 설정을 진행 해주면 됩니다!
| 속성 | 설명 | 예시 값 |
|---|---|---|
name |
작성자의 이름 또는 닉네임을 지정합니다. | "ruyshy" |
avatar |
프로필 이미지 경로입니다. /assets/images/... 또는 외부 URL도 가능. |
"/assets/images/profile/github_profile_image.jpg" |
bio |
간단한 자기소개 텍스트입니다. | "백엔드 개발자이자 블로거" |
location |
거주지 또는 활동 지역 정보를 입력합니다. | "South Korea" |
email |
이메일 주소입니다. 보통 연락처 용도로 사용됩니다. | "ruyshyttr@gmail.com" |
links |
외부 링크 목록을 구성할 수 있는 배열입니다. | 아래 참고 (하단에 자세히 설명) |
links: 항목의 구조
| 하위 속성 | 설명 |
|---|---|
label |
표시될 이름 (예: GitHub, Email 등) |
icon |
Font Awesome 아이콘 클래스 |
url |
연결할 외부 링크 주소 (mailto:도 가능) |
default 설정
Jekyll 블로그의 _config.yml 파일에서 defaults: 섹션은 파일의 경로(path)와 유형(type)에 따라 자동으로 기본값(values)을 설정하는 기능입니다.
| 옵션 명 | 설명 | 예시 값 |
|---|---|---|
scope.path |
이 default 설정이 적용될 경로 (상대 경로 기준). 비워두면 전체 적용 | "", "_posts/blog" |
scope.type |
콘텐츠 타입. 보통 posts, pages, drafts 등을 지정 |
"posts", "pages" |
values.layout |
적용할 레이아웃 템플릿 지정. _layouts/ 폴더의 파일명에서 .html 제외하고 작성 |
"single", "default" |
values.title |
기본 제목. 개별 포스트에서 설정하지 않으면 이 값이 사용됨 | "기본 제목" |
values.permalink |
기본 URL 구조를 지정. 글의 URL 커스터마이징에 사용 | "/:categories/:title/" |
values.categories |
글의 카테고리 설정. 배열로 지정 가능 | [blog], [assembly] |
values.tags |
기본 태그 설정. 배열 형태로 사용 가능 | [jekyll, ruby] |
values.author_profile |
프로필 박스 출력 여부 (Minimal Mistakes 테마에서 사용) | true, false |
values.sidebar.nav |
사용할 사이드바 메뉴 지정. _data/navigation.yml에서 정의한 키와 일치해야 함 |
"main" |
values.comments |
댓글 기능 사용 여부. Utterances, Disqus 등 설정에 따라 작동 | true, false |
values.share |
SNS 공유 버튼 표시 여부 | true, false |
values.related |
관련 포스트 영역 표시 여부 | true, false |
values.robots |
SEO 메타 태그 설정. "noindex, nofollow" 등도 설정 가능 |
"index, follow" |
values.toc |
목차 표시 여부 (Table of Contents) | true, false |
values.toc_sticky |
스크롤해도 목차가 고정되도록 설정 | true, false |
values.classes |
레이아웃에 custom CSS class를 적용할 수 있음 | "wide", "narrow" |
values.read_time |
예상 읽기 시간 표시 여부 | true, false |
values.exclude |
특정 키워드/파일을 기본 설정에서 제외할 수 있음 | ["drafts", "secret.md"] |
plugins 설정
| 설정 이름 | 설명 | 예시 값 |
|---|---|---|
plugins |
Jekyll에서 사용할 플러그인 목록입니다. 로컬 서버나 GitHub Action으로 빌드할 때 작동합니다. | ["jekyll-feed", "jekyll-seo-tag"] |
whitelist |
(이전 이름: safe_plugins) GitHub Pages에서 사용이 허용된 플러그인만 명시적으로 지정합니다. |
["jekyll-seo-tag"] |
별도 설정들
timezone: 해당 속성을 사용할 시,
Gemfile 에서 아래 코드를 추가해줘야 합니다.
gem "tzinfo"
gem "tzinfo-data"
timezone 설정할 때, 아래 링크에서 선택할 수 있습니다. 저는 Asia/Seoul 을 사용 중입니다.
favicon.ico
Favicon이란?
웹사이트 탭에 표시되는 작은 아이콘입니다. .ico, .png, .svg 등의 포맷을 사용할 수 있지만 브라우저 호환성을 위해 favicon.ico가 가장 일반적입니다.
설정 방법 (Jekyll + GitHub Pages 기준)
favicon.ico파일 준비32x32또는16x16크기의.ico포맷 이미지 파일을 준비하세요.- 변환 사이트 예:
- 루트 디렉토리에 추가
favicon.ico파일을 GitHub 블로그의 루트 경로 (/)에 위치시켜야 합니다.- 즉, 리포지토리 기준으로는
/favicon.ico - 로컬 디렉토리 기준으로는
your-project-root/favicon.ico
- 즉, 리포지토리 기준으로는
_includes/head.html또는_layouts/default.html에 링크 추가
<link
rel="icon"
type="image/x-icon"
href="/favicon.ico"
/>
보통 minimal-mistakes 테마에서는 _includes/head/custom.html에 추가하면 안전합니다.
- GitHub Actions를 사용하는 경우
_site/에 복사되도록 확인- Jekyll 빌드시
favicon.ico가/_site/에 복사되어야 합니다. _config.yml에 아래 설정이 있다면, favicon도 복사될 수 있도록 확인:
- Jekyll 빌드시
include:
- favicon.ico
테스트
GitHub Pages에 배포 후, 브라우저에서 https://yourusername.github.io/favicon.ico가 열리는지 확인
캐시로 인해 보이지 않으면 강력 새로고침 (Ctrl+Shift+R) 또는 시크릿 모드에서 확인
필요하다면 .png, .svg 같은 확장 포맷으로도 대체 가능하며, 다음과 같이 추가할 수 있습니다:
<link
rel="icon"
type="image/png"
href="/assets/images/favicon.png"
/>
favicon도 GitHub 블로그의 인상 요소 중 하나니까, 블로그 컨셉에 맞게 예쁘게 꾸며보는 것도 추천!
Thema
해당 사이트에 설명이 자세히 나와있습니다!
# theme : "minimal-mistakes-jekyll"
remote_theme: "mmistakes/minimal-mistakes"
minimal_mistakes_skin: "dark" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
Gem 기반 테마로 설치하려면: theme: 속성을 사용합니다.
Gemfile에 gem "minimal-mistakes-jekyll" 추가해줘야 합니다.
원격 테마로 설치하려면: remote_theme: 속성을 사용합니다.
minimal_mistakes_skin 속성에서 테마를 선택하실 수 있습니다.
깃허브 블로그 댓글
comments: 해당 속성은 깃허브 블로그 댓글 설정 에서 다룹니다.
추가 내용
저와 같은 깃허브 블로그 테마를 선택하셨다면, 해당 minimal-mistakes 위에 해당하는 테마 가이드 사이트에서 더 많은 것을 배우고 설정할 수 있습니다!
Leave a comment