Як створити децентралізований веб-сайт

Автор

Створити децентралізований веб-сайт простіше, ніж більшість людей очікує. Фактично, єдина відмінність між децентралізованим веб-сайтом і звичайним сайтом полягає в тому, що він розміщений у децентралізованій мережі. Майже все інше залишилося без змін.

У цьому посібнику ми розглянемо процес створення та запуску децентралізованого веб-сайту. Щоб пройти весь процес, вам знадобиться домен Web3 і трохи ETH у вашому гаманці.

1. Створіть файли свого сайту

Почніть з підготовки необхідних файлів сайту. Крім того, ви можете завантажити безкоштовний шаблон веб-сайту від постачальників шаблонів і використовувати його для створення свого децентралізованого веб-сайту. Ми завантажимо шаблон із Free CSS для розробки нашого сайту.

  • Відвідайте Безкоштовний CSS, виберіть шаблон і завантажте його. Потім розпакуйте ZIP-файл у папку, що містить кожен окремий файл, як показано нижче.

    • Якщо ви створюєте сайт з нуля, переконайтеся, що всі ваші файли зберігаються в одній папці.

    2. Завантажте файли свого веб-сайту в IPFS

    IPFS (Inter-Planetary File System) — це найпопулярніша децентралізована система зберігання файлів, що складається з глобально розподіленої однорангової мережі комп’ютерів, які співпрацюють для розміщення файлів.

    Для початку ви можете розмістити файли веб-сайту на своєму автономному вузлі IPFS – персональному комп’ютері. Складність цього маршруту полягає в тому, що ваш комп’ютер має бути онлайн, щоб хтось міг отримати доступ до вашого децентралізованого веб-сайту.

    Іншим варіантом є використання хостингової платформи IPFS, наприклад Піньята, Інфураабо Флік для розміщення та розповсюдження ваших файлів у мережі IPFS, роблячи їх доступними для будь-кого. Однак вам потрібно буде заплатити за підписку, щоб користуватися деякими з цих послуг.

      Як запланувати надсилання електронної пошти в Gmail

    Завантаження на ваш вузол IPFS

    По-перше, вам потрібно запустити незалежний вузол IPFS.

  • Почніть із налаштування IPFS на вашому ПК. Ви можете завантажити клієнт ПК або скористатися розширенням для браузера Brave, щоб налаштувати свій вузол IPFS.
  • Після налаштування відкрийте інформаційну панель IPFS, натисніть «Імпортувати» та завантажте папку веб-сайту.
  • Щоб перевірити, чи працює веб-сайт, натисніть три крапки праворуч від файлу, виберіть «Поділитися посиланням», скопіюйте та відкрийте посилання IPFS у новій вкладці в Brave. Сайт повинен добре завантажуватися, якщо ви правильно налаштували Brave.

    • Завантаження на Fleek

    Fleek дозволяє користувачам безкоштовно завантажувати веб-сайти в IPFS, а для Piñata потрібен пакет преміум-класу. Тим не менш, вам потрібно буде спочатку розгорнути свій веб-сайт на GitHub, перш ніж ви зможете використовувати Fleek.

  • Відкрийте інформаційну панель GitHub і створіть нове сховище. Далі завантажте файли свого веб-сайту в репозиторій GitHub за допомогою Git, системи контролю версій, добре інтегрованої з GitHub. Для зручності демонстрації спочатку збережіть файл веб-сайту в папці dWeb на робочому столі
  • Відвідайте Git-scmзавантажте та встановіть останню версію Git.
  • Запустіть Git Bash із меню «Пуск» комп’ютера та введіть: 
     cd desktop/dWeb

    Ця команда дозволяє запускати Git у папці, яку ми створили на робочому столі, щоб ініціалізувати локальне сховище.

  • Потім виконайте наступні команди одну за одною: 
     git init 
    git add . 
    git commit -m "first commit" 
    git remote add origin [url].git

    Де [url] представляє адресу вашого сховища GitHub. У нашому випадку це:

     git remote add origin https:

    • Виконання цих команд ініціалізує приховану папку .git у папці вашого веб-сайту, додає всі файли вашого веб-сайту до папки .git, фіксує їх для завантаження та, зрештою, завантажує файли у ваш репозиторій GitHub.

      9 зашифрованих служб електронної пошти та програм для кращої конфіденційності

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

    Пов’язування Fleek з GitHub

    Ось як зв’язати обліковий запис Fleek із GitHub

  • Відвідайте Флікувійдіть у свій обліковий запис і натисніть «Додати новий сайт».
  • Підключіть Fleek до GitHub і авторизуйте доступ до репозиторію з файлами вашого сайту.
  • Fleek відобразить вибране вами сховище. Перейдіть на вкладку Deploy Location, виберіть IPFS і натисніть Continue.
  • Виберіть структуру (якщо не впевнені, залиште інше) і розгорніть свій сайт.

    • Ваш сайт буде розгорнуто на IPFS.

    3. Підключіть свій домен Web3

    Незалежно від того, чи використовуєте ви локальний вузол IPFS чи онлайн-платформу, таку як Fleek, на цьому етапі ваш сайт має бути розгорнутим на IPFS, що означає, що у вас є хеш IPFS сайту.

    Отже, наступним кроком буде пов’язування вашого сайту з доменом Web3. Ви можете придбати його в будь-якого з найкращих реєстраторів Web3 на ринку. Вартість домену залежатиме від умов платформи, а для доменних систем на основі блокчейну ви стягуватимете мережеву плату за транзакцію, яка буде записана в блокчейні.

    З метою цієї демонстрації ми придбали домен elgwaro.eth на ENS.

    Пов’язування домену ENS із веб-сайтом IPFS

    Ось як пов’язати свій домен ENS із сайтом, розміщеним на IPFS

      Як зберегти конференц-дзвінок (і код доступу) як контакт
  • Відкрийте інформаційну панель ENS і перейдіть до розділу свого доменного імені.
  • Виберіть вкладку «Записи» та натисніть «Редагувати записи».
  • Виберіть «Інше», вставте посилання на незалежний веб-сайт IPFS і натисніть «Зберегти».
  • Вам буде запропоновано підключити свій гаманець, щоб авторизувати транзакцію, яка коштуватиме невелику комісію залежно від активності мережі.
  • Після завершення транзакції ваш домен Web3 буде пов’язано з вашим децентралізованим веб-сайтом.

    • Якщо ви використовуєте Fleek, ви можете підключити свій домен на інформаційній панелі Fleek.

  • Відкрийте інформаційну панель розгорнутого веб-сайту та натисніть «Додати власний домен».
  • Прокрутіть униз до інформації про ENS і натисніть «Додати ENS».
  • Введіть свій домен ENS, натисніть «Підтвердити», а потім підтвердьте.
  • Далі натисніть «Установити хеш вмісту». Вам потрібно буде підключити свій гаманець, щоб авторизувати транзакцію, сплативши невелику комісію залежно від активності мережі. Щоб успішно налаштувати зв’язок, переконайтеся, що підключений обліковий запис гаманця є контролером домену.

    • 4. Перейдіть на свій веб-сайт

    Після того, як ви успішно зв’яжете свій домен Web3 із децентралізованим веб-сайтом, ваш домен Web3 буде спрямовано на ваш децентралізований веб-сайт.

    Ви можете отримати доступ до нього за допомогою свого домену ENS +.link. Наприклад, у цьому випадку це elgwaro.eth.link. Тим не менш, під час використання браузера з підтримкою IPFS, як-от Brave, вам не потрібно включати .link у кінці URL-адреси.

    Ви успішно створили свій децентралізований веб-сайт.

    Вихід за рамки розробки Web2

    Оскільки з часом Інтернет стає все більш децентралізованим, кількість децентралізованих веб-сайтів, ймовірно, з часом перевищить ті, що розміщені на централізованих серверах. На щастя, перехід від розробки веб-сайтів Web2 до Web3 не такий складний, як здається. Тому, якщо ви думали про створення децентралізованого веб-сайту, стійкого до цензури, цей посібник може дати вам величезну перевагу.