Jekyll에 Giscus로 comment 기능 추가
Jekyll에 Giscus를 추가하는 방법은 간단하며, 아래 단계를 따르면 됩니다.
1. Giscus 설정하기
Giscus는 GitHub Discussions를 이용한 댓글 시스템입니다. 먼저 Giscus를 설정해야 합니다.
- Giscus 공식 웹사이트에 접속합니다.
- 아래 정보를 입력합니다: • Repository: 댓글을 저장할 GitHub 저장소 선택 (예: your-username/your-repo) • Discussion Category: Giscus에서 사용할 Discussion 카테고리 선택 • Mapping: 페이지와 댓글을 연결하는 방식 선택 (예: pathname) • Reaction`: 사용자가 댓글에 반응할 수 있도록 활성화할지 여부 설정 • Theme: Giscus 위젯의 테마 설정 (예: light, dark) • 기타 필요 옵션 설정 후 Code Snippet 복사.
2. Jekyll 테마 수정
Giscus 스크립트를 Jekyll 블로그의 적절한 위치에 추가합니다.
(1) _layouts 파일 수정
Giscus를 추가할 위치에 따라 주로 post.html 또는 default.html 파일을 수정합니다.
예: _layouts/post.html
<article>
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">How to Embed YouTube Videos in Jekyll Blog Posts</h1>
<p class="post-meta">
<time class="dt-published" datetime="2023-12-24T16:57:37+00:00" itemprop="datePublished">Dec 24, 2023
</time></p>
</header>
<div class="post-content e-content" itemprop="articleBody">
<p>Embedding YouTube videos in Jekyll posts enhances your content with multimedia. This guide shows you how to do it properly.</p>
<h2 id="basic-embedding">Basic Embedding</h2>
<p>To embed a YouTube video, use an iframe with the embed URL format:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><iframe</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"315"</span>
<span class="na">src=</span><span class="s">"https://www.youtube.com/embed/VIDEO_ID"</span>
<span class="na">frameborder=</span><span class="s">"0"</span>
<span class="na">allowfullscreen</span><span class="nt">></span>
<span class="nt"></iframe></span></code></pre></figure>
<h3 id="how-to-get-the-video-id">How to Get the Video ID</h3>
<p>The video ID is the part after <code class="language-plaintext highlighter-rouge">v=</code> in the YouTube URL:</p>
<ul>
<li>URL: <code class="language-plaintext highlighter-rouge">https://www.youtube.com/watch?v=s17bmlrFXSg</code></li>
<li>Video ID: <code class="language-plaintext highlighter-rouge">s17bmlrFXSg</code></li>
</ul>
<h2 id="example">Example</h2>
<p>Here’s an embedded video:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/s17bmlrFXSg" frameborder="0" allowfullscreen=""></iframe>
<h2 id="responsive-video-embedding">Responsive Video Embedding</h2>
<p>For responsive videos that adapt to screen size, wrap the iframe in a container:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"</span><span class="nt">></span>
<span class="nt"><iframe</span>
<span class="na">style=</span><span class="s">"position: absolute; top: 0; left: 0; width: 100%; height: 100%;"</span>
<span class="na">src=</span><span class="s">"https://www.youtube.com/embed/VIDEO_ID"</span>
<span class="na">frameborder=</span><span class="s">"0"</span>
<span class="na">allowfullscreen</span><span class="nt">></span>
<span class="nt"></iframe></span>
<span class="nt"></div></span></code></pre></figure>
<h2 id="privacy-enhanced-mode">Privacy-Enhanced Mode</h2>
<p>For GDPR compliance, use the privacy-enhanced embed domain:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"https://www.youtube-nocookie.com/embed/VIDEO_ID"</span><span class="nt">></iframe></span></code></pre></figure>
<h2 id="additional-parameters">Additional Parameters</h2>
<p>You can customize the embed with URL parameters:</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">autoplay=1</code></td>
<td>Auto-play video</td>
<td><code class="language-plaintext highlighter-rouge">?autoplay=1</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">start=30</code></td>
<td>Start at 30 seconds</td>
<td><code class="language-plaintext highlighter-rouge">?start=30</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">end=60</code></td>
<td>End at 60 seconds</td>
<td><code class="language-plaintext highlighter-rouge">?end=60</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">loop=1</code></td>
<td>Loop the video</td>
<td><code class="language-plaintext highlighter-rouge">?loop=1</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">mute=1</code></td>
<td>Mute audio</td>
<td><code class="language-plaintext highlighter-rouge">?mute=1</code></td>
</tr>
</tbody>
</table>
<p>Example with multiple parameters:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/VIDEO_ID?start=30&autoplay=1&mute=1"</span><span class="nt">></iframe></span></code></pre></figure>
<h2 id="performance-tips">Performance Tips</h2>
<ul>
<li><strong>Lazy Loading</strong>: Add <code class="language-plaintext highlighter-rouge">loading="lazy"</code> for better page load performance</li>
<li><strong>Facade Pattern</strong>: Consider using a thumbnail that loads the video on click</li>
<li><strong>Limit Videos</strong>: Too many embedded videos can slow down your page</li>
</ul>
</div>
<div class="related-posts">
<h2>Related Posts</h2>
<ul class="related-posts-list">
<li class="related-post-item">
<a href="/tools/mac/2025/12/28/mac-recommended-apps.html">
<span class="related-post-title">Mac 추천 앱 모음 - 개발자를 위한 필수 앱</span>
<span class="related-post-meta">
<span class="related-post-category">tools</span>
<span class="related-post-date">2025-12-28</span>
</span>
</a>
</li>
<li class="related-post-item">
<a href="/tools/mac/2025/12/28/mac-tips-shortcuts.html">
<span class="related-post-title">Mac 필수 팁과 단축키 모음</span>
<span class="related-post-meta">
<span class="related-post-category">tools</span>
<span class="related-post-date">2025-12-28</span>
</span>
</a>
</li>
<li class="related-post-item">
<a href="/tools/mac/2025/12/28/mac-system-management.html">
<span class="related-post-title">Mac 시스템 관리 - launchd, 네트워크, 배터리</span>
<span class="related-post-meta">
<span class="related-post-category">tools</span>
<span class="related-post-date">2025-12-28</span>
</span>
</a>
</li>
<li class="related-post-item">
<a href="/tools/mac/2025/12/28/mac-terminal-commands.html">
<span class="related-post-title">Mac 터미널 필수 명령어 모음</span>
<span class="related-post-meta">
<span class="related-post-category">tools</span>
<span class="related-post-date">2025-12-28</span>
</span>
</a>
</li>
</ul>
</div>
<style>
.related-posts {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #e0e0e0;
}
.related-posts h2 {
margin-bottom: 20px;
font-size: 1.4em;
color: #333;
}
.related-posts-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
}
.related-post-item {
background: #f8f9fa;
border-radius: 8px;
transition: transform 0.2s, box-shadow 0.2s;
}
.related-post-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.related-post-item a {
display: block;
padding: 15px;
text-decoration: none;
color: inherit;
}
.related-post-title {
display: block;
font-weight: 600;
color: #0366d6;
margin-bottom: 8px;
font-size: 0.95em;
line-height: 1.4;
}
.related-post-meta {
display: flex;
justify-content: space-between;
font-size: 0.8em;
color: #666;
}
.related-post-category {
background: #e0e0e0;
padding: 2px 8px;
border-radius: 4px;
text-transform: capitalize;
}
@media (max-width: 600px) {
.related-posts-list {
grid-template-columns: 1fr;
}
}
</style>
<section class="post-comments">
<h2>Comments</h2>
<script src="https://giscus.app/client.js"
data-repo="dss99911/dss99911.github.io"
data-repo-id="R_kgDOK1J8gQ"
data-category="Announcements"
data-category-id="DIC_kwDOK1J8gc4C0Sct"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="ko"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
</section>
<style>
.post-comments {
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid #e0e0e0;
}
.post-comments h2 {
margin-bottom: 20px;
font-size: 1.5em;
}
</style>
<a class="u-url" href="/tools/jekyll/2023/12/24/jekyll-youtube.html" hidden></a>
</article>
</article>
<div id="giscus-comments"></div>
<script src="https://giscus.app/client.js"
data-repo="your-username/your-repo"
data-repo-id="your-repo-id"
data-category="General"
data-category-id="category-id"
data-mapping="pathname"
data-reactions-enabled="1"
data-theme="light"
data-lang="en"
crossorigin="anonymous"
async>
</script>
(2) CSS 수정 (선택 사항)
Giscus 위젯이 블로그의 디자인과 잘 어울리도록 필요 시 추가 CSS를 작성합니다.
3. Jekyll 블로그 빌드 및 확인
- 변경 사항을 저장한 후 Jekyll 블로그를 빌드합니다.
bundle exec jekyll serve
- 로컬 서버를 열어 페이지가 제대로 렌더링되었는지 확인합니다.
- giscus가 작동하지 않는다면 GitHub Discussions 설정 또는 repo, category 등의 매개변수를 다시 확인하세요.
4. 배포
변경 사항을 저장소에 푸시하고 배포 사이트에서도 Giscus가 잘 동작하는지 확인합니다.
참고: Giscus는 GitHub Discussions를 기반으로 하기 때문에 저장소에서 Discussions가 활성화되어 있어야 합니다.
필요한 추가 사항이 있으면 말씀해주세요!
Comments