Hugo & GithubPages 블로그 댓글 시스템 구현 가이드

1. GitHub 저장소 → Settings
2. Features 섹션 → Discussions 체크

<!-- layouts/partials/comments.html -->
<script src="https://giscus.app/client.js"
        data-repo="0AndWild/0AndWild.github.io"
        data-repo-id="YOUR_REPO_ID"
        data-category="Announcements"
        data-category-id="YOUR_CATEGORY_ID"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        crossorigin="anonymous"
        async>
</script>

[article]
  showComments = true

<script>
  // 블로그 테마 변경 시 Giscus 테마도 변경
  const giscusTheme = document.querySelector('iframe.giscus-frame');
  if (giscusTheme) {
    const theme = document.documentElement.getAttribute('data-theme');
    giscusTheme.contentWindow.postMessage({
      giscus: {
        setConfig: {
          theme: theme === 'dark' ? 'dark' : 'light'
        }
      }
    }, 'https://giscus.app');
  }
</script>

<!-- layouts/partials/comments.html -->
<script src="https://utteranc.es/client.js"
        repo="username/repository"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

1. Railway.app 회원가입
2. "New Project" → "Deploy from GitHub"
3. Remark42 Docker 이미지 선택
4. 환경변수 설정:
   - REMARK_URL=https://your-remark42.railway.app
   - SECRET=your-random-secret
   - AUTH_ANON=true  # 익명 댓글 허용
   - AUTH_GITHUB_CID=your_client_id
   - AUTH_GITHUB_CSEC=your_client_secret

# fly.toml
app = "my-remark42"

[build]
  image = "umputun/remark42:latest"

[env]
  REMARK_URL = "https://my-remark42.fly.dev"
  AUTH_ANON = "true"
  AUTH_GITHUB_CID = "xxx"
  AUTH_GITHUB_CSEC = "xxx"

fly launch
fly deploy

# docker-compose.yml
version: '3.8'

services:
  remark42:
    image: umputun/remark42:latest
    restart: always
    environment:
      - REMARK_URL=https://remark.your-blog.com
      - SECRET=your-secret-key-change-this
      - AUTH_ANON=true                    # 익명 허용
      - AUTH_GITHUB_CID=xxx               # GitHub 로그인
      - AUTH_GITHUB_CSEC=xxx
      - AUTH_GOOGLE_CID=xxx               # Google 로그인
      - AUTH_GOOGLE_CSEC=xxx
      - ADMIN_SHARED_ID=github_username   # 관리자
    volumes:
      - ./data:/srv/var
    ports:
      - "8080:8080"

docker-compose up -d

<!-- layouts/partials/comments.html -->
<div id="remark42"></div>
<script>
  var remark_config = {
    host: 'https://your-remark42.railway.app',
    site_id: '0andwild-blog',
    components: ['embed'],
    theme: 'light',
    locale: 'ko',
    max_shown_comments: 10,
    simple_view: false,
    no_footer: false
  };

  (function(c) {
    for(var i = 0; i < c.length; i++){
      var d = document, s = d.createElement('script');
      s.src = remark_config.host + '/web/' +c[i] +'.js';
      s.defer = true;
      (d.head || d.body).appendChild(s);
    }
  })(remark_config.components || ['embed']);
</script>

# 환경변수
AUTH_ANON=true              # 익명 허용
AUTH_GITHUB_CID=xxx         # GitHub OAuth App ID
AUTH_GITHUB_CSEC=xxx        # GitHub OAuth App Secret
ANON_VOTE=false             # 익명 사용자 투표 불가 (스팸 방지)

# 관리자 지정
ADMIN_SHARED_ID=github_yourusername

# 또는 이메일
ADMIN_SHARED_EMAIL=you@example.com

version: '3.8'

services:
  comentario:
    image: registry.gitlab.com/comentario/comentario
    ports:
      - "8080:8080"
    environment:
      - COMENTARIO_ORIGIN=https://comments.your-blog.com
      - COMENTARIO_BIND=0.0.0.0:8080
      - COMENTARIO_POSTGRES=postgres://user:pass@db/comentario
    depends_on:
      - db

  db:
    image: postgres:15
    environment:
      - POSTGRES_DB=comentario
      - POSTGRES_USER=comentario
      - POSTGRES_PASSWORD=change-this
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

<script defer src="https://comments.your-blog.com/js/commento.js"></script>
<div id="commento"></div>

1. disqus.com 가입
2. "I want to install Disqus on my site" 선택
3. Website Name 입력 (예: andwild-blog)
4. Category 선택
5. Plan 선택 (Basic - Free)

# config/_default/config.toml
[services.disqus]
  shortname = "andwild-blog"  # 1단계에서 생성한 이름

# config/_default/params.toml
[article]
  showComments = true

Disqus Dashboard → Settings → Community
→ Guest Commenting: Allow guests to comment (체크)

/* 비추천: Disqus 약관 위반 가능 */
#disqus_thread iframe[src*="ads"] {
  display: none !important;
}

1. https://cusdis.com/ 방문
2. "Deploy with Vercel" 클릭
3. GitHub 연결
4. PostgreSQL 추가 (Vercel Storage)
5. 배포 완료

1. 배포된 Cusdis 대시보드 접속
2. "Add Website" 클릭
3. Domain 입력: 0andwild.github.io
4. App ID 복사

<!-- layouts/partials/comments.html -->
<div id="cusdis_thread"
  data-host="https://your-cusdis.vercel.app"
  data-app-id="YOUR_APP_ID"
  data-page-id="{{ .File.UniqueID }}"
  data-page-url="{{ .Permalink }}"
  data-page-title="{{ .Title }}">
</div>
<script async defer src="https://your-cusdis.vercel.app/js/cusdis.es.js"></script>

GitHub 저장소 → Settings → Features → Discussions 체크

https://github.com/apps/giscus 방문 → Install
→ 저장소 선택

# 디렉토리 생성 (없으면)
mkdir -p layouts/partials

# 파일 생성
touch layouts/partials/comments.html

<!-- layouts/partials/comments.html -->
<script src="https://giscus.app/client.js"
        data-repo="0AndWild/0AndWild.github.io"
        data-repo-id="R_xxxxxxxxxxxxx"
        data-category="Announcements"
        data-category-id="DIC_xxxxxxxxxxxxx"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        crossorigin="anonymous"
        async>
</script>

[article]
  showComments = true

hugo server -D
# http://localhost:1313 에서 확인

git add .
git commit -m "Add Giscus comments"
git push

GitHub → Settings → Developer settings → OAuth Apps → New OAuth App

Application name: AndWild Blog Comments
Homepage URL: https://0andwild.github.io
Authorization callback URL: https://your-remark42.railway.app/auth/github/callback

생성 후:
Client ID 복사
Client Secret 생성 및 복사

1. railway.app 가입
2. "New Project" → "Deploy Docker Image"
3. Image: umputun/remark42:latest
4. 환경변수 추가:

REMARK_URL=https://your-project.railway.app
SECRET=randomly-generated-secret-key-change-this
SITE=0andwild-blog
AUTH_ANON=true
AUTH_GITHUB_CID=your_github_client_id
AUTH_GITHUB_CSEC=your_github_client_secret
ADMIN_SHARED_ID=github_yourusername

Railway가 자동으로 URL 생성:
https://your-project.railway.app

브라우저에서 접속하여 Remark42 UI 확인

mkdir -p layouts/partials
touch layouts/partials/comments.html

<!-- layouts/partials/comments.html -->
<div id="remark42"></div>
<script>
  var remark_config = {
    host: 'https://your-project.railway.app',
    site_id: '0andwild-blog',
    components: ['embed'],
    theme: 'light',
    locale: 'ko'
  };

  (function(c) {
    for(var i = 0; i < c.length; i++){
      var d = document, s = d.createElement('script');
      s.src = remark_config.host + '/web/' +c[i] +'.js';
      s.defer = true;
      (d.head || d.body).appendChild(s);
    }
  })(remark_config.components || ['embed']);
</script>

[article]
  showComments = true

hugo server -D
# 확인 후
git add .
git commit -m "Add Remark42 comments"
git push

1. Disqus에서 데이터 Export (XML)
2. GitHub Discussions로 수동 이전
   (자동화 스크립트 없음, 수동 작업 필요)

1. Disqus XML Export
2. Remark42 Admin → Import → Disqus 선택
3. XML 파일 업로드