깃허브 블로그 만들기 - URL 프리뷰 만들기

이번 글 참고자료: 남주의 커밋로그

Jekyll-linkpreview 설치

Chirpy 테마(Jekyll)는 별도로 link preview 기능이 없어, 별도로 플러그인을 설치해줘야한다.

1. Gemfile에 gem 'jekyll-linkpreview' 추가

   group :jekyll_plugins do
     gem 'jekyll-linkpreview'
   end 
   

2. _config.yml에 jekyll-linkpreview 추가

   plugins:
     - jekyll-linkpreview
   

3. bundle install 실행

   bundle install
   

4. css 파일 추가
   • 리드미의 설명에 따라 기본 CSS 파일을 추가해야 한다. 사용자가 원하는 모양에 따라 커스터마이징 할 수 있다.

• CSS 파일을 /asset/css/에 붙여넣는다.

이번 글에서는 Claude Code을 이용하여 내가 원하는 모양으로 URL Preview를 생성하였다.

CSS 파일 적용하기

linkpreview.css 파일을 잘 넣었다면, _includes/head.html를 수정해야 제대로 적용된다. Line 98이후로 있는 3rd-party Dependencies 코드에 아래 내용을 붙여넣자.

{% if page.layout == 'post' %}
    <!-- Linkpreview -->
    <link rel="stylesheet" href="/assets/css/linkpreview.css">
{% endif %}

Jekyll-linkpreview 사용하기

Liquid 문법에 따라 다음과 같이 Markdown 파일 안에 코드르 작성하면

{% linkpreview "https://github.com/" %}

그럼 아래와 같이 URL 미리보기 위젯이 나타난다.

GitHub · Change is constant. GitHub keeps you ahead.

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

Chirpy 목차 수정

Jekyll-linkpreview를 사용하면, 해당 링크가 Chirpy 테마 안에서 하나의 목차로 생성된다.
미관상으로도, SEO(검색 색인) 상으로도 좋지 않기에 태그를 제거하겠다.

Jekyll-linkpreview는 커스텀 템플릿을 지원하여, html 파일을 생성하여 URL의 H2 태그를 제거할 수 있다고 한다.

참고 페이지 저자의 linkpreview.html 파일을 /_include 폴더에 넣어보자.

<div class="jekyll-linkpreview-wrapper">
  <div class="jekyll-linkpreview-wrapper-inner">
    <div class="jekyll-linkpreview-content">
      <div class="jekyll-linkpreview-body">
        <div class="jekyll-linkpreview-title">
          <a href="{{ url }}" target="_blank">{{ title }}</a>
        </div>
        {% if description %}
          <div class="jekyll-linkpreview-description">{{ description }}</div>
        {% endif %}
        <div class="jekyll-linkpreview-footer">
          <a href="{{ url }}" target="_blank">{{ domain }}</a>
        </div>
      </div>
    </div>
  </div>
  {% if image %}
    <div class="jekyll-linkpreview-image" style="background-image: url('{{ image }}');"></div>
  {% endif %}
</div>

그러면 현재 글의 목차에서 URL 프리뷰가 없는 것을 확인할 수 있다.