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

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

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

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

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

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

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

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

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

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

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

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

Після налаштування відкрийте інформаційну панель IPFS, натисніть «Імпортувати» та завантажте папку веб-сайту.

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

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

Відкрийте інформаційну панель GitHub і створіть нове сховище. Далі завантажте файли свого веб-сайту в репозиторій GitHub за допомогою Git, системи контролю версій, добре інтегрованої з GitHub. Для зручності демонстрації спочатку збережіть файл веб-сайту в папці dWeb на робочому столі

 cd desktop/dWeb  

 git init 
git add . 
git commit -m "first commit" 
git remote add origin [url].git 

 git remote add origin https: 

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

Це найефективніший спосіб завантажити кілька файлів і папок веб-сайту в репозиторій 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 і натисніть «Зберегти».

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

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

Відкрийте інформаційну панель розгорнутого веб-сайту та натисніть «Додати власний домен».

Прокрутіть униз до інформації про ENS і натисніть «Додати ENS».

Введіть свій домен ENS, натисніть «Підтвердити», а потім підтвердьте.

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

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

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

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

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

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

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