Когда я только начинал пилить TG Notion, первой мыслью было: «Надо брать VPS, ставить Nginx, прикручивать домен, получать сертификат…». Знакомо? Если ты хоть раз настраивал HTTPS для Mini App — ты понимаешь, о чём я.
Но оказалось, что можно вообще без всего этого. Серьёзно. GitHub Pages даёт тебе бесплатный HTTPS-хостинг для статики, а деплой происходит через git push. Никаких серверов, никакой боли. Звучит как сказка? Сейчас расскажу, как это работает, и покажу на живом примере — TG Notion.
1. В чём проблема
Для Telegram Mini App нужен URL с https://. Без этого WebApp не откроется.
Ты делаешь демку. Она ещё сырая. Меняешь интерфейс пять раз в день. Ловишь баги. И после каждого изменения ты должен идти на сервер, пушить код, перезапускать Nginx, чистить кэш. Это отнимает время и бесит.
Сервер — это продакшен. А демка — это песочница. Она должна обновляться мгновенно и без геморроя. Ты хочешь просто сохранить файл и сразу увидеть результат. Не лезть в SSH, не трогать конфиги, не ждать деплой.
2. Решение — GitHub Pages
GitHub Pages — это бесплатный хостинг для статических сайтов. Вы просто кладёте HTML/CSS/JS файлы в репозиторий, включаете Pages в настройках репозитория — и у вас есть HTTPS. Деплой — git push. Всё. Бесплатно. Навсегда.
Для Mini App этого более чем достаточно. Боту не нужен сервер для WebApp — он просто открывает URL. Вся логика живёт в Telegram (WebApp API), ваш код — в браузере. Поэтому никаких бэкендов, никаких аренд.
Давайте по шагам.
2.1 Создаём репозиторий
Заходим на GitHub, жмём «+» → «New repository». Имя: tg-notion-ui (или любое другое). Важно: репозиторий должен быть публичным — иначе GitHub Pages не включится для частного репо.
git clone https://github.com/yourname/tg-notion-ui.gitcd tg-notion-ui
2.2 Структура файлов
В корне репозитория создаём три файла:
index.html — точка входа. Telegram откроет этот файл по URL кнопки Menu Button.
<!DOCTYPE html><html lang="ru"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mini App</title></head><body> <h1>Привет, я Mini App</h1></body></html>
style.css — здесь живёт тема, стили, отступы. Никакой магии, только CSS-переменные.
:root { --bg: #1a1a2e; --text: #e0e0e0; --accent: #4a86ff;}
app.js — логика WebApp. Подключаем Telegram WebApp API, инициализируем, разворачиваем на весь экран.
const tg = window.Telegram.WebApp;tg.ready();tg.expand();
2.3 Включаем GitHub Pages
Идём в Settings репозитория → Pages → Branch: выставляем main, жмём Save. Через минуту сайт живёт по адресу https://yourname.github.io/tg-notion-ui/.
В BotFather прописываем этот URL как Menu Button. Готово.
3. Пример — TG Notion
TG Notion — это живой пример. Это notes & tasks внутри Telegram, которые хостятся на GitHub Pages.
Что там под капотом:
-
Mini App: чистый HTML/CSS/JS. SPA, без фреймворков, без сборщиков. Файлы — статика.
-
Данные: localStorage. Да, это костыль. Но для демки это работает идеально. Пользователь что-то создал — оно сохранилось и открылось здесь же. Никакой базы, никаких бэкендов.
-
Бот: aiogram + SQLite. Это дверь. Просто регистрация пользователя. Но база здесь не для Mini App — она для будущего. Сейчас бот работает с моего компа,пока я не доведу его до ума. Но когда я перенесу базу на сервер, WebApp проснётся для синхронизации данных.
Репозиторий всего этого лежит здесь: https://github.com/Elrick-from-Malnibone/tg-notion-ui
4. Пошаговая настройка GitHub Pages
Держите инструкцию:
Шаг 1. Создайте репозиторий на GitHub. Название не важно. Главное — он должен быть публичным.
Шаг 2. Положите в репозиторий три файла: index.html, style.css, app.js. Содержимое — любое. Это просто пример, вы можете написать своё.
Шаг 3. Settings → Pages → Branch: main. / (root). Save. Ждать минуту. Открывайте URL из Settings.
Шаг 4. BotFather → /mybots → Menu Button. URL: ваш https://....github.io/..... Готово. Ваш Mini App живёт по этому адресу.
Никаких серверов. Никаких Nginx. Никаких Certbot.
5. Ограничения
Честно. GitHub Pages — это статика. Только фронтенд. Вы не можете запустить там Python, Node.js, базу данных. Нельзя API, нельзя вебхуки. Поэтому:
-
Нет серверной логики. Ваш код не исполняется на сервере — он просто лежит и отображается. Юзер жмёт кнопку — фронтенд реагирует. Данные сохраняются тут же, на устройстве.
-
Нет синхронизации. Данные локальны. Пользователь открыл на телефоне — на десктопе их нет. Это демо. Так и задумано.
Когда вы дорастёте до продакшена, вы возьмёте сервер, базу, настройте API, вебхуки. Тогда данные будут бегать между устройствами, и localStorage уйдёт в историю.
6. Что дальше
TG Notion — это только начало. Дальше я добавлю:
-
Синхронизацию через базу данных (SQLite/PostgreSQL)
-
Шеринг заметок и задач (кнопка «Поделиться»)
-
Общие доски (совместное редактирование)
-
Напоминания (бот пришлёт уведомление в Telegram)
-
Категории и папки
Но это всё потом. Сейчас — демка. И она полностью работает. Вы можете потрогать её здесь: @Telega_notion_bot.
7. Ссылки
-
Репозиторий TG Notion: https://github.com/Elrick-from-Malnibone/tg-notion-ui
-
Канал: https://t.me/system_develope
Надеюсь, было полезно. Тестируйте, ломайте, пишите в чат.
ссылка на оригинал статьи https://habr.com/ru/articles/1052416/