GitHub 블로그에 태그 기능 추가 및 자동 생성 방법

Jekyll 기반의 GitHub 블로그에서 태그(tag)를 활용하면 각 포스트를 키워드로 분류하고 관련된 글끼리 연결할 수 있습니다.
이 글에서는 /tags/태그명/ 형식의 태그별 아카이브 페이지를 자동으로 생성하는 방법과 그 설정 과정을 단계별로 정리해봅니다.

태그(tag)란?

• 각 포스트에 자유롭게 여러 개의 키워드를 붙일 수 있음
• 예: assembly, reverse, blog, tips
• 하나의 포스트는 여러 태그를 가질 수 있음

GitHub 블로그(Jekyll 기반)에서 tag는 포스트에 주제를 분류하거나 관련 글을 연결하는 데 사용하는 키워드입니다. 태그를 사용하면 독자는 비슷한 주제의 글을 한 번에 모아서 볼 수 있게 됩니다.

1. tags 추가하기

사용하는 방법

포스트의 YAML Front Matter에 다음처럼 작성합니다:

---
title: "어셈블리 함수 분석"
tags: [assembly, reverse, c++]
categories: [assembly]
---

---

태그와 카테고리의 차이

항목	태그 (tags)	카테고리 (categories)
목적	주제 키워드	글을 묶는 큰 분류
수	여러 개 가능	보통 1~2개
자유도	자유롭게 작성 가능	보통 사전에 정해둠

tags.md 추가하기

_pages\ 에 tags.md 파일 생성하고 아래 코드 추가:

---
title: "tags"
layout: tags
permalink: /tags/
---

---

로컬 서버를 작동했을 때, 상단 오른쪽 위에 Home 옆에 Tags 가 생성된 것을 확인할 수 있습니다.

화면에 보이는 sidebar 아래에 검색창은 다음 게시글에서 확인하실 수 있습니다.

여태 post에서 작성했던 tags들을 화면과 같이 확인할 수 있습니다.

저는 기존 minimal-mistakes-jekyll 에서 사용하는 tags 방식 보다 원하는 태그를 클릭해서 해당 태그의 게시글 만 보고 싶어서 커스텀을 진행 했습니다. 다음 내용이 커스텀을 진행한 내용입니다.

2. 태그 목록 페이지 만들기

minimal-mistakes-jekyll 테마에서는 자동으로 태그 페이지를 생성할 수 있도록 설정할 수 있고, 다음처럼 tags 폴더를 만들어 태그별 아카이브를 구성할 수도 있습니다:

/tags/assembly.md 파일 생성하고 아래 코드 추가:

---
title: "assembly"
permalink: /tags/assembly/
tag: assembly
layout: tag
---

---

하지만 태그가 너무 많다면 하나하나 수동으로 작성하는 것은 매우 하나하나 수동으로 만드는 건 비효율적이고, 힘든 일이 되겠죠. 목차 3. 에서 자동으로 생성하는 방법을 설명합니다.

3. tag 페이지 자동으로 생성하기

_plugins/generate_tags.rb 파일 생성하고 아래 코드 추가:

require 'set'

module Jekyll
  class TagPageGenerator < Generator
    safe true

    def generate(site)
      seen = Set.new
      site.tags.each do |tag, posts|
        next if seen.include?(tag)
        seen.add(tag)

        dir = File.join('tags', Jekyll::Utils.slugify(tag))
        site.pages << TagPage.new(site, site.source, dir, tag)
      end
    end
  end

  class TagPage < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir  = dir
      @name = 'index.html'

      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_archive.html')
      self.data['tag'] = tag
      self.data['title'] = "Tag: #{tag}"
      self.data['entries_layout'] = 'list'
    end
  end
end

---

\_layouts\tag_archive.html 파일 생성하고 아래 코드 추가:

---
layout: archive
---
{% assign entries_layout = page.entries_layout | default: 'list' %}
<div class="entries-{{ entries_layout }}">
  {% for post in site.tags[page.tag] %}
    {% include archive-single.html type=entries_layout %}
  {% endfor %}
</div>

---

\_includes\posts-taxonomy.html 에서 코드 수정:

기존 코드:

<a href="#{{ item[0] | slugify }}">

수정 코드:

<a href="{{ item[0] | slugify }}">

4. Tag 페이지 결과

기존 tags에서 tag 선택 결과 :

커스텀 결과 :

nasm tag의 사이트가 생성된 이미지 입니다.

기존의 태그 목록 방식도 충분히 유용하지만, 저는 /tags/태그명/처럼 각 태그별로 독립된 페이지가 생성되어 관련 글만 모아볼 수 있는 구조가 훨씬 더 직관적이고 마음에 들었습니다.