<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://durn02.github.io/feed.xml" rel="self" type="application/atom+xml" /><link href="https://durn02.github.io/" rel="alternate" type="text/html" /><updated>2026-06-13T18:00:57+09:00</updated><id>https://durn02.github.io/feed.xml</id><title type="html">DuVelop</title><subtitle>개발 공부 기록 포트폴리오</subtitle><author><name>Durn02</name></author><entry><title type="html">개발 블로그 만들기 with Github pages</title><link href="https://durn02.github.io/%EA%B8%B0%EB%A1%9D/how-is-this-blog-made/" rel="alternate" type="text/html" title="개발 블로그 만들기 with Github pages" /><published>2026-06-13T00:00:00+09:00</published><updated>2026-06-13T00:00:00+09:00</updated><id>https://durn02.github.io/%EA%B8%B0%EB%A1%9D/how-is-this-blog-made</id><content type="html" xml:base="https://durn02.github.io/%EA%B8%B0%EB%A1%9D/how-is-this-blog-made/"><![CDATA[<h2 id="github-pages란">GitHub Pages란?</h2>

<p>GitHub Pages는 GitHub repository에 작성된 코드를 정적 웹사이트로 호스팅해주는 서비스입니다.
별도의 서버 비용 없이 무료로 사용할 수 있고, github에 <code class="language-plaintext highlighter-rouge">push</code>만 하면 자동으로 배포됩니다.</p>

<h2 id="template">Template</h2>

<p><a href="https://jekyllthemes.io/jekyll-blog-themes">Jekyll themes</a>에서 원하는 템플릿을 골랐습니다. 그 중 minial-mistakes라는 테마를 골랐습니다.</p>

<h2 id="왜-jekyll-minimal-mistakes인가">왜 Jekyll, Minimal Mistakes인가?</h2>

<p>정적 사이트 생성기에는 Jekyll, Hugo, Astro 등 여러 선택지가 있지만 Jekyll을 선택한 이유는 다음과 같습니다.</p>

<ul>
  <li>GitHub Pages가 Jekyll을 공식 지원하여 별도 빌드 설정이 필요 없음. -&gt; .github/workflows/deploy.yml을 만들 필요 없음.</li>
  <li>Minimal Mistakes 테마가 마음에 들었음.</li>
  <li>이미 완성된 디자인 템플릿 덕분에 글 작성에 집중할 수 있음.</li>
</ul>

<h2 id="환경-준비">환경 준비</h2>

<p>시작 전 아래 도구들이 설치되어 있어야 합니다. (* 은 필수 설치 항목)</p>

<ul>
  <li>*Git</li>
  <li>*IDE (본인은 VScode를 사용하였음)</li>
  <li>Ruby (로컬에서 Jekyll을 실행하고 싶은 경우)</li>
</ul>

<h2 id="1단계-repository-생성">1단계: repository 생성</h2>

<p>공식 repository를 fork합니다. jekyllthemes.io에서 원하는 템플릿의 git repository를 fork합니다.</p>

<p><img src="/assets/images/2026-05-30-how-is-this-blog-made/1.png" alt="repository fork 화면" /></p>

<p>위 빨간 네모 부분을 반드시 아래 형식으로 지정해야 합니다.</p>

<p><code class="language-plaintext highlighter-rouge">{username}.github.io</code></p>

<p>ex: <code class="language-plaintext highlighter-rouge">durn02.github.io</code></p>

<h2 id="2단계-github-pages-설정">2단계: github pages 설정</h2>

<p>생성한 repository의 settings-&gt;pages에 들어가 아래 모습으로 설정합니다.
<img src="/assets/images/2026-05-30-how-is-this-blog-made/2.png" alt="github pages 설정" /></p>

<h2 id="3단계-_configyml-설정">3단계: _config.yml 설정</h2>

<p>생성한 repository를 clone한 후 _config.yml을 편집합니다.</p>

<p>테마의 핵심 설정 파일입니다. 최소한 아래 항목은 본인 정보로 수정해야 합니다.</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">블로그</span><span class="nv"> </span><span class="s">이름"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">https://{username}.github.io"</span>
<span class="na">repository</span><span class="pi">:</span> <span class="s2">"</span><span class="s">{username}/{username}.github.io"</span>
<span class="na">timezone</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Asia/Seoul"</span>
<span class="na">locale</span><span class="pi">:</span> <span class="s2">"</span><span class="s">ko-KR"</span>

<span class="na">author</span><span class="pi">:</span>
  <span class="na">name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">이름"</span>
  <span class="na">bio</span><span class="pi">:</span> <span class="s2">"</span><span class="s">한</span><span class="nv"> </span><span class="s">줄</span><span class="nv"> </span><span class="s">소개"</span>
  <span class="na">location</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Seoul,</span><span class="nv"> </span><span class="s">Korea"</span>
  <span class="na">links</span><span class="pi">:</span>
    <span class="pi">-</span> <span class="na">label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">GitHub"</span>
      <span class="na">icon</span><span class="pi">:</span> <span class="s2">"</span><span class="s">fab</span><span class="nv"> </span><span class="s">fa-fw</span><span class="nv"> </span><span class="s">fa-github"</span>
      <span class="na">url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">https://github.com/{username}"</span>
</code></pre></div></div>

<h2 id="4단계-첫-포스트-작성">4단계: 첫 포스트 작성</h2>

<p>예시가 궁금하시면 <code class="language-plaintext highlighter-rouge">_docs/_posts</code>를 참고하면 됩니다.</p>

<p><code class="language-plaintext highlighter-rouge">_posts/</code> 폴더를 생성하고 아래 형식으로 파일을 만듭니다.</p>

<p>_posts/YYYY-MM-DD-제목.md</p>

<p>파일 상단에 아래 정보(Front Matter)를 작성합니다.</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">첫</span><span class="nv"> </span><span class="s">번째</span><span class="nv"> </span><span class="s">포스트"</span>
<span class="na">date</span><span class="pi">:</span> <span class="s">2026-05-30</span>
<span class="na">categories</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="s">개발</span>
<span class="na">tags</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="s">jekyll</span>
<span class="nn">---</span>

<span class="s">~~ 본문 내용 ~~</span>
</code></pre></div></div>

<p>본 블로그의 예시:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">개발</span><span class="nv"> </span><span class="s">블로그</span><span class="nv"> </span><span class="s">만들기</span><span class="nv"> </span><span class="s">with</span><span class="nv"> </span><span class="s">Github</span><span class="nv"> </span><span class="s">pages"</span>
<span class="na">date</span><span class="pi">:</span> <span class="s">2026-05-30</span>
<span class="na">categories</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="s">기록</span>
<span class="na">tags</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="s">github-pages</span>
  <span class="pi">-</span> <span class="s">jekyll</span>
  <span class="pi">-</span> <span class="s">minimal-mistakes</span>
  <span class="pi">-</span> <span class="s">블로그</span>
<span class="na">toc_label</span><span class="pi">:</span> <span class="s2">"</span><span class="s">목차"</span>
<span class="na">comments</span><span class="pi">:</span> <span class="no">true</span>
<span class="nn">---</span>
</code></pre></div></div>

<h2 id="5단계-배포">5단계: 배포</h2>

<p>로컬에서 수정한 내용을 push하면 1~3분 안에 자동 반영됩니다.</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add <span class="nb">.</span>
git commit <span class="nt">-m</span> <span class="s2">"첫 포스트 작성"</span>
git push origin main
</code></pre></div></div>

<p>배포 결과는 저장소의 <strong>Actions</strong> 탭에서 확인할 수 있습니다.
초록색 체크면 성공, 빨간 X면 빌드 오류입니다.</p>

<h2 id="기타-사항">기타 사항</h2>
<ol>
  <li>스크롤 시 목차를 고정하고 싶은 경우 _config.yml의 맨 밑 <code class="language-plaintext highlighter-rouge">defaults: -&gt; values:</code> 부분에 <code class="language-plaintext highlighter-rouge">toc_sticky: true</code>를 추가하면 됩니다.</li>
  <li>정적 웹사이트란 그저 껍데기만을 보여주는 사이트를 의미합니다.</li>
</ol>

<h2 id="마치며">마치며</h2>

<p>처음 설정하는 데 시간이 좀 걸리지만, 한 번 구성해두면 이후에는 마크다운 파일 하나만 추가하면 글이 올라갑니다.
꾸준히 기록하다 보면 어느새 나만의 개발 아카이브가 완성될 거라 생각합니다. 🚀</p>]]></content><author><name>Durn02</name></author><category term="기록" /><category term="github-pages" /><category term="jekyll" /><category term="minimal-mistakes" /><category term="개발 블로그 만들기" /><summary type="html"><![CDATA[GitHub Pages란?]]></summary></entry></feed>