Сучасні та безкоштовні коментарі в блозі: інтегруємо Giscus у Jekyll Chirpy

🇬🇧 Read this article in English

---

Коли ваш персональний блог чи homelab-довідник починає обростати статтями, з’являється потреба у зворотному зв’язку. Читачі хочуть ставити запитання, вказувати на неточності або просто ділитися своїм досвідом.

Традиційні системи коментарів на кшталт Disqus у безкоштовній версії завалюють сторінки нав’язливою рекламою та трекерами, що псує вигляд сайту.

Сьогодні ми розберемо найкращу безкоштовну альтернативу для IT-блогів — Giscus. Це швидкий і легкий віджет коментарів, який використовує розділ GitHub Discussions вашого репозиторію для зберігання коментарів.

---

Чому саме Giscus?

• Абсолютно безкоштовно: Жодної реклами, підписок чи прихованих платежів.
• Цифрова гігієна: Немає трекерів чи шпигунських скриптів.
• Зручно для розробників: Підтримка Markdown, підсвічування коду та авторизація в один клік через GitHub.
• Гарний вигляд: Автоматично підтримує світлу та темну теми оформлення сайту.
• Інтерактивність: Читачі можуть не лише коментувати, а й залишати емодзі-реакції під вашими статтями (лайки, серця тощо).

---

Крок 1. Підготовка репозиторію на GitHub

Оскільки Giscus працює на базі обговорень GitHub, ваш репозиторій із кодом сайту має бути публічним, а також на ньому потрібно увімкнути функцію Discussions:

1. Перейдіть у свій репозиторій на GitHub.
2. Відкрийте вкладку Settings (Налаштування).
3. Прокрутіть сторінку вниз до розділу Features (Функції).
4. Увімкніть функцію Discussions (Обговорення), поставивши відповідну галочку.

Мал. 1. Активація функції Discussions в налаштуваннях репозиторію

---

Крок 2. Встановлення застосунку Giscus

Тепер потрібно надати сервісу дозвіл на створення обговорень у вашому репозиторії:

1. Перейдіть на офіційну сторінку застосунку: github.com/apps/giscus.
2. Натисніть Install (Встановити) або Configure (Налаштувати), якщо він уже встановлений.
3. У списку репозиторіїв виберіть Only select repositories та вкажіть ваш репозиторій блогу.
4. Натисніть Save (Зберегти).

Мал. 2. Налаштування доступу додатка Giscus до репозиторію блогу

---

Крок 3. Отримання конфігураційних ключів

1. Перейдіть на сайт giscus.app.
2. У розділі Repository введіть шлях до свого репозиторію у форматі користувач/репозиторій (наприклад, username/my-blog-repo).
3. У розділі Discussion Category виберіть категорію обговорень — рекомендовано використовувати Announcements (Оголошення) або General.
4. Прокрутіть вниз до блоку Enable giscus. Конфігуратор автоматично згенерує для вас унікальні параметри. Зверніть увагу на поля:
   • data-repo-id
   • data-category-id

Мал. 3. Генерація ідентифікаторів у веб-конфігураторі Giscus

---

Крок 4. Налаштування коментарів у Jekyll (тема Chirpy)

Тема Chirpy має вбудовану підтримку Giscus. Вам не потрібно самостійно вставляти JS-код у шаблони — достатньо лише прописати отримані параметри в конфігураційному файлі.

Відкрийте файл _config.yml та приведіть блок comments до такого вигляду (вставивши туди свої унікальні repo_id та category_id):

comments:
  # Активуємо систему коментарів
  provider: giscus # [disqus | utterances | giscus]
  
  giscus:
    repo: username/my-blog-repo # Шлях до твого репозиторію на GitHub
    repo_id: R_kgD...            # Твій унікальний ID репозиторію
    category: Announcements     # Назва обраної категорії обговорень
    category_id: DIC_kw...       # Твій унікальний ID категорії
    mapping: pathname
    strict: 0
    input_position: bottom
    lang: uk                    # Мова інтерфейсу коментарів за замовчуванням
    reactions_enabled: 1

Збережіть зміни та завантажте їх на сервер.

---

Висновок

Тепер внизу кожної вашої статті (якщо в її метаданих не вказано comments: false) з’явиться сучасний, безпечний і швидкий блок коментарів. Читачі зможуть авторизуватися через свій акаунт GitHub, писати відгуки у форматі Markdown та залишати реакції. А оскільки всі коментарі зберігаються прямо у вашому GitHub-акаунті, ви маєте повний контроль над обговореннями!