공개 노트

깃허브 페이지 무료 블로그 만들기 Git Jekyll 초보 가이드

2026-06-07Views 371약 11분생성형 AI 활용

Summary

왜 깃허브 페이지인가?

여러분, 혹시 나만의 블로그를 갖고 싶다는 생각을 해보신 적이 있나요? 아마 많은 분들이 '네'라고 대답하실 겁니다. 하지만 막상 시작하려고 하면 어디서부터 어떻게 해야 할지 막막하게 느껴지는 것이 현실입니다.

네이버 블로그나 티스토리 같은 플랫폼은 사용하기는 쉽지만, 디자인에 한계가 있고 원치 않는 광고에 노출되기도 합니다. 그렇다고 워드프레스(WordPress)를 사용하자니 호스팅 비용이 부담되고, 복잡한 설정과 보안 문제에 골머리를 앓게 될까 걱정됩니다.

바로 이 지점에서 깃허브 페이지(GitHub Pages)는 가장 완벽하고 강력한 대안을 제시합니다. 깃허브 페이지는 전 세계 개발자들의 성지인 깃허브(GitHub)에서 제공하는 무료 정적 사이트 호스팅 서비스입니다. 이름만 들어서는 뭔가 복잡하고 어려워 보인다고요?

전혀 그렇지 않습니다. 오히려 코딩에 대한 깊은 지식이 없는 왕초보라도, 심지어는 개발자가 아니더라도 이 책에서 제시하는 단계를 차근차근 따라오기만 하면, 마치 전문 개발자가 만든 것처럼 빠르고, 안전하며, 아름다운 나만의 블로그를 1시간 안에 완성할 수 있습니다.

아니, 공짜라면서 전문가 블로그를 만든다는 게 말이 돼? 세상에 공짜가 어딨어? 뭔가 함정이 있는 거 아냐?

얼핏 생각하면 충분히 가질 수 있는 합리적인 의심입니다. 하지만 여기에는 '정적 사이트'라는 놀라운 비밀이 숨어 있습니다. 우리가 흔히 아는 워드프레스 같은 동적 사이트는 방문자가 접속할 때마다 데이터베이스에서 정보를 가져와 페이지를 실시간으로 조립합니다. 이는 마치 손님이 올 때마다 요리 재료를 꺼내 처음부터 음식을 만드는 것과 같습니다. 당연히 속도가 느리고, 재료 창고인 데이터베이스를 계속 관리해야 하는 부담이 따르지요.

반면에 정적 사이트는 모든 페이지를 미리 완성된 요리처럼 만들어 놓습니다. 방문자는 그저 완성된 요리를 받아보기만 하면 됩니다. 이 과정은 데이터베이스 조회나 복잡한 서버 측 처리가 전혀 필요 없기 때문에 비교할 수 없을 정도로 속도가 빠르고, 해킹의 위협으로부터 극도로 안전합니다. 깃허브 페이지는 바로 이 '미리 만들어진' 정적 페이지만을 서비스하기 때문에, 서버에 가해지는 부담이 거의 없어 무료로 제공될 수 있는 것입니다.

이 책에서는 깃허브 페이지라는 훌륭한 레스토랑에서 여러분의 요리를 서빙하는 방법을 알려드립니다. 그리고 그 요리, 즉 블로그 콘텐츠를 만들고 디자인하는 최고의 셰프로 지킬(Jekyll), 휴고(Hugo), 헥소(Hexo)라는 세 명의 특급 요리사를 소개할 것입니다. 이들은 정적 사이트 생성기(Static Site Generator, SSG)라고 불리며, 복잡한 코딩 없이도 멋진 블로그를 순식간에 만들어내는 마법 같은 도구들입니다.

이 책을 끝까지 읽고 나면 여러분은 다음의 놀라운 능력을 갖게 될 것입니다.

평생 무료로 운영되는 나만의 블로그 소유
개발자가 사용하는 최신 기술(Git, Markdown)에 대한 완벽한 이해
지킬, 휴고, 헥소를 활용하여 원하는 디자인의 블로그를 자유자재로 구축
나만의 도메인을 연결하여 블로그의 전문성 강화
검색 엔진 최적화(SEO), 댓글, 방문자 분석 기능 추가로 블로그 가치 극대화

준비되셨나요? 이제 복잡한 설정과 불필요한 비용의 굴레에서 벗어나, 진정한 나만의 디지털 공간을 창조하는 위대한 여정을 시작하겠습니다. 코딩을 전혀 몰라도 괜찮습니다. 저만 믿고 따라오시기 바랍니다.

깃허브와 깃 완전 정복

버전 관리 시스템 깃이란 무엇인가

본격적인 블로그 만들기에 앞서, 우리는 반드시 '깃(Git)'이라는 개념을 이해하고 넘어가야 합니다. 아마 많은 분들이 '깃'이나 '깃허브'라는 단어를 들어는 보셨겠지만, 그것이 정확히 무엇을 의미하는지는 잘 모르실 겁니다. 괜찮습니다. 지금부터 배경지식이 전혀 없는 분들도 완벽하게 이해할 수 있도록 차근차근 설명해 드리겠습니다. 깃은 '버전 관리 시스템(Version Control System, VCS)'의 한 종류입니다. 말이 좀 어렵지요? 아주 쉽게 비유를 들어보겠습니다.

여러분이 대학교 레포트를 작성한다고 상상해 보시기 바랍니다. 처음에는 '레포트_최종.hwp'라는 이름으로 파일을 저장합니다. 그런데 수정을 하다가 보니 원래 내용이 더 나은 것 같아서, '레포트_진짜최종.hwp'라고 하나 더 저장합니다. 지도 교수님의 피드백을 받아 다시 수정하고는 '레포트_진짜최종_수정1.hwp'로 저장하고, 마지막으로 제출 직전에는 '레포트_이거마지막진짜최종.hwp'와 같은 이름의 파일들이 폴더에 수두룩하게 쌓이는 경험, 다들 한 번쯤은 있으실 겁니다.

이러한 방식은 몇 가지 심각한 문제를 야기합니다. 첫째, 어떤 파일이 정말로 최종 버전인지 구분하기가 어렵습니다. 둘째, 각 파일이 이전 버전과 비교해서 정확히 어떤 부분이 변경되었는지 한눈에 파악하기가 불가능합니다. 셋째, 만약 팀원 여러 명과 함께 작업한다면, 각자 수정한 파일을 취합하는 과정에서 그야말로 '대재앙'이 펼쳐질 것입니다.

깃은 바로 이처럼 비효율적이고 위험한 파일 관리 방식의 완벽한 해결책입니다. 깃은 파일의 변경 이력을 스냅샷(snapshot) 형태로 차곡차곡 기록하고 관리해 주는 똑똑한 비서와 같습니다. 여러분이 레포트를 수정하고 저장할 때마다, 깃은 그 변경 사항('A 문장이 추가됨', 'B 문단이 삭제됨' 등)을 정확하게 기억해 둡니다. 덕분에 우리는 언제든지 과거의 특정 시점으로 돌아갈 수 있고(마치 타임머신처럼), 현재 버전과 과거 버전을 비교하여 변경된 내용을 명확하게 확인할 수 있습니다.

더욱 놀라운 것은 여러 사람이 동시에 한 프로젝트를 작업할 때 깃이 발휘하는 엄청난 협업 능력입니다. 예를 들어, A라는 팀원은 글의 서론을 쓰고, B라는 팀원은 본론을 작성할 때, 각자의 컴퓨터에서 작업한 내용을 나중에 깃을 통해 아주 손쉽고 안전하게 하나로 합칠 수 있습니다. 각자 작업한 내용이 서로 충돌하는 부분이 있다면 깃이 똑똑하게 알려주고, 이를 해결하도록 도와주기까지 합니다.

정리하자면, 깃은 파일의 변경 이력을 체계적으로 관리하여, 언제든 원하는 시점으로 되돌아가거나 변경 내용을 추적하고, 여러 사람과의 협업을 극도로 원활하게 만들어주는 필수적인 도구라고 할 수 있습니다. 2005년 리눅스(Linux) 커널을 개발한 것으로 유명한 리누스 토르발스(Linus Torvalds)에 의해 개발된 깃은, 현재 전 세계 소프트웨어 개발의 표준으로 자리 잡았으며, 개발자가 아니더라도 콘텐츠 제작자, 디자이너, 작가 등 컴퓨터로 파일을 다루는 모든 이에게 엄청난 생산성을 선물합니다. 이 책에서 우리가 만들 블로그 또한 모든 글과 설정 파일들을 이 깃을 통해 관리하고 깃허브에 올리게 될 것입니다. 따라서 깃을 이해하는 것은 깃허브 페이지 블로그 운영의 가장 첫걸음이자 핵심적인 기초 체력임을 반드시 명심하시기 바랍니다.

개발자들의 놀이터 깃허브 알아보기

깃(Git)이 파일의 변경 이력을 관리하는 '소프트웨어' 그 자체라면, 깃허브(GitHub)는 깃으로 관리하는 프로젝트 파일들을 저장하고 공유하는 '웹 기반 호스팅 서비스'입니다. 즉, 내 컴퓨터에 설치된 깃을 통해 작업한 내용(버전 기록)을 원격 공간에 안전하게 백업하고, 다른 사람들과 함께 보고 편집할 수 있도록 만들어주는 플랫폼인 셈이지요.

이 관계를 다시 한번 쉽게 비유해 볼까요? 깃이 여러분의 컴퓨터에 설치된 워드나 한컴오피스 같은 문서 편집 프로그램이라면, 깃허브는 구글 드라이브나 드롭박스 같은 클라우드 저장소라고 생각할 수 있습니다. 다만 깃허브는 단순한 파일 저장을 넘어, 깃의 버전 관리 기능을 100% 활용하여 강력한 협업과 코드 공유, 프로젝트 관리 기능을 제공한다는 점에서 차원이 다릅니다.

깃허브는 2008년에 서비스를 시작한 이래로 전 세계 수많은 개발자들의 필수 플랫폼으로 자리매김했습니다. 마이크로소프트(Microsoft)가 2018년에 무려 75억 달러(당시 한화 약 8조 원)라는 천문학적인 금액에 인수했다는 사실만 봐도 깃허브의 위상을 짐작할 수 있습니다. (출처: Microsoft official blog, "Microsoft to acquire GitHub for $7.5 billion", 2018.06.04) 오늘날 깃허브는 단순한 코드 저장소를 넘어, 개발자들이 서로의 코드를 보고 배우며(오픈소스 프로젝트), 아이디어를 공유하고, 채용 시장에서는 개발자의 실력을 증명하는 가장 중요한 '이력서'로 활용되고 있습니다.

잠깐만요, 그럼 개발자도 아닌데 깃허브를 꼭 써야 하나요? 그냥 내 컴퓨터에서 작업해서 올리면 안 되나요?

아주 좋은 질문입니다. 결론부터 말씀드리면, 깃허브 페이지로 블로그를 운영하기 위해서는 깃허브 사용이 필수적입니다. 왜냐하면 '깃허브 페이지'라는 서비스 자체가 깃허브 저장소(Repository)에 있는 파일들을 웹사이트 형태로 보여주는 기능이기 때문입니다. 즉, 우리의 블로그 파일들이 담긴 집이 바로 깃허브인 셈입니다.

물론 우리는 복잡한 코드를 다루는 개발자는 아닐 수 있습니다. 하지만 우리가 작성할 블로그 포스트(Markdown 파일), 블로그의 디자인을 결정하는 테마 파일, 각종 설정 파일 등 블로그를 구성하는 모든 요소들이 바로 깃허브 위에서 관리되고 세상에 공개됩니다. 깃허브를 사용함으로써 우리는 다음과 같은 엄청난 이점을 얻게 됩니다.

완벽한 백업: 만약 내 컴퓨터가 고장 나거나 파일을 잃어버려도, 깃허브에 모든 기록이 남아있으므로 언제든 완벽하게 복구할 수 있습니다. 여러분의 소중한 글들이 영원히 안전하게 보관되는 것입니다.
체계적인 콘텐츠 관리: 글을 수정하거나 디자인을 변경할 때마다 그 이력이 깃을 통해 깃허브에 차곡차곡 쌓입니다. "아, 3일 전에 썼던 표현이 더 좋았는데..."라고 생각될 때, 클릭 몇 번으로 정확히 3일 전 버전으로 되돌릴 수 있습니다.
무료 호스팅: 이것이 가장 핵심적인 이유입니다. 깃허브는 '깃허브 페이지'라는 이름으로, 특정 규칙에 따라 만들어진 저장소의 내용을 완전 무료로 웹사이트에 게시해 줍니다. 우리가 비싼 호스팅 비용을 한 푼도 내지 않고 블로그를 운영할 수 있는 이유가 바로 여기에 있습니다.

결론적으로 깃허브는 우리 블로그의 뼈대와 살이 저장되는 집이자, 그 집을 세상에 보여주는 창구 역할을 동시에 수행하는 핵심 플랫폼입니다. 개발자가 아니더라도 걱정할 필요 없습니다. 이 책에서는 블로그 운영에 필요한 최소한의, 그리고 가장 핵심적인 깃허브 사용법만을 골라 누구보다 쉽고 명확하게 알려드릴 것입니다.

깃허브 저장소 생성과 기본 용어

이제 깃허브에 우리 블로그의 집이 될 '저장소(Repository)'를 만들어 보겠습니다. 저장소는 줄여서 '레포(Repo)'라고도 부르며, 프로젝트에 관련된 모든 파일과 각 파일의 수정 이력 전체를 담고 있는 디렉터리, 즉 폴더라고 생각하시면 가장 쉽습니다. 앞으로 우리가 작성할 모든 블로그 글, 이미지, 디자인 테마 파일 등이 바로 이 저장소 안에 담기게 됩니다.

저장소를 만들기 전에, 반드시 알아야 할 몇 가지 기본 용어들이 있습니다. 이 용어들은 앞으로 계속해서 사용될 것이므로, 지금 확실히 이해하고 넘어가시는 것이 좋습니다.

Repository (저장소, 레포): 프로젝트 파일 및 버전 관리 이력이 저장되는 공간. 우리 블로그의 집입니다.
Commit (커밋): 파일의 변경 내용을 저장소에 기록하는 행위. "이 부분을 이렇게 수정했음"이라고 깃에게 알려주는 하나의 작업 단위입니다. 커밋을 할 때는 반드시 어떤 변경 사항인지 요약하는 '커밋 메시지'를 함께 작성해야 합니다. 예를 들어 '첫 블로그 포스트 작성'과 같이 말이지요.
Push (푸시): 내 컴퓨터(로컬 저장소)에서 작업하고 커밋한 변경 이력을 깃허브(원격 저장소)에 업로드하는 행위. 푸시를 해야만 깃허브에 내 작업 내용이 반영됩니다.
Pull (풀): 깃허브(원격 저장소)의 변경 내용을 내 컴퓨터(로컬 저장소)로 가져와 동기화하는 행위. 주로 여러 명이 협업할 때 다른 사람이 작업한 내용을 내 컴퓨터에 반영하기 위해 사용합니다.
Branch (브랜치): 독립적으로 어떤 작업을 진행하기 위한 '가지'를 만드는 기능. 메인 작업 흐름(보통 main 또는 master 브랜치)에 영향을 주지 않고 새로운 기능을 테스트하거나 글의 초안을 작성하는 등의 작업을 할 때 유용합니다. 작업을 마친 후에는 메인 브랜치에 합치는(Merge) 과정을 거칩니다.

자, 이제 용어에 익숙해졌으니 실전으로 들어가 보겠습니다. 먼저 깃허브 웹사이트(github.com)에 접속하여 계정을 생성합니다. 계정이 이미 있다면 로그인하시기 바랍니다.

로그인 후, 화면 우측 상단의 '+' 아이콘을 클릭하고 'New repository'를 선택합니다.
'Repository name' 입력란에 저장소 이름을 입력해야 합니다. 여기가 가장 중요합니다. 깃허브 페이지가 제대로 작동하게 하려면, 반드시 사용자이름.github.io 라는 정해진 형식으로 이름을 지어야 합니다. 예를 들어, 제 깃허브 사용자 이름이 'gemini-ai'라면, 저장소 이름은 반드시 'gemini-ai.github.io'가 되어야 합니다.
'Description'에는 저장소에 대한 간단한 설명을 적습니다. 'My First Blog'와 같이 자유롭게 기입하면 됩니다. (선택 사항)
'Public'으로 설정되어 있는지 반드시 확인합니다. Private 저장소는 깃허브 페이지 기능이 제한되므로, 무료로 블로그를 운영하려면 반드시 Public으로 설정해야 합니다.
'Add a README file' 옵션을 체크합니다. README 파일은 저장소의 대문 역할을 하는 파일로, 프로젝트에 대한 소개 등을 담는 공간입니다. 일단 만들어두는 것이 좋습니다.
마지막으로 'Create repository' 버튼을 클릭합니다.

축하합니다! 여러분은 방금 깃허브에 여러분의 첫 블로그가 살아 숨 쉴 공간을 성공적으로 만드셨습니다. 이제 https://사용자이름.github.io 라는 주소로 접속해 보시기 바랍니다. 아직은 별 내용 없이 README 파일의 내용만 보이겠지만, 이 주소가 바로 앞으로 여러분의 블로그가 될 공식 주소입니다. 이제 이 텅 빈 집에 멋진 인테리어를 하고, 가구(콘텐츠)를 채워 넣을 일만 남았습니다.

깃허브 페이지 작동의 핵심 원리

우리는 방금 사용자이름.github.io 라는 특별한 이름의 저장소를 만들었습니다. 왜 굳이 이런 형식으로 이름을 지어야 했을까요? 그 이유는 바로 이것이 깃허브에게 "이 저장소의 내용을 웹사이트로 만들어줘!"라고 말하는 일종의 약속이기 때문입니다. 깃허브는 사용자이름.github.io 라는 이름의 공개(Public) 저장소를 발견하면, 그 저장소의 main 또는 master 브랜치에 있는 파일들을 자동으로 웹사이트로 변환하여 https://사용자이름.github.io 라는 주소로 발행(Publish)해 줍니다. 이것이 바로 깃허브 페이지의 가장 기본적인 작동 원리입니다.

잠깐, 그럼 저장소에 HTML 파일을 그냥 올리면 그게 바로 웹사이트가 되는 건가요?

정확합니다! 가장 단순한 형태의 깃허브 페이지는 바로 그것입니다. 예를 들어, 우리가 index.html이라는 이름의 파일을 만들고 그 안에 아래와 같은 간단한 코드를 작성했다고 가정해 봅시다.


<!DOCTYPE html>

<html>

<head>

  <title>My Awesome Blog</title>

</head>

<body>

  <h1>Hello, World!</h1>

  <p>This is my first GitHub Pages site.</p>

</body>

</html>

이 index.html 파일을 사용자이름.github.io 저장소에 푸시(Push)하면, 잠시 후 https://사용자이름.github.io 주소로 접속했을 때 "Hello, World!"라는 제목과 문장이 나타나는 것을 볼 수 있습니다. 이처럼 깃허브 페이지의 본질은 저장소에 있는 HTML, CSS, JavaScript 파일들을 그대로 웹에 보여주는 정적 호스팅 서비스입니다.

하지만 여기서 이런 의문이 생길 수 있습니다. "아니, 블로그 글을 쓸 때마다 저렇게 복잡한 HTML 태그를 일일이 다 입력해야 한다고? 그건 너무 불편하잖아!"

바로 이 지점에서 '정적 사이트 생성기(Static Site Generator, SSG)'인 지킬(Jekyll), 휴고(Hugo), 헥소(Hexo)가 화려하게 등장합니다. 이 도구들의 역할은 우리가 훨씬 쓰기 편한 양식(주로 '마크다운'이라는 간단한 문법)으로 글을 작성하면, 그것을 알아서 완전한 형태의 HTML 파일로 '변환(Compile)' 또는 '빌드(Build)'해주는 것입니다.

조금 더 구체적인 작동 흐름을 살펴보겠습니다.

콘텐츠 작성: 우리는 HTML이 아닌, 마크다운(Markdown)이라는 아주 쉽고 직관적인 문법을 사용해 블로그 포스트를 작성합니다. (마크다운에 대해서는 뒤에서 자세히 배울 것입니다.)
테마 적용: 미리 만들어진 전문가 수준의 디자인 테마(Theme)를 다운로드하여 적용합니다. 이 테마 안에는 글 목록 페이지, 글 상세 페이지, 태그 페이지 등의 디자인 틀(Layout)이 모두 준비되어 있습니다.
빌드(Build): 내 컴퓨터에서 지킬, 휴고, 헥소 중 하나의 명령어를 실행합니다. 그러면 이 생성기는 우리가 마크다운으로 작성한 글과 테마의 디자인 틀을 자동으로 조합하여, 수십, 수백 개의 완전한 HTML 파일들로 구성된 하나의 웹사이트 폴더(_site, public 등)를 생성합니다.
배포(Deploy): 마지막으로, 이렇게 생성된 결과물(HTML, CSS, JS 파일들)만을 사용자이름.github.io 저장소에 푸시합니다.

깃허브는 저장소에 새로 올라온 이 파일들을 보고, 약속대로 https://사용자이름.github.io 주소를 통해 세상에 보여줍니다. 이것이 바로 깃허브 페이지와 정적 사이트 생성기를 결합하여 블로그를 운영하는 방식의 핵심입니다. 우리는 마크다운이라는 쉬운 언어로 글쓰기에만 집중하면 되고, 디자인과 HTML 변환이라는 복잡한 과정은 정적 사이트 생성기가 모두 알아서 처리해 주는, 극도로 효율적이고 우아한 시스템인 것입니다.

특히 지킬(Jekyll)은 깃허브 페이지와 궁합이 매우 좋습니다. 깃허브를 만든 공동 창업자 중 한 명인 톰 프레스턴-워너(Tom Preston-Werner)가 만들었기 때문에, 깃허브 페이지는 지킬을 공식적으로 지원합니다. 이는 지킬 프로젝트의 경우, 3번과 4번 과정이 더욱 단순화된다는 것을 의미합니다. 굳이 내 컴퓨터에서 빌드한 결과물을 올릴 필요 없이, 지킬 프로젝트 소스 코드 자체를 저장소에 푸시하면 깃허브 서버가 알아서 빌드하여 웹사이트를 만들어주기까지 합니다. (휴고와 헥소는 '깃허브 액션'이라는 자동화 도구를 사용하면 이와 유사한 효과를 낼 수 있으며, 이 또한 나중에 다룰 것입니다.)

이제 깃과 깃허브, 그리고 깃허브 페이지가 어떤 원리로 돌아가는지 감이 잡히시나요? 깃과 깃허브는 우리 블로그의 파일과 역사를 관리하는 도구이고, 깃허브 페이지는 그 결과물을 보여주는 무대이며, 지킬/휴고/헥소는 무대에 올릴 연극을 연출하는 감독이라고 생각하시면 완벽합니다.

블로그 제작을 위한 필수 환경 설정

이제 우리 블로그의 집이 될 깃허브 저장소까지 성공적으로 만들었습니다. 비유하자면, 이제 막 새로운 아파트에 입주한 것과 같습니다. 하지만 아직 집 안이 텅 비어있지요. 멋진 가구를 들여놓고 인테리어를 하려면 무엇이 필요할까요? 바로 망치, 드라이버, 드릴과 같은 '연장'입니다. 블로그 제작에 있어서도 마찬가지입니다. 지킬, 휴고, 헥소와 같은 훌륭한 '인테리어 디자이너'를 활용하기 전에, 우리의 컴퓨터에 반드시 필요한 기본 연장들을 설치해야만 합니다.

이 장에서는 블로그 제작의 필수 3대 연장인 깃(Git), 비주얼 스튜디오 코드(Visual Studio Code), 그리고 터미널(Terminal)을 설치하고 기본적인 사용법을 익힐 것입니다. 이 과정이 조금은 생소하고 어렵게 느껴질 수도 있습니다. 하지만 걱정하지 마십시오. 하나부터 열까지, 마치 여러분 옆에 앉아 알려주듯이 친절하고 상세하게 설명해 드릴 것입니다. 이 장비들만 갖추면, 여러분은 이미 초보 블로거가 아닌 '준비된 개발자'의 첫걸음을 내딛는 것과 같습니다. 그러니 반드시 집중해서 따라오시기 바랍니다.

없으면 시작도 못 하는 깃 설치하기

우리는 앞서 깃(Git)이 파일의 변경 이력을 관리하는 '버전 관리 시스템'이라고 배웠습니다. 그리고 깃허브는 깃으로 관리되는 프로젝트를 저장하는 원격 저장소라고 했지요. 우리가 컴퓨터에서 블로그 글을 작성하고 디자인을 수정한 뒤, 이 변경 사항을 깃허브에 올리기 위해서는 반드시 내 컴퓨터에 깃이라는 프로그램이 설치되어 있어야 합니다. 즉, 깃은 내 컴퓨터(로컬)와 깃허브(원격)를 연결해 주는 필수적인 다리 역할을 합니다. 깃이 없으면 우리는 깃허브에 아무것도 보낼 수 없으므로, 블로그 만들기는 시작조차 할 수 없습니다.

이제 여러분의 운영체제에 맞는 깃 설치 방법을 알아보겠습니다.

윈도우(Windows)에 깃 설치하기

가장 먼저, 깃 공식 다운로드 페이지(https://git-scm.com/downloads)에에) 접속합니다. 접속하면 알아서 윈도우용 설치 파일을 추천해 줄 것입니다. 'Windows' 버튼을 클릭하여 설치 파일을 다운로드합니다.
다운로드한 .exe 파일을 실행하면 설치가 시작됩니다. 처음에는 'GNU General Public License'라는 라이선스 안내가 나오는데, 가볍게 'Next'를 클릭합니다.
다음은 설치 경로를 선택하는 화면입니다. 특별한 이유가 없다면 기본 경로 그대로 두고 'Next'를 클릭합니다.
'Select Components' 화면에서는 여러 가지 설치 옵션이 나옵니다. 초보자 입장에서는 매우 복잡해 보일 수 있지만, 아무것도 건드리지 않고 기본 설정 그대로 'Next'를 누르는 것이 가장 좋습니다. 기본 설정이 대부분의 사용자에게 최적화되어 있습니다.
이후에도 'Choosing the default editor used by Git', 'Adjusting the name of the initial branch in new repositories', 'Adjusting your PATH environment' 등 여러 설정 화면이 계속해서 나타날 것입니다. 여기서 겁먹지 마세요. 여러분이 해야 할 일은 그저 'Next' 버튼을 계속해서 클릭하는 것뿐입니다. 모든 설정을 기본값으로 유지하는 것이 가장 안전하고 확실한 방법입니다.
마지막 'Completing the Git Setup Wizard' 화면이 나오면 'Finish'를 눌러 설치를 완료합니다.

설치가 잘 되었는지 확인해 볼까요? 키보드의 '윈도우 키 + R'을 눌러 실행창을 열고, cmd를 입력하여 명령 프롬프트를 실행합니다. 검은 화면이 나타나면 git --version 이라고 입력하고 엔터를 쳐보세요. git version 2.XX.X.windows.X 와 같은 메시지가 나타난다면 성공적으로 설치된 것입니다.

맥(macOS)에 깃 설치하기

맥에 깃을 설치하는 방법은 크게 두 가지가 있습니다. 둘 중 어떤 방법을 사용해도 괜찮지만, 앞으로의 확장성을 고려하면 Homebrew를 이용한 설치를 강력하게 권장합니다.

방법 1: Xcode Command Line Tools 설치 (가장 간단한 방법)

'응용 프로그램 > 유틸리티' 폴더에 있는 '터미널(Terminal)'을 실행합니다.
터미널 창에 다음 명령어를 그대로 복사하여 붙여넣고 엔터를 누릅니다.

```bash

xcode-select --install


3.  "xcode-select” aommand requires the command line developer tools. Would you like to install the tools now?" 라는 팝업창이 나타나면 '설치' 버튼을 클릭합니다. 사용권 계약에 동의하면 설치가 진행됩니다.

4.  설치가 완료된 후, 터미널에 `git --version` 이라고 입력했을 때 버전 정보가 나오면 성공입니다.

방법 2: Homebrew로 설치 (강력 추천)

Homebrew(홈브루)는 맥용 패키지 관리자입니다. 패키지 관리자란, 각종 소프트웨어의 설치, 삭제, 업데이트를 터미널 명령어 한 줄로 간단하게 처리해 주는 아주 편리한 도구입니다. 지금 당장은 깃만 설치하겠지만, 나중에 휴고(Hugo) 등을 설치할 때도 Homebrew는 필수적이므로 이번 기회에 설치해 두는 것이 절대적으로 이득입니다.

1.  먼저 터미널을 열고, Homebrew 공식 사이트([https://brew.sh/)에](https://brew.sh/)에) 있는 설치 스크립트를 복사하여 붙여넣습니다. (스크립트는 보안상 업데이트될 수 있으니, 반드시 공식 사이트에서 직접 복사하세요.)

2.  설치 과정에서 비밀번호를 입력하라는 메시지가 나오면, 맥 로그인 비밀번호를 입력합니다. (비밀번호를 입력해도 화면에는 아무것도 표시되지 않는 것이 정상이니, 당황하지 말고 입력 후 엔터를 누르세요.)

3.  "Installation successful\!" 메시지가 보이면 Homebrew 설치가 완료된 것입니다.

4.  이제 다음 명령어를 터미널에 입력하여 깃을 설치합니다.

```javascript
```bash

brew install git


5.  설치가 끝나면, 터미널에 `git --version`을 입력하여 설치를 확인합니다.

이제 여러분의 컴퓨터는 깃허브와 소통할 준비를 완벽하게 마쳤습니다.

## 최고의 무료 편집기 VS Code 설치

블로그 글을 작성하고, 설정을 변경하려면 텍스트를 수정할 '편집기(Editor)'가 필요합니다. 물론 윈도우의 메모장이나 맥의 텍스트 편집기를 사용할 수도 있겠지만, 이는 마치 삽으로 땅을 파서 건물을 지으려는 것과 같이 비효율적입니다. 우리는 강력한 포크레인과 같은 전문적인 도구를 사용해야 합니다. 비주얼 스튜디오 코드(Visual Studio Code, 이하 VS Code)는 현재 전 세계 개발자들이 가장 사랑하는, 마이크로소프트에서 만든 무료 코드 편집기입니다.

VS Code를 사용해야 하는 이유는 명확합니다.

* 완전 무료: 이토록 강력한 기능을 제공하면서도 100% 무료입니다.

* 가볍고 빠름: 프로그램이 매우 가볍고 빠르게 작동합니다.

* 강력한 기능: 코드 자동 완성, 문법 오류 검사 등 글쓰기와 코딩의 생산성을 극대화하는 수많은 기능을 기본적으로 제공합니다.

* 엄청난 확장성: '확장 프로그램(Extensions)'이라는 추가 기능을 설치하여, 내가 원하는 어떤 기능이든 추가할 수 있습니다. 마크다운 글쓰기, 깃 연동 등 우리가 필요한 모든 기능이 확장 프로그램으로 존재합니다.

이제 VS Code를 설치해 보겠습니다.

1.  VS Code 공식 다운로드 페이지([https://code.visualstudio.com/download)에](https://code.visualstudio.com/download)에) 접속합니다.

2.  자신의 운영체제(Windows, Mac)에 맞는 'Stable' 버전을 클릭하여 설치 파일을 다운로드합니다.

3.  다운로드한 파일을 실행하여 설치를 진행합니다. 깃 설치 때와 마찬가지로, 모든 옵션은 기본값으로 두고 '다음' 또는 '계속' 버튼만 눌러서 설치를 완료하면 됩니다. 윈도우 설치 과정 중 '다른 작업 선택' 화면에서는 'Code(으)로 열기' 작업을 추가' 옵션을 모두 체크해 주면, 폴더에서 마우스 오른쪽 버튼을 눌러 바로 VS Code를 실행할 수 있어 편리합니다.

설치가 완료되면 VS Code를 실행해 보세요. 처음에는 영어로 보일 수 있습니다. 만약 한글 인터페이스를 원한다면, 왼쪽의 아이콘 중 가장 아래에 있는 네모 블록 모양의 '확장 프로그램(Extensions)' 아이콘을 클릭합니다. 검색창에 `korean`을 검색하여 'Korean Language Pack for Visual Studio Code'를 찾아 'Install' 버튼을 누르고, 오른쪽 아래에 나타나는 'Restart' 버튼을 눌러 프로그램을 재시작하면 모든 메뉴가 한글로 바뀝니다.

이제 여러분은 최고의 연장을 손에 쥐었습니다. 앞으로 모든 블로그 관련 작업은 바로 이 VS Code 안에서 이루어질 것입니다.

## 모든 작업의 시작점 터미널 사용법

터미널(Terminal) 또는 명령줄 인터페이스(Command Line Interface, CLI)는 많은 초보자들을 겁먹게 하는 가장 큰 장벽 중 하나입니다. 마우스로 아이콘을 클릭하는 그래픽 사용자 인터페이스(GUI)에 익숙한 우리에게, 검은 화면에 글자만 깜빡이는 터미널은 낯설고 두렵게 느껴질 수 있습니다.

> 굳이 이렇게 어려운 걸 써야 하나요? 그냥 마우스 클릭으로 다 하면 안 되나요?

물론 일부 작업은 GUI로도 가능합니다. 하지만 깃 명령어를 실행하고, 지킬/휴고/헥소를 통해 블로그를 생성하고 서버를 실행하는 등, 우리가 앞으로 해야 할 핵심적인 작업들은 모두 이 터미널을 통해 이루어집니다. 터미널은 컴퓨터와 직접 텍스트로 대화하는 방식이며, GUI보다 훨씬 빠르고 강력하며 자동화된 작업을 수행할 수 있습니다. 겁먹을 필요 없습니다. 우리는 우주선을 만드는 복잡한 명령어가 아닌, 자동차 운전에 필요한 몇 가지 기본 조작법만 익히면 충분합니다.

* 윈도우: 시작 메뉴에서 'PowerShell'을 검색하여 실행하거나, 'Git Bash'를 실행합니다. 'Git Bash'는 깃을 설치할 때 함께 설치되며, 리눅스/맥 환경과 유사한 명령어들을 제공하므로 이 책에서는 'Git Bash' 사용을 기준으로 설명하겠습니다.

* 맥: '응용 프로그램 > 유틸리티' 폴더의 '터미널(Terminal)'을 실행합니다.

이제 자동차 운전에 비유하여, 블로그 제작에 필요한 최소한의 필수 터미널 명령어를 알아보겠습니다.

### 현재 위치 확인하기: `pwd`

`pwd` (Print Working Directory) 명령어는 내가 현재 터미널에서 어느 폴더(디렉터리)에 위치해 있는지를 알려줍니다. 마치 내비게이션의 '현위치' 버튼과 같습니다. 언제든 내가 어디에 있는지 헷갈릴 때 이 명령어를 입력하면 현재 경로를 명확하게 보여줍니다.

```bash

pwd

폴더 안의 내용물 보기: `ls`

ls (List) 명령어는 현재 폴더 안에 어떤 파일과 하위 폴더들이 있는지를 목록으로 보여줍니다. 차의 창문을 열고 주변에 무엇이 있는지 둘러보는 것과 같습니다.

ls

더 자세한 정보를 보고 싶을 때는 ls -al 옵션을 사용하면 숨겨진 파일까지 모두 표시해 줍니다.

다른 폴더로 이동하기: `cd`

cd (Change Directory)는 터미널 사용에서 가장 중요하고 빈번하게 사용되는 명령어입니다. 특정 폴더로 작업 위치를 옮길 때 사용하며, 목적지를 향해 운전하는 것과 같습니다.

하위 폴더로 이동: cd 폴더이름 (예: cd Documents)
상위 폴더로 이동: cd .. (..은 현재 위치의 바로 위 폴더를 의미합니다)
최상위(홈) 디렉터리로 이동: cd ~

예를 들어, 현재 내 위치가 /Users/gemini-ai 이고, 그 아래에 projects 라는 폴더가 있다면, cd projects 명령으로 해당 폴더로 이동할 수 있습니다.

새 폴더 만들기: `mkdir`

mkdir (Make Directory)는 새로운 폴더를 생성하는 명령어입니다. 블로그 프로젝트를 담을 새로운 공간을 만드는 것과 같습니다.


mkdir my-new-blog

위 명령어를 실행하면 현재 위치에 my-new-blog 라는 이름의 새 폴더가 만들어집니다.

지금 당장은 이 네 가지 명령어(pwd, ls, cd, mkdir)만 확실하게 기억하셔도 충분합니다. 앞으로 우리는 이 명령어들을 사용하여 블로그 프로젝트 폴더를 만들고, 그 안으로 이동하여 지킬, 휴고, 헥소 관련 명령어들을 실행하게 될 것입니다. 처음에는 어색하겠지만, 몇 번만 직접 따라 해보면 금세 익숙해질 것이라고 확신합니다. 두려워하지 말고, 직접 터미널을 열어 명령어를 입력해 보시기 바랍니다.

첫 블로그 만들기: 루비 기반의 지킬(Jekyll)

드디어 모든 준비를 마치고, 우리의 첫 번째 블로그를 직접 만들어볼 시간입니다. 우리는 세 명의 특급 셰프, 즉 지킬, 휴고, 헥소 중에서 가장 먼저 지킬(Jekyll)을 만나보겠습니다. 지킬은 깃허브 페이지의 아버지와도 같은 존재이며, 초보자가 가장 쉽게 접근할 수 있는 정적 사이트 생성기입니다. 루비(Ruby)라는 프로그래밍 언어를 기반으로 동작하며, 단순함과 안정성을 무기로 오랫동안 수많은 개발자와 블로거들의 사랑을 받아왔습니다.

지킬은 왜 아직도 강력한가

최근 휴고(Hugo)나 갯츠비(Gatsby) 같은 더 빠르고 새로운 도구들이 많이 등장하면서, 일각에서는 "지킬은 이제 한물간 것 아니냐?"는 시선도 존재합니다. 하지만 이는 지킬의 핵심적인 강점을 간과한 섣부른 판단입니다. 지킬은 특히 깃허브 페이지로 블로그를 시작하는 초심자에게 있어 여전히 가장 강력하고 매력적인 선택지입니다. 그 이유는 다음과 같습니다.

깃허브의 공식 지원: 앞서 언급했듯이, 지킬은 깃허브에서 직접 만들고 지원하는 도구입니다. 이는 다른 도구들과는 비교할 수 없는 압도적인 편의성을 제공합니다. 휴고나 헥소는 내 컴퓨터에서 웹사이트 파일을 모두 생성(빌드)한 뒤 그 결과물을 깃허브에 올려야 하지만, 지킬은 프로젝트 소스 코드 자체를 깃허브에 올리기만 하면 깃허브 서버가 알아서 빌드하여 블로그를 만들어 줍니다. 이 자동화된 프로세스는 초보자의 수고를 엄청나게 덜어줍니다.
가장 풍부한 자료와 커뮤니티: 지킬은 가장 역사가 오래된 정적 사이트 생성기 중 하나입니다. 이는 곧 인터넷에 가장 방대한 양의 튜토리얼, 문서, 문제 해결 가이드가 존재한다는 것을 의미합니다. 블로그를 만들다가 문제가 발생했을 때, 구글에 검색하면 거의 모든 경우에 대한 해결책을 손쉽게 찾을 수 있습니다.
수많은 고품질 테마: 오랜 기간 동안 축적된 만큼, 아름답고 기능이 뛰어난 무료/유료 테마가 셀 수 없이 많습니다. 코딩을 한 줄도 하지 않고도, 마음에 드는 테마를 골라 적용하는 것만으로 전문가 수준의 블로그 디자인을 즉시 완성할 수 있습니다.
단순함의 미학: 지킬의 구조는 매우 직관적이고 단순합니다. _posts 폴더에 마크다운 파일 형식으로 글을 작성하고, _config.yml 파일에서 기본적인 설정을 변경하는 것만으로 블로그 운영의 대부분이 가능합니다. 초보자가 블로그의 핵심인 '글쓰기'에 집중할 수 있도록 최고의 환경을 제공합니다.

물론, 블로그의 규모가 매우 커져서 수천 개의 포스트를 다루게 되면 빌드 속도가 다른 생성기에 비해 느려진다는 단점이 있습니다. 하지만 개인 블로그를 운영하는 대부분의 사용자에게는 전혀 문제 되지 않는 수준입니다. 따라서 여러분의 첫 깃허브 페이지 블로그는 지킬로 시작하는 것을 가장 강력하게 추천합니다.

루비와 지킬 완벽 설치 가이드

지킬은 '루비(Ruby)'라는 프로그래밍 언어로 만들어졌습니다. 따라서 지킬을 사용하려면 먼저 컴퓨터에 루비를 설치해야 합니다. 요리를 하기 위해 가스레인지를 먼저 설치하는 것과 같은 이치입니다.

윈도우(Windows)에 루비와 지킬 설치하기

윈도우 환경에서 루비를 설치하는 것은 과거에 꽤 까다로운 작업이었지만, 지금은 'RubyInstaller'라는 훌륭한 도구 덕분에 매우 간단해졌습니다.

RubyInstaller 다운로드: 공식 RubyInstaller for Windows 페이지(https://rubyinstaller.org/downloads/)에에) 접속합니다. 여러 버전이 보일 텐데, 이름에 'WITH DEVKIT'이라고 적힌 버전 중 가장 최신의 추천 버전(Recommended version, 보통 별표 표시가 있음)을 다운로드합니다. DevKit이 포함된 버전을 설치해야 지킬에 필요한 다른 부가 기능(Gems)들을 문제없이 설치할 수 있습니다.
RubyInstaller 실행: 다운로드한 파일을 실행합니다. 라이선스 동의(I accept the License)를 선택하고 'Next'를 클릭합니다.
설치 옵션 선택: 'Installation Destination and Optional Tasks' 화면이 나타납니다. 반드시 'Add Ruby executables to your PATH' 체크박스가 선택되어 있는지 확인해야 합니다. 이것이 체크되어 있어야 터미널 어디에서든 ruby 명령어를 사용할 수 있습니다. 나머지 옵션은 기본값으로 두고 'Install'을 클릭합니다.
MSYS2 설치: 루비 설치가 거의 끝나갈 무렵, 'Run 'ridk install' to set up MSYS2...' 라는 체크박스가 있는 마지막 화면이 나타납니다. 이 체크박스를 반드시 선택된 상태로 두고 'Finish' 버튼을 누릅니다. 그러면 자동으로 새로운 명령 프롬프트 창이 열리며 MSYS2라는 개발 도구 모음을 설치하는 화면이 나타납니다.
이 창에서 어떤 것을 설치할지 묻는 메시지가 나오면, 그냥 엔터(Enter) 키를 눌러 기본 선택지(1, 2, 3)를 모두 설치합니다. 설치가 완료되고 다시 선택지가 나타나면, 창을 닫거나 Ctrl+C를 눌러 빠져나옵니다.

이제 루비 설치가 끝났습니다. Git Bash를 열어 다음 명령어로 지킬과 번들러(Bundler)를 설치합니다. 번들러는 루비 프로젝트에 필요한 여러 부가 기능(Gems)들의 버전을 관리하고 쉽게 설치해 주는 필수 도구입니다.


gem install jekyll bundler

설치가 완료되면, 다음 두 명령어를 각각 입력하여 버전 정보가 제대로 출력되는지 확인합니다.


jekyll -v

bundle -v

맥(macOS)에 루비와 지킬 설치하기

맥에는 기본적으로 시스템 루비가 설치되어 있지만, 시스템 루비를 직접 건드리는 것은 권장되지 않습니다. 우리는 Homebrew를 통해 최신 버전의 루비를 설치하고, 그것을 기본 루비로 사용하도록 설정할 것입니다.

Homebrew로 루비 설치: 터미널을 열고 다음 명령어를 입력합니다.

```bash

brew install ruby


2.  환경 변수 설정: Homebrew로 설치한 루비를 시스템 기본 루비보다 먼저 사용하도록 경로(PATH)를 설정해야 합니다. 터미널에 다음 명령어들을 차례대로 입력합니다. 이는 `.zshrc` 라는 셸 설정 파일에 Homebrew 루비의 경로를 추가하는 과정입니다.

```javascript
```bash

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

echo 'export LDFLAGS="-L/usr/local/opt/ruby/lib"' >> ~/.zshrc

echo 'export CPPFLAGS="-I/usr/local/opt/ruby/include"' >> ~/.zshrc


3.  설정 적용: 변경된 설정을 현재 터미널 세션에 바로 적용하기 위해 다음 명령어를 입력합니다. (또는 터미널을 완전히 껐다가 다시 켜도 됩니다.)

```javascript
```bash

source ~/.zshrc


4.  지킬과 번들러 설치: 이제 윈도우에서와 마찬가지로 `gem` 명령어를 사용하여 지킬과 번들러를 설치합니다.

```javascript
```bash

gem install jekyll bundler


5.  `jekyll -v` 와 `bundle -v` 명령어로 설치를 확인합니다.

이제 여러분의 컴퓨터는 지킬 블로그를 생성하고 운영할 모든 준비를 마쳤습니다. 조금 복잡하게 느껴졌을 수도 있지만, 가장 어려운 고비는 이미 넘으셨습니다.

## 단 5분 만에 지킬 블로그 생성하기

이제 마법 같은 순간이 다가왔습니다. 터미널 명령어 단 두 줄로 여러분의 첫 블로그를 생성해 보겠습니다.

1.  블로그를 저장할 폴더로 이동: 먼저, 터미널을 사용하여 여러분이 블로그 프로젝트를 보관하고 싶은 폴더로 이동합니다. 예를 들어, 바탕화면에 `my-blog` 라는 폴더를 만들고 그곳에서 작업하고 싶다면 다음과 같이 명령어를 입력합니다.

```javascript
```bash

cd ~/Desktop      # 바탕화면으로 이동

mkdir my-blog     # my-blog 폴더 생성

cd my-blog        # my-blog 폴더로 이동


2.  지킬 블로그 생성: 현재 위치가 `my-blog` 폴더인 것을 확인한 후(`pwd` 명령어 사용), 다음 명령어를 입력합니다. 이 명령어는 현재 폴더(`.`)에 지킬의 기본 템플릿을 사용하여 새로운 블로그를 생성하라는 의미입니다.

```javascript
```bash

jekyll new . --force

--force 옵션은 비어있지 않은 폴더에도 강제로 설치하게 해줍니다. 잠시 기다리면 여러 파일과 폴더가 자동으로 생성되는 것을 볼 수 있습니다.


3.  블로그 실행: 블로그 생성이 완료되면, 다음 명령어를 입력하여 로컬 서버를 실행합니다.

```javascript
```bash

bundle exec jekyll serve

이 명령어를 실행하면 지킬이 여러분의 블로그를 빌드하고, 여러분의 컴퓨터에서만 접속할 수 있는 테스트용 웹 서버를 실행합니다. 터미널에 Server address: http://127.0.0.1:4000 와 같은 메시지가 나타나면 성공입니다.


4.  블로그 확인: 이제 웹 브라우저를 열고 주소창에 `http://127.0.0.1:4000` 또는 `http://localhost:4000` 을 입력해 보세요. "Welcome to Jekyll\!" 이라는 제목과 함께 여러분의 첫 번째 블로그가 화면에 나타날 것입니다\!

어떻습니까? 정말 놀랍지 않나요? 여러분은 방금 복잡한 코딩 없이, 명령어 몇 개만으로 완벽하게 작동하는 블로그 하나를 뚝딱 만들어냈습니다. 이 로컬 서버는 여러분이 글을 쓰거나 디자인을 변경할 때마다 그 내용을 실시간으로 반영하여 보여주는 역할을 합니다. 작업을 마친 후에는 터미널에서 `Ctrl + C` 키를 눌러 서버를 중지할 수 있습니다.

## 입맛대로 고르는 지킬 테마 적용법

기본으로 생성된 블로그는 디자인이 매우 단순합니다. 이제 이 뼈대만 있는 집에 멋진 인테리어를 할 차례입니다. 지킬의 가장 큰 장점 중 하나는 바로 수많은 고품질 테마를 아주 쉽게 적용할 수 있다는 것입니다. 우리는 코드를 한 줄도 건드리지 않고, 다른 사람이 만들어 놓은 전문가 수준의 디자인을 통째로 가져와 내 블로그에 입힐 수 있습니다.

지킬 테마를 찾는 최고의 장소들은 다음과 같습니다.

* Jekyll Themes ([http://jekyllthemes.org/](http://jekyllthemes.org/)): 다양한 무료 테마들을 스크린샷과 함께 모아놓은 사이트입니다.

* GitHub: 깃허브에서 'jekyll theme' 라고 검색하면 수많은 오픈소스 테마들을 찾을 수 있습니다.

* Jamstack Themes ([https://jamstackthemes.dev/ssg/jekyll/](https://jamstackthemes.dev/ssg/jekyll/)): 깔끔하게 정리된 고품질 테마들을 모아놓은 곳입니다.

마음에 드는 테마를 골랐다면, 보통 해당 테마의 깃허브 페이지에 자세한 설치 방법이 나와 있습니다. 테마를 적용하는 방법은 크게 두 가지로 나뉩니다.

방법 1: Gem 기반 테마 적용 (권장)

요즘 대부분의 현대적인 지킬 테마는 '루비 젬(RubyGem)' 형태로 패키징되어 배포됩니다. 이 방법이 훨씬 깔끔하고 관리가 편합니다.

1.  Gemfile 수정: VS Code로 여러분의 블로그 폴더(`my-blog`)를 엽니다. 최상위 폴더에 있는 `Gemfile` 이라는 파일을 엽니다. 파일 내용 중에 `gem "minima"` 라고 되어 있는 부분을 여러분이 선택한 테마의 젬 이름으로 변경합니다. 예를 들어, `minimal-mistakes-jekyll` 이라는 유명한 테마를 사용하고 싶다면 다음과 같이 수정합니다.

```javascript
```ruby

# gem "minima", "~> 2.5"  <-- 이 줄은 주석 처리(#)하거나 삭제합니다.

gem "minimal-mistakes-jekyll"


2.  _config.yml 수정: `_config.yml` 파일을 열어 `theme:` 부분을 수정합니다.

```javascript
```yaml

# theme: minima  <-- 이 부분을 수정합니다.

theme: minimal-mistakes-jekyll


3.  번들 설치: 터미널에서 `bundle install` 명령어를 실행하여 새로운 테마 젬을 설치합니다.

4.  서버 재시작: `bundle exec jekyll serve` 명령어로 서버를 실행하면, 완전히 새로운 디자인의 블로그가 나타나는 것을 확인할 수 있습니다.

방법 2: 파일 직접 복사/붙여넣기

오래된 테마나 간단한 구조의 테마는 프로젝트 파일 전체를 제공하기도 합니다. 이 경우는 더 간단합니다.

1.  테마의 깃허브 저장소에서 'Code' 버튼을 눌러 ZIP 파일로 다운로드합니다.

2.  압축을 푼 뒤, 그 안의 모든 파일과 폴더들을 우리가 만든 `my-blog` 폴더에 그대로 덮어씁니다.

3.  터미널에서 `bundle install` 명령어를 한번 실행하여 테마에 필요한 플러그인들을 설치해 주고, `bundle exec jekyll serve` 로 서버를 실행하면 됩니다.

각 테마마다 추가적으로 `_config.yml` 파일에서 설정해야 하는 옵션들이 있습니다. 예를 들어, 블로그 제목, 작성자 이름, 소셜 미디어 링크 등을 설정할 수 있습니다. 이는 테마의 설명서(README.md)에 아주 자세히 나와 있으니, 그대로 따라 하시면 됩니다.

## 마크다운으로 첫 포스트 작성하기

이제 블로그의 핵심인 글을 작성해 보겠습니다. 지킬에서 모든 블로그 포스트는 `_posts` 라는 폴더 안에 저장됩니다. 그리고 파일 형식은 `YYYY-MM-DD-제목.md` 라는 엄격한 규칙을 따라야 합니다. 예를 들어, 2025년 7월 30일에 '나의 첫 포스트'라는 글을 작성한다면 파일 이름은 `2025-07-30-my-first-post.md` 가 되어야 합니다.

`.md` 확장자는 이 파일이 마크다운(Markdown) 문법으로 작성되었음을 의미합니다. 마크다운은 HTML처럼 복잡한 태그 없이, 몇 가지 간단한 기호만으로 문서의 구조와 서식을 표현하는 매우 직관적인 언어입니다.

VS Code에서 `_posts` 폴더 안에 `2025-07-30-my-first-post.md` 라는 새 파일을 만들고 다음 내용을 입력해 보세요.

```markdown

---

layout: post

title:  "나의 첫 지킬 포스트!"

date:   2025-07-30 14:00:00 +0900

categories: jekyll update

---

## 마크다운에 오신 것을 환영합니다

이것은 저의 첫 번째 지킬 블로그 포스트입니다. 정말 신나네요!

마크다운으로는 정말 쉽게 글을 쓸 수 있습니다. 예를 들어, 이렇게 목록도 만들 수 있죠.

* 항목 1

* 항목 2

* 항목 3

> 이것은 인용문입니다. 멋지지 않나요?

자세한 내용은 [지킬 공식 사이트](https://jekyllrb.com)를 방문하여 확인해 보세요.

![A cute cat](https://www.wfla.com/wp-content/uploads/sites/71/2023/05/GettyImages-1389862392.jpg?w=2560&h=1440&crop=1)

파일 위쪽에 --- 로 둘러싸인 부분을 '머리말(Front Matter)'이라고 부릅니다. 이 부분에는 글의 제목(title), 작성 시간(date), 카테고리(categories), 사용할 레이아웃(layout) 등 글에 대한 부가 정보를 YAML 형식으로 정의합니다. 지킬은 이 정보를 읽어 페이지를 구성합니다.

머리말 아래 부분이 실제 글의 내용이 됩니다.

##: 제목을 나타냅니다. #의 개수가 적을수록 상위 제목입니다.
: 텍스트를 굵게 만듭니다.
* 또는 -: 순서 없는 목록을 만듭니다.
>: 인용문을 만듭니다.
[텍스트](링크): 하이퍼링크를 만듭니다.
![대체 텍스트](이미지 주소): 이미지를 삽입합니다.

이 파일을 저장하고 로컬 서버가 실행 중인 브라우저(http://localhost:4000)를 새로고침 해보세요. 방금 여러분이 작성한 글이 블로그의 메인 페이지에 멋지게 나타나고, 제목을 클릭하면 스타일이 적용된 글의 전문을 볼 수 있을 것입니다. 이것으로 여러분은 지킬을 이용한 블로그 생성부터 글 작성까지의 모든 과정을 마스터했습니다. 이제 남은 것은 여러분의 지식과 경험을 이 멋진 공간에 채워나가는 것뿐입니다.

압도적인 속도의 강자: 고 언어 기반의 휴고(Hugo)

지킬을 통해 정적 사이트 블로그의 기본 원리를 충분히 익혔다면, 이제 한 단계 더 나아가 '속도'라는 새로운 차원을 경험해 볼 차례입니다. 여기에 지킬의 라이벌이자, 현존하는 가장 빠른 정적 사이트 생성기 중 하나로 평가받는 휴고(Hugo)가 있습니다. 구글이 개발한 고(Go)라는 프로그래밍 언어를 기반으로 만들어진 휴고는, 그야말로 '압도적인 빌드 속도'를 자랑합니다.

왜 전 세계가 휴고에 열광하는가

지킬이 안정적인 세단이라면, 휴고는 강력한 엔진을 장착한 스포츠카에 비유할 수 있습니다. 수백, 수천 개의 포스트를 가진 대규모 사이트도 눈 깜짝할 사이에 빌드해버리는 휴고의 퍼포먼스는 경이로운 수준입니다. 실제로 여러 벤치마크 테스트에서 휴고는 지킬보다 수십, 심지어 수백 배 빠른 빌드 속도를 보여줍니다. (참고: "Static Site Generator Build-time Benchmarks", Toptal, 2023)

아니, 개인 블로그인데 빌드 속도가 그렇게 중요한가요? 지킬도 충분히 빠른 것 같은데요.

물론입니다. 포스트가 몇십 개 수준인 개인 블로그에서는 지킬의 속도도 전혀 불편하지 않습니다. 하지만 휴고에 열광하는 이유는 단순히 속도 때문만은 아닙니다.

단일 바이너리 파일: 휴고는 설치가 극도로 간단합니다. 지킬처럼 루비나 다른 여러 의존성 프로그램을 복잡하게 설치할 필요가 없습니다. 그냥 운영체제에 맞는 실행 파일 하나만 다운로드하면 그걸로 끝입니다. 이 단순함은 예상치 못한 설치 오류의 가능성을 원천적으로 차단합니다.
의존성으로부터의 해방: 지킬은 루비 '젬(Gem)'이라는 플러그인 생태계에 많이 의존합니다. 때로는 이 젬들 간의 버전 충돌로 인해 골머리를 앓는 경우가 종종 발생합니다. 반면 휴고는 댓글, 이미지 처리, 다국어 지원 등 대부분의 필수 기능들을 자체적으로 내장하고 있습니다. 외부 의존성이 거의 없기 때문에 훨씬 더 안정적인 운영이 가능합니다.
강력한 기본 기능: 휴고는 '단축코드(Shortcodes)'라는 강력한 기능을 제공합니다. 이를 통해 마크다운 문서 안에 유튜브 영상, 트위터 카드, 갤러리 등 복잡한 HTML 코드를 아주 간단한 형태로 삽입할 수 있습니다. 콘텐츠를 훨씬 풍부하고 다채롭게 만드는 데 매우 유용합니다.
활발한 개발과 성장: 휴고는 현재 가장 활발하게 개발되고 있는 오픈소스 프로젝트 중 하나입니다. 새로운 기능이 빠르게 추가되고 있으며, 커뮤니티 역시 폭발적으로 성장하고 있어 미래가 더욱 기대되는 도구입니다.

물론, 지킬에 비해 초기 설정이 조금 더 복잡하게 느껴질 수 있고, 테마의 구조를 이해하는 데 약간의 학습이 필요하다는 단점도 있습니다. 하지만 장기적인 관점에서 속도, 안정성, 확장성을 모두 잡고 싶다면 휴고는 단연코 최고의 선택지가 될 것입니다.

휴고 설치와 환경 변수 설정

휴고 설치는 지킬에 비해 믿을 수 없을 정도로 간단합니다. 운영체제에 맞는 설치법을 따라 해 보세요.

윈도우(Windows)에 휴고 설치하기

윈도우에서는 패키지 관리자인 'Scoop'이나 'Chocolatey'를 사용하는 것이 편리하지만, 여기서는 가장 간단한 직접 다운로드 방식을 알아보겠습니다.

휴고 릴리즈 페이지 접속: 깃허브의 휴고 공식 릴리즈 페이지(https://github.com/gohugoio/hugo/releases)에에) 접속합니다.
Extended 버전 다운로드: 수많은 파일 목록이 보일 겁니다. 여기서 반드시 hugo_extended_..._windows-amd64.zip 처럼 이름에 'extended'가 포함된 버전을 다운로드해야 합니다. Extended 버전은 SCSS/SASS 같은 고급 CSS 기능을 지원하는데, 대부분의 최신 테마들이 이 기능을 요구하기 때문입니다.
압축 해제 및 폴더 이동: 다운로드한 ZIP 파일의 압축을 풉니다. 안에는 hugo.exe 파일이 있을 겁니다. 이 파일을 C:\Hugo\bin 폴더를 새로 만들어 그 안으로 옮깁니다. (C:\Hugo 폴더를 먼저 만들고, 그 안에 bin 폴더를 만드세요.)
환경 변수 설정: 이제 컴퓨터 어디서든 hugo 명령어를 실행할 수 있도록 '환경 변수'를 설정해야 합니다.

  * `윈도우 키`를 누르고 '시스템 환경 변수 편집'을 검색하여 실행합니다.

  * '시스템 속성' 창에서 '환경 변수' 버튼을 클릭합니다.

  * '시스템 변수' 목록에서 'Path'를 선택하고 '편집'을 누릅니다.

  * '새로 만들기'를 클릭하고, 방금 `hugo.exe`를 옮겨 놓은 경로인 `C:\Hugo\bin` 을 입력한 후 '확인'을 누릅니다.

  * 모든 창에서 '확인'을 눌러 빠져나옵니다.

설치 확인: 열려 있는 모든 터미널이나 명령 프롬프트 창을 닫고, 새로 Git Bash나 PowerShell을 실행합니다. hugo version 이라고 입력했을 때, hugo v0.XX.X-extended ... 와 같은 버전 정보가 나오면 성공적으로 설치된 것입니다.

맥(macOS)에 휴고 설치하기

맥에서는 우리가 이미 설치한 Homebrew를 사용하면 명령어 한 줄로 설치가 끝납니다.

Homebrew로 휴고 설치: 터미널을 열고 다음 명령어를 입력합니다.

```bash

brew install hugo

Homebrew는 알아서 최신의 extended 버전을 설치해 줍니다.


2.  설치 확인: 터미널에 `hugo version` 이라고 입력하여 설치를 확인합니다.

이것으로 설치는 끝입니다. 정말 간단하지요? 의존성 프로그램 설치 없이 단일 파일로 모든 것이 해결되는 휴고의 장점을 직접 체험하신 겁니다.

## 명령어 한 줄로 휴고 블로그 생성

휴고로 블로그를 만드는 과정은 지킬과 매우 유사합니다. 터미널을 열고 따라 해 보세요.

1.  새 사이트 생성: 블로그를 만들고 싶은 위치로 이동한 뒤, 다음 명령어를 실행합니다. `my-hugo-blog`는 여러분이 원하는 폴더 이름으로 변경해도 좋습니다.

```javascript
```bash

hugo new site my-hugo-blog

이 명령어를 실행하면 my-hugo-blog 라는 폴더와 함께 휴고 프로젝트의 기본 골격(archetypes, content, themes, config.toml 등)이 자동으로 생성됩니다.


2.  생성된 폴더로 이동:

```javascript
```bash

cd my-hugo-blog


3.  로컬 서버 실행: 이제 휴고의 로컬 서버를 실행해 보겠습니다. `-D` 옵션은 'draft(초안)' 상태의 글도 미리보기에 포함하라는 의미입니다.

```javascript
```bash

hugo server -D


웹 브라우저에서 터미널에 나온 주소(`http://localhost:1313/` 이 기본값)로 접속해 보세요. 아마 404 에러 페이지나 텅 빈 흰 화면이 나타날 겁니다. 지킬과 달리 휴고는 기본 테마를 제공하지 않기 때문입니다. 이제 이 빈 집에 멋진 테마를 설치해 보겠습니다.

## 수백 가지 휴고 테마 적용 실전

휴고 역시 공식 테마 사이트([https://themes.gohugo.io/)에](https://themes.gohugo.io/)에) 수백 가지의 고품질 테마가 준비되어 있습니다. 마음에 드는 테마를 하나 골라보세요. 여기서는 매우 인기 있고 문서화가 잘 되어 있는 'Ananke' 테마를 예시로 설치해 보겠습니다.

휴고 테마를 설치하는 가장 권장되는 방법은 '깃 서브모듈(Git Submodule)'을 이용하는 것입니다. 서브모듈은 내 깃 저장소 안에 다른 깃 저장소를 포함시키는 기능으로, 테마의 원본은 그대로 유지하면서 업데이트를 쉽게 받을 수 있는 장점이 있습니다.

1.  깃 저장소 초기화: 먼저, 우리 블로그 폴더를 깃 저장소로 만들어야 합니다. `my-hugo-blog` 폴더 안에서 다음 명령어를 실행합니다.

```javascript
```bash

git init


2.  테마를 서브모듈로 추가: 다음 명령어로 Ananke 테마를 `themes` 폴더 안에 추가합니다.

```javascript
```bash

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke


3.  블로그 설정 파일에 테마 지정: VS Code로 `config.toml` 파일을 엽니다. `toml`은 휴고가 기본으로 사용하는 설정 파일 형식입니다. 파일 맨 아랫줄에 다음 내용을 추가합니다.

```javascript
```toml

theme = "ananke"


4.  서버 재시작: `hugo server -D` 명령어로 서버를 다시 실행하고 브라우저를 새로고침 해보세요. 이제 Ananke 테마가 적용된 멋진 블로그 홈 페이지가 나타날 것입니다\!

## 콘텐츠 구성과 포스트 작성법

휴고의 콘텐츠 관리는 `content` 폴더에서 이루어집니다. `hugo new` 명령어를 사용하면 테마에 정의된 양식(archetype)에 따라 새로운 포스트 파일을 쉽게 만들 수 있습니다.

1.  새 포스트 생성: 터미널에서 다음 명령어를 실행해 보세요.

```javascript
```bash

hugo new posts/my-first-hugo-post.md

이 명령어는 content/posts/ 폴더 안에 my-first-hugo-post.md 라는 파일을 생성합니다.


2.  포스트 파일 열기: VS Code로 생성된 파일을 열어보면, 지킬과 비슷하게 머리말(Front Matter)이 자동으로 채워져 있는 것을 볼 수 있습니다. 휴고는 기본적으로 TOML 형식을 사용하지만, YAML 형식도 완벽하게 지원합니다.

```javascript
```toml

---

title: "My First Hugo Post"

date: 2025-07-30T15:30:00+09:00

draft: true

---

여기서 가장 중요한 것은 draft: true 라는 부분입니다. 이 값이 true로 되어 있으면 이 글은 초안 상태로 간주되어, 실제 블로그를 빌드할 때는 포함되지 않습니다. 글 작성을 마치고 공개할 준비가 되면 이 값을 draft: false 로 변경하거나, 이 줄 자체를 삭제하면 됩니다.


3.  콘텐츠 작성: 이제 머리말 아래에 지킬에서 했던 것과 똑같이 마크다운 문법으로 자유롭게 글을 작성하면 됩니다.

파일을 저장하고 로컬 서버(`hugo server -D` 로 실행 중인)를 확인해 보세요. 초안 상태의 글이므로 `-D` 옵션 덕분에 블로그에 실시간으로 반영되어 보일 것입니다. `draft` 상태를 `false`로 바꾸고 저장하면, 글이 사라지는 것도 확인할 수 있습니다. 이 `draft` 시스템은 완성되지 않은 글이 실수로 공개되는 것을 막아주는 매우 유용한 기능입니다. 이처럼 휴고는 속도와 안정성, 그리고 체계적인 콘텐츠 관리 기능까지 갖춘 강력한 블로그 엔진입니다.

---

# 자바스크립트 개발자를 위한 선택: 헥소(Hexo)

지금까지 우리는 루비 기반의 지킬과 고 언어 기반의 휴고를 살펴보았습니다. 이제 마지막으로 자바스크립트(JavaScript) 생태계의 강력한 주자, 헥소(Hexo)를 만나보겠습니다. 헥소는 전 세계 웹을 지배하고 있는 자바스크립트와 그 런타임 환경인 노드제이에스(Node.js)를 기반으로 동작합니다. 따라서 평소 자바스크립트에 익숙하거나, 프론트엔드 개발에 관심이 많은 분들에게는 최고의 선택이 될 수 있습니다.

## 자바스크립트 생태계의 힘 헥소

헥소의 가장 큰 특징이자 장점은 바로 거대한 자바스크립트 생태계를 마음껏 활용할 수 있다는 점입니다. Node.js의 패키지 관리자인 npm(Node Package Manager)에는 수백만 개의 라이브러리(패키지)가 등록되어 있으며, 헥소는 이 모든 것을 플러그인 형태로 가져와 사용할 수 있습니다.

> 그게 구체적으로 어떤 장점이 있다는 거죠?

이는 블로그의 기능을 무한에 가깝게 확장할 수 있다는 의미입니다. 예를 들어, 최신 CSS 프레임워크를 적용하거나, 이미지 최적화 작업을 자동화하거나, 복잡한 데이터 시각화 라이브러리를 통합하는 등의 고급 기능들을 npm 패키지 설치 몇 번으로 손쉽게 구현할 수 있습니다.

헥소가 매력적인 다른 이유들은 다음과 같습니다.

1.  빠른 속도: 헥소 역시 휴고만큼은 아니지만 지킬에 비해서는 월등히 빠른 빌드 속도를 자랑합니다. Node.js의 비동기 I/O 처리 능력 덕분에 파일 생성과 처리가 매우 효율적입니다.

2.  간편한 배포 기능: 헥소는 명령어 한 줄로 깃허브 페이지에 블로그를 배포할 수 있는 강력한 내장 기능(Hexo Deployer)을 제공합니다. 이는 휴고나 다른 생성기들이 별도의 스크립트나 깃허브 액션(GitHub Actions)을 설정해야 하는 것에 비해 매우 편리한 장점입니다.

3.  풍부한 플러그인과 테마: 자바스크립트 기반인 만큼, 수많은 개발자들이 만들어 놓은 다양한 플러그인과 세련된 테마가 풍부하게 존재합니다. 특히 아시아권에서 인기가 높아, 동양적인 감성의 아름다운 테마를 찾기 쉽습니다.

4.  쉬운 사용법과 명령어: `hexo new`, `hexo generate`, `hexo server`, `hexo deploy` 등 직관적이고 일관성 있는 명령어 체계는 사용자가 블로그를 생성하고 관리하는 전 과정을 매우 쉽게 만들어 줍니다.

물론, Node.js와 npm 환경에 익숙하지 않은 사용자에게는 초기 설정이 다소 복잡하게 느껴질 수 있으며, 프로젝트의 의존성 패키지들을 관리해야 하는 부담이 있다는 단점도 있습니다. 하지만 자바스크립트라는 거인의 어깨 위에서 블로그를 만들고 싶다면, 헥소는 그 어떤 도구보다 강력한 힘을 여러분에게 안겨줄 것입니다.

## 노드제이에스(Node.js)와 헥소 설치

헥소를 사용하기 위해서는 먼저 자바스크립트 실행 환경인 노드제이에스(Node.js)를 설치해야 합니다. Node.js를 설치하면 패키지 관리자인 npm은 자동으로 함께 설치됩니다.

1.  Node.js 설치: Node.js 공식 사이트([https://nodejs.org/)에](https://nodejs.org/)에) 접속합니다. 홈페이지에 두 가지 버전이 보일 텐데, 반드시 'LTS (Long Term Support)' 버전을 다운로드하여 설치하시기 바랍니다. LTS 버전은 장기적으로 안정적인 지원이 보장되는 버전입니다. 설치 과정은 다른 프로그램들과 마찬가지로, 기본 옵션을 그대로 두고 'Next'만 계속 클릭하여 완료하면 됩니다.

2.  설치 확인: 설치가 완료되면, 터미널(Git Bash 또는 PowerShell)을 새로 열고 다음 두 명령어를 각각 입력하여 버전 정보가 제대로 출력되는지 확인합니다.

```javascript
```bash

node -v

npm -v


3.  헥소 CLI 설치: 이제 npm을 사용하여 헥소의 명령줄 도구인 `hexo-cli`를 설치합니다. `-g` 옵션은 이 패키지를 컴퓨터의 전역(global) 공간에 설치하여, 어느 폴더에서든 `hexo` 명령어를 사용할 수 있게 해줍니다.

```javascript
```bash

npm install hexo-cli -g


4.  설치 확인: `hexo -v` 명령어를 입력하여 헥소 버전 정보가 나타나는지 확인합니다.

이것으로 헥소 블로그를 만들 모든 준비가 끝났습니다. Node.js 설치 외에는 특별히 어려운 점이 없었을 것입니다.

## 헥소 블로그 초기 설정과 구조

헥소로 블로그를 생성하는 과정 또한 매우 직관적입니다.

1.  새 블로그 생성: 블로그를 만들 위치로 이동한 뒤, 다음 명령어를 실행합니다. 헥소는 `init` 명령어를 사용합니다.

```javascript
```bash

hexo init my-hexo-blog

이 명령어는 my-hexo-blog 폴더를 만들고, 그 안에 헥소 블로그에 필요한 모든 파일과 기본 테마('landscape'가 기본값)를 자동으로 다운로드하고 설치합니다.


2.  폴더 이동 및 의존성 설치: 생성된 폴더로 이동한 뒤, `package.json` 파일에 명시된 필수 패키지들을 설치해야 합니다.

```javascript
```bash

cd my-hexo-blog

npm install


3.  로컬 서버 실행: `hexo server` 명령어로 로컬 서버를 실행합니다.

```javascript
```bash

hexo server

터미널에 Hexo is running at http://localhost:4000/ 라는 메시지가 나타나면 성공입니다. 웹 브라우저에서 해당 주소로 접속해 보세요. 기본 테마가 적용된 깔끔한 블로그가 여러분을 맞이할 것입니다.


헥소의 폴더 구조는 지킬, 휴고와 유사하면서도 약간의 차이가 있습니다. 핵심적인 파일과 폴더는 다음과 같습니다.

* `_config.yml`: 블로그의 전반적인 설정을 담당하는 가장 중요한 파일입니다. 블로그 제목, 언어, 테마 등을 이곳에서 설정합니다.

* `source`: 모든 소스 파일이 위치하는 곳입니다. `_posts` 폴더에는 블로그 글들이, 다른 폴더나 파일들은 그대로 사이트의 루트 경로에 복사됩니다.

* `themes`: 블로그의 디자인 테마들이 위치하는 폴더입니다.

* `package.json`: 이 프로젝트가 의존하는 Node.js 패키지들의 목록이 담긴 파일입니다.

## 헥소 테마 커스터마이징 기초

헥소 역시 공식 테마 페이지([https://hexo.io/themes/)에](https://hexo.io/themes/)에) 수많은 테마가 있습니다. 휴고와 마찬가지로 테마를 설치하는 가장 좋은 방법은 깃을 이용하는 것입니다. 인기 있는 테마인 'NexT'를 예로 들어보겠습니다.

1.  테마 다운로드: `themes` 폴더 안에 깃으로 테마를 클론(clone)합니다.

```javascript
```bash

git clone https://github.com/next-theme/hexo-theme-next themes/next


2.  메인 설정 파일 변경: 블로그의 루트 폴더에 있는 `_config.yml` 파일을 VS Code로 엽니다. `theme:` 부분을 찾아 값을 `next`로 변경합니다.

```javascript
```yaml

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: next


3.  서버 재시작: 터미널에서 `Ctrl+C`로 서버를 멈춘 뒤, `hexo server`로 다시 실행하면 NexT 테마가 적용된 것을 확인할 수 있습니다.

헥소 테마의 독특한 점은 테마 자체에도 `_config.yml` 파일이 있다는 것입니다. 즉, 블로그 전체에 적용되는 설정은 루트 폴더의 `_config.yml`에서, 테마 디자인과 관련된 세부 설정(폰트, 레이아웃, 사이드바 위젯 등)은 `themes/테마이름/_config.yml` 파일에서 수정하는 이중 구조를 가집니다. 이를 통해 설정을 체계적으로 분리하여 관리할 수 있습니다.

## 초안 작성부터 배포까지의 흐름

헥소의 글 작성 및 배포 과정은 매우 체계적입니다.

1.  새 포스트 생성: `hexo new` 명령어를 사용합니다.

```javascript
```bash

hexo new "My First Hexo Post"

source/_posts 폴더에 My-First-Hexo-Post.md 파일이 생성됩니다.


2.  콘텐츠 작성: 생성된 파일을 열어 머리말(Front Matter)을 확인하고, 마크다운으로 내용을 작성합니다. 헥소는 기본적으로 YAML 형식을 사용합니다.

```javascript
```yaml

---

title: My First Hexo Post

date: 2025-07-30 16:00:00

tags:

---


3.  사이트 생성 (Generate): 로컬 서버는 변경 사항을 자동으로 감지하지만, 실제 배포할 파일을 생성하려면 `hexo generate` (또는 단축 명령어 `hexo g`) 명령어를 실행해야 합니다.

```javascript
```bash

hexo generate

이 명령어는 source 폴더의 모든 내용을 바탕으로 최종 웹사이트 파일들을 public 폴더 안에 생성합니다.


4.  배포 (Deploy): 헥소의 가장 강력한 기능인 원클릭 배포를 사용해 보겠습니다. 먼저 배포용 플러그인을 설치해야 합니다.

```javascript
```bash

npm install hexo-deployer-git --save

그 다음, 루트 _config.yml 파일의 맨 아래에 있는 deploy: 섹션을 여러분의 깃허브 페이지 저장소 정보에 맞게 수정합니다.


deploy:

  type: git

  repo: https://github.com/사용자이름/사용자이름.github.io.git

  branch: main

이제 모든 준비가 끝났습니다. 터미널에 다음 명령어만 입력하면, 헥소는 자동으로 public 폴더의 내용을 여러분의 깃허브 저장소로 푸시(push)합니다.


hexo deploy

잠시 후 여러분의 https://사용자이름.github.io 주소에 헥소 블로그가 멋지게 게시될 것입니다. 이처럼 헥소는 자바스크립트의 강력한 생태계를 바탕으로, 편리한 명령어 체계와 원클릭 배포 기능까지 제공하는 매우 매력적인 블로그 제작 도구입니다.


---

# 나만의 블로그 세상에 알리기

지금까지 우리는 지킬, 휴고, 헥소를 사용하여 로컬 컴퓨터에 멋진 블로그를 구축하는 방법을 배웠습니다. 하지만 이 블로그는 아직 우리 컴퓨터 안에만 존재하는 '나만 볼 수 있는' 블로그입니다. 이제 이 블로그를 전 세계 사람들이 접속할 수 있도록 인터넷 세상에 공개하고, 나만의 고유한 브랜드를 만들어가는 방법을 알아볼 차례입니다. 이 장에서는 블로그를 깃허브 페이지에 최종적으로 배포하고, `github.io` 라는 주소 대신 나만의 멋진 도메인을 연결하는 방법을 상세히 다룰 것입니다.

## 깃허브 페이지에 블로그 배포하기

배포(Deploy)란, 내 컴퓨터에서 만든 결과물을 실제 서버에 올려 다른 사람들이 접근할 수 있도록 하는 과정을 말합니다. 우리가 사용할 서버는 바로 깃허브 페이지입니다. 각 정적 사이트 생성기별 배포 전략을 알아보겠습니다.

### 지킬(Jekyll) 배포: 가장 간단한 방법

앞서 말했듯이, 지킬은 깃허브가 공식 지원하기 때문에 배포가 믿을 수 없을 정도로 간단합니다. 우리는 빌드된 결과물이 아닌, 지킬 프로젝트 소스 코드 전체를 `사용자이름.github.io` 저장소에 푸시하기만 하면 됩니다.

1.  로컬 블로그 폴더를 깃허브 저장소와 연결: 먼저, VS Code의 터미널이나 Git Bash를 사용하여 지킬 블로그 폴더로 이동합니다. 그리고 이 폴더를 우리가 깃허브에 만들어 둔 원격 저장소와 연결해야 합니다.

```javascript
```bash

# 1. 깃 저장소로 초기화 (아직 안했다면)

git init

# 2. 원격 저장소 주소 추가 ('origin'이라는 별명으로)

git remote add origin https://github.com/사용자이름/사용자이름.github.io.git

# 3. 모든 파일을 스테이징 영역에 추가

git add .

# 4. "첫 커밋"이라는 메시지와 함께 커밋

git commit -m "첫 블로그 커밋"

# 5. 원격 저장소의 main 브랜치로 푸시

git push -u origin main

이제 깃허브 저장소 페이지를 새로고침 해보세요. 여러분의 지킬 프로젝트 파일들이 모두 업로드된 것을 볼 수 있습니다.


2.  깃허브 페이지 소스 설정: 깃허브 저장소의 'Settings' 탭으로 이동한 뒤, 왼쪽 메뉴에서 'Pages'를 클릭합니다. 'Build and deployment' 섹션에서 'Source'를 'Deploy from a branch'로 선택하고, 브랜치를 `main` (또는 `master`)으로, 폴더를 `/(root)`로 설정한 뒤 'Save'를 누릅니다.

3.  기다림: 잠시 후, 깃허브는 `main` 브랜치의 지킬 프로젝트를 자동으로 빌드하여 `https://사용자이름.github.io` 에 게시합니다. 보통 1~2분 정도 소요됩니다. 저장소 이름 옆에 주황색 동그라미 아이콘이 나타났다가 녹색 체크 표시로 바뀌면 배포가 완료된 것입니다.

### 휴고/헥소 배포: 깃허브 액션으로 자동화하기

휴고와 헥소는 깃허브의 자동 빌드를 지원하지 않으므로, 빌드된 결과물(`public` 또는 `dist` 폴더의 내용)을 깃허브 페이지에 올려야 합니다. 수동으로 빌드해서 올릴 수도 있지만, 여기서는 훨씬 더 세련되고 전문적인 방법인 깃허브 액션(GitHub Actions)을 사용해 보겠습니다.

깃허브 액션은 깃허브에 내장된 자동화 도구로, '코드를 푸시하면, 자동으로 테스트하고 빌드하여 배포하라'와 같은 명령을 미리 설정해 둘 수 있는 기능입니다. 우리는 소스 코드를 `main` 브랜치에 푸시하면, 깃허브 액션이 알아서 휴고/헥소를 빌드한 뒤, 그 결과물만 `gh-pages`라는 별도의 브랜치에 올려서 배포하도록 만들 것입니다.

1.  깃허브 액션 워크플로우 파일 생성: VS Code에서 블로그 프로젝트 루트에 `.github/workflows` 라는 폴더를 만듭니다. 그리고 그 안에 `deploy.yml` 과 같은 이름의 파일을 생성합니다.

2.  워크플로우 코드 작성: `deploy.yml` 파일에 다음 코드를 붙여넣습니다. 사용하는 생성기에 따라 선택하세요.

```javascript
휴고(Hugo)용 `deploy.yml`

```yaml

name: Deploy Hugo site to Pages

on:

  push:

    branches:

      - main # main 브랜치에 푸시될 때 실행

  workflow_dispatch:

permissions:

  contents: read

  pages: write

  id-token: write

concurrency:

  group: "pages"

  cancel-in-progress: false

defaults:

  run:

    shell: bash

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

      - name: Install Hugo CLI

        run: |

          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.125.4/hugo_extended_0.125.4_linux-amd64.deb   

          && sudo dpkg -i ${{ runner.temp }}/hugo.deb

      - name: Checkout

        uses: actions/checkout@v4

        with:

          submodules: recursive

      - name: Setup Pages

        id: pages

        uses: actions/configure-pages@v4

      - name: Build with Hugo

        env:

          HUGO_ENVIRONMENT: production

          HUGO_ENV: production

        run: |

          hugo   

            --gc   

            --baseURL "${{ steps.pages.outputs.base_url }}/"

      - name: Upload artifact

        uses: actions/upload-pages-artifact@v3

        with:

          path: ./public

  deploy:

    environment:

      name: github-pages

      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest

    needs: build

    steps:

      - name: Deploy to GitHub Pages

        id: deployment

        uses: actions/deploy-pages@v4

헥소(Hexo)용 deploy.yml


name: Deploy Hexo site to Pages

on:

  push:

    branches: ["main"] # main 브랜치에 푸시될 때 실행

  workflow_dispatch:

permissions:

  contents: read

  pages: write

  id-token: write

concurrency:

  group: "pages"

  cancel-in-progress: false

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout

        uses: actions/checkout@v4

      - name: Use Node.js 20.x

        uses: actions/setup-node@v4

        with:

          node-version: "20.x"

          cache: 'npm'

      - name: Install dependencies

        run: npm install

      - name: Build

        run: npx hexo generate

      - name: Setup Pages

        uses: actions/configure-pages@v4

      - name: Upload artifact

        uses: actions/upload-pages-artifact@v3

        with:

          path: ./public

  deploy:

    environment:

      name: github-pages

      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest

    needs: build

    steps:

      - name: Deploy to GitHub Pages

        id: deployment

        uses: actions/deploy-pages@v4


3.  소스 코드 푸시: 이제 이 `.github/workflows/deploy.yml` 파일을 포함한 여러분의 소스 코드 전체를 `main` 브랜치로 푸시합니다.

```javascript
```bash

git add .

git commit -m "깃허브 액션 설정 추가"

git push origin main


4.  깃허브 페이지 소스 설정: 깃허브 저장소의 'Settings' > 'Pages'로 이동합니다. 'Build and deployment' 섹션에서 'Source'를 'GitHub Actions'로 변경합니다.

이제 여러분이 `main` 브랜치에 소스 코드를 푸시할 때마다, 이 워크플로우가 자동으로 실행되어 빌드와 배포를 완벽하게 처리해 줄 것입니다. 깃허브 저장소의 'Actions' 탭에서 그 과정을 실시간으로 확인할 수 있습니다.

## 나만의 도메인 주소 연결하기

`사용자이름.github.io` 라는 주소도 훌륭하지만, `my-awesome-blog.com` 과 같이 나만의 고유한 도메인을 사용한다면 블로그의 전문성과 신뢰도를 한층 더 높일 수 있습니다. 도메인을 연결하는 과정은 생각보다 간단합니다.

1.  도메인 구매: 가비아, 호스팅케이알(Hosting.kr), GoDaddy, Namecheap 등과 같은 도메인 등록 업체(Registrar)에서 원하는 도메인을 구매합니다. 1년 사용료는 `.com` 기준 보통 1만 원~2만 원 사이입니다.

2.  DNS 설정 변경: 구매한 도메인 관리 페이지로 들어가서 'DNS 설정' 또는 'DNS 관리' 메뉴로 들어갑니다. 여기서 깃허브 페이지 서버를 가리키도록 레코드를 설정해야 합니다.

```javascript
  * CNAME 레코드 추가: `www` 라는 호스트(또는 서브도메인)에 대해 `사용자이름.github.io` 를 가리키는 `CNAME` 레코드를 추가합니다.

      * 타입: `CNAME`

      * 호스트/이름: `www`

      * 값/내용: `사용자이름.github.io.` (끝에 점을 찍는 것을 잊지 마세요. 업체에 따라 점을 찍지 않아도 되기도 합니다.)

  * A 레코드 추가: `www` 없이 접속(apex 도메인)하는 경우를 위해 `A` 레코드를 추가합니다. 깃허브 페이지는 4개의 고정 IP 주소를 사용합니다. (이 IP 주소는 변경될 수 있으니, 깃허브 공식 문서에서 최신 정보를 확인하는 것이 좋습니다.)

      * 타입: `A`, 호스트/이름: `@` 또는 공란, 값/내용: `185.199.108.153`

      * 타입: `A`, 호스트/이름: `@` 또는 공란, 값/내용: `185.199.109.153`

      * 타입: `A`, 호스트/이름: `@` 또는 공란, 값/내용: `185.199.110.153`

      * 타입: `A`, 호스트/이름: `@` 또는 공란, 값/내용: `185.199.111.153`

깃허브에 커스텀 도메인 등록: 깃허브 저장소의 'Settings' > 'Pages'로 이동합니다. 'Custom domain' 입력란에 구매한 도메인 주소(예: www.my-awesome-blog.com)를 입력하고 'Save'를 클릭합니다.

  * CNAME 파일 생성: 이 과정을 거치면 보통 저장소 루트에 `CNAME`이라는 파일이 자동으로 생성되고 도메인 주소가 기록됩니다. 만약 자동으로 생성되지 않았다면, 소스 코드 루트(지킬/헥소) 또는 `static` 폴더(휴고)에 `CNAME`이라는 이름의 파일을 직접 만들고, 그 안에 `www.my-awesome-blog.com` 이라고 한 줄만 적어 푸시해야 합니다.

기다림: DNS 정보가 전 세계로 퍼져나가는 데는 몇 분에서 최대 48시간까지 걸릴 수 있습니다. 잠시 후 구매한 도메인으로 접속했을 때 내 블로그가 나타나면 성공입니다. 깃허브 페이지 설정에서 'Enforce HTTPS' 옵션이 활성화되었는지 확인하여, https 보안 연결을 사용하도록 하시기 바랍니다.

블로그 콘텐츠 백업과 관리 전략

여러분이 깃허브 페이지와 깃을 사용하는 순간, 이미 최고의 백업 전략을 실행하고 있는 것입니다. 우리가 글을 쓰고 수정하여 git commit 과 git push 를 할 때마다, 그 모든 변경 이력은 우리의 로컬 컴퓨터와 깃허브 원격 저장소 양쪽에 완벽하게 저장됩니다.

만약 컴퓨터가 고장 나더라도 걱정할 필요가 없습니다. 새로운 컴퓨터에서 깃을 설치하고, git clone https://github.com/사용자이름/사용자이름.github.io.git 명령어 한 줄만 실행하면, 모든 블로그 소스 코드와 글, 그리고 지금까지의 모든 수정 내역까지 완벽하게 복원됩니다.

효과적인 관리를 위해 다음과 같은 습관을 들이는 것이 좋습니다.

의미 있는 커밋 메시지 작성: git commit -m "버그 수정" 처럼 모호한 메시지보다는 git commit -m "Fix: 메인 페이지 이미지 깨짐 현상 수정" 처럼 어떤 내용을 왜 변경했는지 구체적으로 작성하는 습관을 들이세요. 나중에 과거의 변경 내역을 추적하기가 훨씬 쉬워집니다.
브랜치 활용: 새로운 글을 쓰거나 큰 디자인 변경을 시도할 때는 main 브랜치에서 직접 작업하지 말고, feature/new-post 나 design/sidebar-update 와 같은 새로운 브랜치를 만들어 작업하세요. 작업이 완료된 후에 main 브랜치로 병합(merge)하면, 메인 블로그의 안정성을 유지하면서 안전하게 새로운 시도를 할 수 있습니다.

성공적인 블로그를 위한 필수 기능 추가

이제 여러분의 블로그는 세상에 공개되었고, 멋진 개인 도메인까지 갖추었습니다. 하지만 성공적인 블로그가 되기 위해서는 몇 가지 중요한 기능들이 더 필요합니다. 사람들이 내 글을 쉽게 찾을 수 있도록 하고(SEO), 독자들이 의견을 남기며 소통할 수 있게 하고(댓글), 어떤 글이 인기가 많은지 분석할 수 있어야(방문자 분석) 블로그는 비로소 생명력을 얻고 성장해 나갈 수 있습니다.

구글에 내 글을 노출시키는 SEO

검색 엔진 최적화(Search Engine Optimization, SEO)는 내 블로그 글이 구글이나 네이버 같은 검색 엔진의 검색 결과 상위에 노출되도록 만드는 모든 작업을 의미합니다. 아무리 훌륭한 글을 써도 검색 엔진이 내 글을 제대로 수집해가지 못하거나, 글의 주제를 제대로 파악하지 못하면 아무도 그 글을 읽을 수 없습니다. 다행히 대부분의 최신 테마들은 기본적인 SEO 설정을 잘 지원하고 있으며, 우리는 몇 가지만 확인하고 추가하면 됩니다.

_config.yml (또는 config.toml) 파일 점검: 블로그 설정 파일에 title, description, author 등 블로그의 정체성을 나타내는 정보를 정확하게 기입해야 합니다. 검색 엔진은 이 정보를 바탕으로 블로그의 전체 주제를 파악합니다.
SEO 플러그인 활용:

  * 지킬: `jekyll-seo-tag` 라는 공식 플러그인이 있습니다. `Gemfile`에 `gem "jekyll-seo-tag"`를 추가하고 `_config.yml`에 `plugins` 항목으로 등록하면, 알아서 `title` 태그, `meta description`, 캐노니컬 URL, JSON-LD 구조화 데이터 등 SEO에 필수적인 HTML 태그들을 모든 페이지에 자동으로 생성해 줍니다.

  * 휴고/헥소: 대부분의 인기 있는 테마들은 SEO 관련 설정을 테마 설정 파일(`_config.yml` 또는 `params.toml`)에서 상세하게 할 수 있도록 지원합니다. 구글 사이트 인증 코드, 페이스북 앱 ID 등을 입력하는 란이 마련되어 있는지 확인해 보세요.

사이트맵(Sitemap) 생성: sitemap.xml 파일은 블로그의 모든 페이지 주소를 담고 있는 지도와 같습니다. 검색 엔진 로봇은 이 지도를 보고 블로그의 모든 페이지를 빠짐없이 수집해 갈 수 있습니다.

  * 지킬: `jekyll-sitemap` 플러그인이 기본적으로 설치되어 알아서 `sitemap.xml`을 생성해 줍니다.

  * 휴고: 휴고는 자체적으로 사이트맵 생성 기능을 내장하고 있습니다. 빌드하면 자동으로 `sitemap.xml` 파일이 생성됩니다.

  * 헥소: `hexo-generator-sitemap` 플러그인을 설치(`npm install hexo-generator-sitemap --save`)하면 됩니다.

구글 서치 콘솔(Google Search Console) 등록: 구글 서치 콘솔은 구글이 내 블로그를 어떻게 보고 있는지 알려주는 무료 도구입니다. 여기에 내 블로그를 등록하고, 생성된 sitemap.xml 파일의 주소를 제출해야 합니다. 이를 통해 구글에 내 블로그의 존재를 공식적으로 알리고, 페이지 수집을 요청할 수 있으며, 어떤 검색어로 사람들이 들어오는지 등 귀중한 데이터를 얻을 수 있습니다.

독자와 소통하는 댓글 기능 추가

정적 사이트는 데이터베이스가 없기 때문에 자체적으로 댓글 기능을 구현할 수 없습니다. 하지만 걱정할 필요 없습니다. Disqus, Giscus, Utterances와 같은 서드파티(3rd-party) 댓글 플랫폼을 연동하면 손쉽게 댓글 기능을 추가할 수 있습니다.

Disqus (디스커스): 가장 유명하고 널리 쓰이는 댓글 서비스입니다. 강력한 관리 기능과 소셜 로그인 기능을 제공하지만, 무료 버전에는 광고가 표시될 수 있습니다.
Giscus / Utterances: 깃허브를 기반으로 작동하는 오픈소스 댓글 시스템입니다. Giscus는 깃허브 Discussions을, Utterances는 깃허브 Issues를 댓글 저장소로 사용합니다. 광고가 전혀 없고 깔끔하며, 개발자 블로그에 특히 잘 어울립니다.

대부분의 테마는 설정 파일(_config.yml 등)에 이들 서비스와의 연동 옵션을 미리 만들어 두었습니다.

사용하려는 댓글 서비스 사이트에 가입하여 내 블로그를 등록하고, 고유한 식별자(Disqus의 경우 'shortname')를 발급받습니다.
블로그나 테마의 설정 파일에서 댓글 섹션을 찾습니다.

```yaml

# 예시: Minimal Mistakes (Jekyll) 테마의 댓글 설정

comments:

  provider: "disqus" # "disqus", "utterances", "giscus" 등 선택

  disqus:

    shortname: "my-blog-shortname" # Disqus에서 발급받은 shortname

  giscus:

    repo: "사용자이름/저장소이름" # Giscus를 연동할 저장소

    # ... 기타 Giscus 설정


3.  설정 파일에 발급받은 식별자나 저장소 정보를 정확하게 입력하고 저장한 뒤 배포하면, 블로그 포스트 하단에 멋진 댓글 창이 생성될 것입니다.

## 방문자 분석을 위한 구글 애널리틱스

어떤 글이 인기가 많은지, 사람들은 어떤 경로를 통해 내 블로그에 들어오는지, 하루에 몇 명이나 방문하는지를 아는 것은 블로그를 성장시키는 데 있어 필수적입니다. 구글 애널리틱스(Google Analytics)는 이 모든 것을 무료로 분석해 주는 가장 강력한 웹 분석 도구입니다.

1.  구글 애널리틱스 가입: 구글 애널리틱스 사이트([https://analytics.google.com/)에](https://www.google.com/search?q=https://analytics.google.com/)에) 접속하여 구글 계정으로 로그인하고, 내 블로그를 새 속성으로 등록합니다.

2.  측정 ID(Measurement ID) 확인: 등록 과정을 마치면 `G-XXXXXXXXXX` 와 같은 형식의 '측정 ID'를 발급받게 됩니다. 이 ID가 바로 내 블로그와 구글 애널리틱스를 연결해 주는 열쇠입니다.

3.  블로그에 측정 ID 추가: 댓글 기능과 마찬가지로, 대부분의 최신 테마는 구글 애널리틱스 연동을 위한 설정 옵션을 제공합니다. 블로그 또는 테마의 설정 파일을 열어 'google_analytics' 또는 'analytics'와 같은 항목을 찾고, 그곳에 발급받은 측정 ID를 붙여넣기만 하면 됩니다.

```javascript
```yaml

# 예시: 휴고 Ananke 테마의 설정 파일 (config.toml)

googleAnalytics = "G-XXXXXXXXXX"


4.  확인: 코드를 추가하고 배포한 뒤, 구글 애널리틱스의 '실시간' 보고서를 열어보세요. 여러분이 블로그에 접속했을 때, 실시간 방문자 수가 1로 잡히는 것을 볼 수 있다면 성공적으로 연동된 것입니다.

이제 여러분은 깃허브 페이지와 정적 사이트 생성기를 활용하여 전문가 수준의 블로그를 만들고, 운영하며, 성장시키는 데 필요한 모든 지식과 기술을 갖추게 되었습니다. 처음에는 낯설었던 깃, 터미널, 마크다운이 이제는 여러분의 생각을 세상과 공유하는 가장 강력한 무기가 되었을 것입니다. 이 책은 여기서 끝나지만, 여러분의 블로깅 여정은 이제부터가 진짜 시작입니다. 꾸준히 글을 쓰고, 독자들과 소통하며, 여러분만의 가치 있는 디지털 공간을 풍성하게 가꾸어 나가시기를 진심으로 응원합니다.