Как создать и запустить децентрализованный сайт

Создание децентрализованного сайта проще, чем многие думают. Единственное принципиальное отличие от обычного сайта — хранение и распространение файлов через децентрализованную сеть (например, IPFS). Остальные этапы — подготовка HTML/CSS/JS, тестирование и деплой — остаются такими же.

В этом пошаговом руководстве вы узнаете: как подготовить файлы сайта, загрузить их в IPFS (локально или через хостинг-сервисы), связать сайт с Web3-доменом (ENS) и открыть его для посещения. Для примера мы используем шаблон с Free CSS и домен elgwaro.eth.

Ключевые термины

• IPFS — распределённая файловая система, которая хранит файлы по их хэшам.
• ENS — Ethereum Name Service, система доменных имён для адресов и содержимого в Web3.
• Контент-хэш (content hash) — ссылка/идентификатор ресурса в IPFS, привязываемая к домену.

Содержание

• Подготовка файлов сайта
• Загрузка в IPFS (локально или через хостинг)
• Связка ENS (Web3-домен) с IPFS-хэшем
• Доступ к сайту и проверка работоспособности
• Альтернативы, проблемы, чек‑листы и отладка

1. Подготовьте файлы сайта

Начните с обычной подготовки сайта: HTML, CSS, изображения, шрифты, скрипты, и т.д. Можно разработать сайт с нуля или взять готовый шаблон и подправить под свои нужды.

Если используете шаблон:

1. Посетите ресурс с шаблонами, например Free CSS.
2. Выберите шаблон и скачайте ZIP.
3. Распакуйте ZIP в папку, где будут лежать все файлы сайта.

Важно: все файлы сайта должны быть в одной папке с корректной относительной структурой (путь к картинкам, ссылкам и стилям должен быть относительным или абсолютным в рамках сайта). Перед загрузкой проверьте, что сайт локально открывается и работает.

2. Загрузите файлы в IPFS

IPFS — это децентрализованная сеть хранения файлов. У вас есть два основных варианта публикации:

• Запустить собственный IPFS-нод (компьютер должен быть онлайн, чтобы файлы были доступны напрямую).
• Использовать сервис-хостинг IPFS (Piñata, Infura, Fleek и др.), который реплицирует и обеспечивает доступность по сети.

Преимущество собственного нода — контроль и отсутствие ежемесячной платы. Преимущество сервиса — непрерывная доступность, зеркалирование и упрощённая интеграция.

2.1 Загрузка через собственный IPFS-нод

1. Установите IPFS-клиент на ПК или используйте расширение Brave с поддержкой IPFS.
2. Запустите IPFS daemon и откройте IPFS Dashboard.
3. В Dashboard нажмите Import и загрузите папку с сайтом.

После импорта вы получите IPFS-хэш каталога (CID). Чтобы проверить доступность, в интерфейсе у файла нажмите ⋯ → Share Link и откройте ссылку в браузере, поддерживающем IPFS (например, Brave). Если нод работает локально и подключён к сети, сайт загрузится.

Примечание: если вы держите нод локально, ваш компьютер должен быть включён и онлайн, чтобы другие узлы могли получить контент напрямую. Чтобы обеспечить постоянную доступность, добавьте репина через сторонние сервисы или используйте хостинг.

2.2 Загрузка через Fleek (пример сервиса)

Fleek позволяет деплоить сайты в IPFS, привязанным к репозиторию GitHub. Это бесплатная и удобная опция для сайтов с непрерывной интеграцией.

Шаги для работы с Fleek:

1. Создайте репозиторий на GitHub и загрузите туда файлы сайта.

Если вы предпочитаете Git-командную строку, выполните в папке сайта:

cd ~/Desktop/dWeb
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/elgwaro/dWeb.git
git push -u origin master

Внимание: замените URL репозитория на ваш, и ветку master на main, если у вас другое имя основной ветки.

2. На Fleek нажмите Add New Site и подключите аккаунт к GitHub. Выберите репозиторий с сайтом.

3. Авторизуйте доступ Fleek к репозиторию.

4. На этапе Deploy Location выберите IPFS и продолжите.

5. Выберите фреймворк (если не уверены — Other) и задеплойте сайт.

После успешного деплоя Fleek выдаст IPFS-где доступен сайт (CID). Fleek также может автоматически реплицировать контент и поддерживать доступность.

3. Привяжите Web3-домен к вашему сайту

Последний шаг — связать IPFS-хэш сайта с Web3-доменом (ENS, Unstoppable Domains и т.д.). Это позволит пользователям заходить на сайт по читаемому имени (например, elgwaro.eth или elgwaro.crypto).

Общее правило: вы должны установить content hash домена равным CID вашего сайта в IPFS. Для записи в ENS потребуется подпись транзакции из кошелька, контролирующего домен.

3.1 Пример: связка ENS с IPFS

1. Откройте панель ENS и перейдите к вашей записи домена.

2. В разделе Records нажмите Edit Records.

3. Выберите Other / Content и вставьте IPFS-хэш (CID) или ссылку вида ipfs://. Сохраните.

4. Подключите кошелёк, подтвердите транзакцию и оплатите комиссию сети.

После включения транзакции ваш домен будет указывать на IPFS-контент.

Если вы делали деплой через Fleek, можно связать домен через интерфейс Fleek:

1. В панели деплоя выберите Add Custom Domain.

2. В разделе ENS Info кликните Add ENS и введите ваш домен. Нажмите Verify и затем Set Content Hash. Подтвердите транзакцию кошельком.

Важно: контролировать домен может только аккаунт, который является его контроллером. Убедитесь, что вы подключили тот же адрес кошелька, который управляет доменом.

4. Откройте сайт пользователям

После привязки контент-хэша домена сайт будет доступен по адресу вида elgwaro.eth.link. В браузерах с поддержкой IPFS (Brave, некоторые расширения) можно открывать сразу elgwaro.eth.

Поздравляем — сайт в сети IPFS по вашему Web3-домену теперь доступен.

Практические советы и рекомендации

• Всегда тестируйте сайт локально и на временной публичной ссылке перед публикацией.
• Если на сайте есть формы или серверная логика — эти части остаются Web2 (нужен бекенд). Можно использовать децентрализованные решения для файлов и статики, а API оставить централизованным или использовать счётчики/стейт в блокчейне по необходимости.
• Подумайте о политике кэширования и версии: при каждом обновлении сайта CID меняется. Используйте CI/CD (GitHub Actions → Fleek) для автоматического деплоя.

Когда подход не сработает или ограничения

• Динамический контент: IPFS лучше подходит для статических сайтов. Для динамики потребуется внешняя инфраструктура (serverless, API, edge-функции).
• Доступность: если вы полагаетесь только на локальный нод, сайт станет недоступен, когда ваша машина офлайн. Решение — репинить через сервисы или использовать Fleek/Piñata.
• Большие файлы: загрузка и раздача больших медиафайлов может быть дорогой и медленной без правильно настроенного хостинга.

Альтернативные подходы

• Unstoppable Domains: альтернативный регистратор Web3-доменов с интеграцией к IPFS и другим сетям.
• Arweave: долгосрочное архивное хранение (pay-once, хранение навсегда) вместо IPFS.
• Decentralized storage + CDN: комбинируйте IPFS с CDN-решениями, которые реплицируют контент для ускорения доступа.

Мини‑методология: быстрый чеклист перед публикацией

1. Проверить локально: все ссылки и ресурсы работают.
2. Оптимизировать изображения и ассеты (сжатие, webp).
3. Создать репозиторий и настроить CI/CD.
4. Задеплоить в IPFS (локально или через Fleek/Piñata).
5. Скопировать CID и установить content hash в ENS.
6. Подтвердить транзакцию кошельком и дождаться подтверждений.
7. Проверить доступность через elgwaro.eth.link и в Brave без .link.

Роли и ответственность (чек‑листы для команды)

Разделяйте обязанности по ролям:

• Разработчик фронтенда:
  • Подготовка статических файлов, оптимизация ресурсов, тесты.
  • Обновление репозитория.
• DevOps / инженер по инфраструктуре:
  • Настройка CI/CD, деплой на Fleek/IPFS, мониторинг репинов.
• Владелец домена / менеджер релизов:
  • Управление ENS, подпись транзакций, оплата газа.
• QA / тестирование:
  • Проверка отображения в Brave и других браузерах, проверка .link.

Критерии приёмки

• Сайт корректно открывается по Web3‑домену (elgwaro.eth.link).
• CID в ENS совпадает с последним задеплоенным CID.
• Все статические ресурсы загружаются без ошибок (200/OK или локальные IPFS‑запросы удачны).
• Если используется Fleek — автоматический деплой отрабатывает при push в ветку.

Отладочный план / Runbook при проблемах

1. Сайт не открывается по домену:
   • Проверьте, верно ли установлен content hash в ENS.
   • Убедитесь, что транзакция подтверждена в блокчейне.
2. Сайт открывается, но отсутствуют изображения:
   • Проверьте относительные пути и то, что CID каталога включает все файлы.
   • Перепроверьте, что в репозитории/папке нет .gitignore, исключающего файлы.
3. Сайт в браузере загружается долго:
   • Проверьте репин-статус в сервисе-хостинге (Fleek/Piñata).
   • Добавьте дополнительные репин-сервисы или CDN.
4. Обновление не происходит (старый CID):
   • Перепроверьте процесс CI/CD, убедитесь, что при новом деплое создаётся новый CID и вы обновили content hash в ENS.

Факто-бокс: ключевые моменты

• Что требуется: файлы сайта, Web3-домен (ENS), кошелёк с ETH для подписания транзакций.
• Стоимость: публикация в IPFS может быть бесплатной (если используется Fleek‑free), но запись в ENS и установка content hash требуют оплаты газа в сети Ethereum.
• CID меняется при любом изменении файла — планируйте автоматическое обновление записи домена.

Глоссарий (одно предложение на термин)

• CID — уникальный хэш содержимого в IPFS, по которому можно получить файлы.
• Content hash — поле в ENS, указывающее на хэш контента (IPFS/Arweave).
• Репин — действие по сохранению копии содержимого на другом IPFS-узле для повышения доступности.

SEO и социальные превью (рекомендации)

• Заголовок страницы (title): делайте коротким и понятным, включите ключевую фразу.
• Meta description: опишите преимущество и призыв к действию.
• Social preview: для OG используйте изображение 1200×630 и краткое описание.

Пример OG: заголовок «Децентрализованный сайт на IPFS — быстро и просто», описание «Публикация статического сайта в IPFS и привязка к ENS за несколько шагов».

Короткое объявление (100–200 слов)

Создан децентрализованный сайт — быстро и без сложных изменений. Подготовьте стандартный набор файлов (HTML/CSS/JS), задеплойте на IPFS через локальный нод или сервисы вроде Fleek, а затем привяжите IPFS CID к Web3‑домену (ENS). Для подтверждения записей потребуется подпись кошелька и небольшая комиссия в ETH. Такой сайт устойчив к цензуре, доступен по читаемому Web3‑домену и может быть интегрирован в привычные рабочие процессы с помощью GitHub и CI/CD. Это практичный первый шаг из Web2 в Web3.

Итог

Переход с Web2 на Web3 для статических сайтов не требует радикальных изменений. Вы по-прежнему создаёте HTML/CSS/JS, но меняете способ хранения и адресации: IPFS для файлов и ENS для удобного имени. Выберите между собственным IPFS-нодом и сервисом-хостингом — оба подхода имеют свои плюсы. Наконец, автоматизируйте деплой и обновление content hash, чтобы обновления сайта моментально отражались в сети.

Важно: при работе с ENS и транзакциями всегда проверяйте адреса и используйте проверенные кошельки. Удачи в публикации вашего первого децентрализованного сайта!