Исходный текст: «Научим вас шаг за шагом создать децентрализованный персональный веб-сайт».
Автор: Толстый Тигр
Для энтузиастов Web3, имеющих привычку высказывать свое мнение, «хостинг» контента в социальных сетях Web2, таких как Twitter, кажется недостаточно «устойчивым к цензуре» и лишен чувства исключительности и независимости для команд протокола Web3 или участников проекта; Другими словами, децентрализация всего процесса от обслуживания продукта до внешней презентации также более привлекательна с точки зрения повествования. Независимо от вашей мотивации, превращение личного или официального веб-сайта проекта в децентрализованный веб-сайт имеет определенные преимущества с точки зрения стоимости, анонимности и защиты конфиденциальности.
Таким образом, в этой статье вы шаг за шагом развернете свой личный веб-сайт (на примере веб-страницы, созданной Notion) на IPFS, чтобы создать по-настоящему децентрализованный веб-сайт (Dweb), принадлежащий только вам.
Статья разделена на три части: введение, практическая работа и предложения. Сначала я представлю концепцию и представление децентрализованной сети Dweb, а затем пошагово научу, как добавить в Dweb личный сайт-визитку. Наконец, я также суммирую преимущества и недостатки текущего решения.
Учитывая объем статьи и сложность начала работы, в практической части я представлю только самый простой метод развертывания HTML-фреймворка веб-страницы. В то же время в этом руководстве для реализации развертывания в основном используется инструмент Fleek. Fleek является мощным инструментом и может включать в себя различные фреймворки веб-страниц (такие как WordPress, Next.js и т. д.). Друзья, обладающие определенной технической базой, могут изучить его более подробно.
Что такое децентрализованный веб-сайт?
Децентрализованный веб-сайт (Dweb) буквально означает веб-сайт, развернутый в децентрализованной сети.
С точки зрения компонентов Dweb похож на традиционные интернет-сайты. Все они должны иметь вход — доменное имя и предмет хостинга — хостинг-сервер. В мире Web3 типичными проектами, соответствующими этим двум «функциям», являются ENS, IPFS и Arweave (в этой статье основное внимание уделяется первому, который также является решением, используемым во многих проектах).
ENS (Служба имен Ethereum) — это распределенная, масштабируемая и открытая система именования, основанная на Ethereum, с точки зрения непрофессионала, это система доменных имен блокчейна.
Идея IPFS заключается в распространении и хранении данных на узлах, которыми может управлять кто угодно по всему миру; по сути, это устойчивый к цензуре одноранговый сервис хранения данных. Кроме того, поскольку IPFS распределяет данные по узлам и указывает на конкретные данные, это может гарантировать, что ресурсы поступают из недавно обновленных источников, а фактическая работа будет быстрее и надежнее.
Для получения дополнительных объяснений ENS и IPFS заинтересованные читатели могут прочитать «Одна статья, чтобы узнать о ENS, самом успешном нефинансовом приложении Ethereum на сегодняшний день» и «Углубленный анализ IPFS: базовый протокол нового поколения Интернета». ".
Распределенная инфраструктура блокчейна, основанная на ENS и IPFS, может хранить контент непосредственно в смарт-контрактах (контейнерах).
Представительский сайт на базе ENS+IPFS
Хотя на уровне восприятия это неочевидно, если пользователи обращают внимание на некоторые основные приложения Web3, они могут обнаружить в своих официальных документах, что ведущие протоколы Web3, такие как Uniswap и 1inch, синхронизировали их веб-сайты с IPFS.
Адреса ссылок ENS — 1inch.eth и uniswapexchange.eth соответственно. Для собственных браузеров Web3 вы можете напрямую ввести указанные выше адреса для доступа. Для неродных браузеров вы можете использовать совместимые адреса для доступа:
1inch：1inch. eth. ссылка/" _src="https://1inch. eth. ссылка/">https://1inch. eth. ссылка/
uniswap: https://uniswapexchange.eth.link。
Для получения дополнительных веб-сайтов, развернутых с использованием технологии ENS+IPFS, компания Almonit организовала веб-сайты Dweb. Ссылка следующая: https://almonit.eth.link/#/discover/. Заинтересованные читатели могут посетить их.
Как развернуть
В этой статье мы в основном используем решение, предоставленное инструментом Fleek. Преимущество этого решения заключается в том, что оно просто в развертывании и поддерживает несколько веб-фреймворков. Помимо поддержки HTML-страниц, оно также поддерживает веб-фреймворки на нескольких языках. такие как Next.js, Hugo.js и Wordpress.
В этой статье основное внимание уделяется самой простой из многих функций, поддерживаемых Fleek — решению для развертывания структуры HTML-страниц, и дается пошаговое объяснение. Я надеюсь, что новички смогут быстро приступить к работе после ее прочтения, а также для экспертов; служить отправной точкой для привлечения новых идей.
Я только что упомянул, что вам необходимо подготовить веб-страницу в формате HTML, поэтому для создания этого файла веб-страницы в формате HTML будет использоваться понятие. Основная причина заключается в том, что понятием легко управлять и оно имеет собственную функцию экспорта в HTML, поэтому вы можете использовать его в качестве. визуальный конструктор веб-страниц Html.
Поскольку инструмент, который использовал Fleek, использует автоматическую синхронизацию с Github, вам также необходимо подготовить учетную запись Github и соответствующий репо (библиотеку).
Для развертывания в сети IPFS не требуется имя домена. При загрузке в сеть будет сгенерирован хеш, аналогичный IP-адресу в Web2, поэтому необходимо подготовить ENS для сопоставления этого хеша IPFS.
Подводя итог, заранее подготовьте три вещи:
Учетная запись GitHub; доменное имя ENS, соответствующий кошелек и небольшое количество ETH в качестве условной учетной записи, а также создать страницу личного профиля. 1. Экспорт HTML из Notion
1.1 Создайте теоретический профиль. Демо-версия показана ниже.
1.2 Экспортируйте подготовленную нами страницу с помощью функции экспорта концепции. Из-за ограниченных возможностей IPFS по поддержке статических веб-страниц на данный момент мы можем экспортировать только одну страницу. (Продвинутые игроки также могут реализовать многоуровневые страницы – подстраницы).
1.3 После получения экспортированного сжатого файла он будет автоматически загружен локально. После локальной распаковки вы получите папку и HTML-файл, как показано ниже. Переименуйте файл, заканчивающийся на «xxx.html», в «index.html».
2. Загрузите на Github.
2.1 Перейдите на домашнюю страницу GitHub, войдите в систему (если у вас нет учетной записи, вам необходимо зарегистрировать учетную запись), перейдите на следующую страницу и нажмите «Создать», чтобы создать новый репозиторий.
2.2 Для этого вновь созданного репо рекомендуется использовать частную (конфиденциальность) библиотеку. Это не позволяет никому, кроме инструмента Fleek и создателя, получить доступ к исходному файлу.
2.3 Далее вам необходимо использовать клиент Github (если на вашем компьютере нет клиента Github, вам необходимо его скачать и установить). После входа в клиент Github вернитесь на только что созданную веб-страницу Github и нажмите «Настроить на рабочем столе» в синем поле (откройте клиент на рабочем столе).
2.4 После установки настольного клиента появится следующее приглашение.
2.5 Перейдите в клиент рабочего стола, следуйте инструкциям, чтобы установить локальный каталог, и запишите путь к локальному каталогу. Скопируйте файл, который мы скачали на первом этапе «Экспорт данных из Notion», в локальный каталог.
2.5 После завершения копирования при возвращении в клиент появится следующее приглашение. Заполните описание и нажмите «Зафиксировать».
2.6. Нажмите «Отправить источник», чтобы отправить документ в репозиторий Github.
3. Создайте новый проект с помощью Fleek.
«Fleek — это набор инструментов, который включает в себя все необходимое для беспрепятственного создания современных сайтов и приложений в открытой сети и ее протоколах».
Проще говоря, Fleek — это инструмент, который позволяет легко развертывать персональные веб-сайты в децентрализованных сетях.
3.1 При первом входе во Fleek необходимо зарегистрироваться. Рекомендуется использовать кошелек Etheretrum Little Fox для прямой регистрации и входа в систему одним щелчком мыши, что более удобно (вы также можете использовать Github или электронную почту для регистрации).
3.2 После регистрации и входа вы попадете на домашнюю страницу проекта. Далее вам необходимо создать веб-проект.
3.3 Мы выбираем репозиторий Github, только что созданный на втором шаге, и переходим к следующему шагу.
3.4 Мы выбираем IPFS в разделе «Услуги хостинга» и выбираем Cointinue, чтобы перейти к следующему шагу.
3.5 Выберите только что созданный веб-сайт и войдите на страницу подробной конфигурации.
3.6 Теперь, когда веб-сайт развернут на IPFS, инструмент Fleek также тщательно связал сопоставленное доменное имя, как показано на рисунке.
3.7 Далее привязываем доменное имя ENS, выбираем «Настройка» и находим «ENS».
3.8 Прокрутите вниз до пункта «Добавить ENS».
3.9 Введите доменное имя ENS.
3.10 Войдите в следующий интерфейс и еще раз щелкните только что введенный адрес ENS. И выберите «Установить хэш контента» и, наконец, заплатите комиссию за газ, чтобы завершить привязку.
3.11 На данный момент мы видим, что доменное имя ENS, которое ранее было серым, стало синим, и привязка прошла успешно.
3.12 Для браузеров, поддерживающих децентрализованные доменные имена, таких как Brave, мобильное приложение Little Fox Wallet и т. д., вы можете напрямую ввести ENS, например yyzfish.eth, который я установил здесь, для прямого доступа к развернутому Dweb. Для браузеров Web2 ENS также совместим. решения, вы можете получить прямой доступ к https://yyzfish.eth.link/.
Некоторые мысли в процессе создания сайта
Пройдя этот процесс, я осознал некоторые преимущества и недостатки децентрализованных веб-сайтов по сравнению с традиционными веб-сайтами.
Преимущества
Низкая стоимость и стабильность
Традиционные веб-страницы Web2 необходимо развертывать на сервере, что не только требует обслуживания, но и увеличивает затраты с увеличением количества пользователей. Однако в процессе развертывания в Web3, описанном в этой статье, нетрудно определить стоимость. развертывание в IFPS обходится крайне дешево (на данный момент бесплатно) и вне зависимости от количества пользователей стоимость не изменится.
Более полное описание Web3
Вначале было сложно одновременно развернуть полный проект (фронтенд + смарт-контракт) в такой сети, как Ethereum, из-за высокого уровня газа в цепочке. Теперь, с улучшением сетевого протокола IPFS, огромная интерфейсная интерактивная страница также имеет собственную выделенную децентрализованную сеть. С точки зрения повествования это соответствует идее истинной «децентрализации». В настоящее время ведущие протоколы DeFi, такие как Uniswap и 1inch, развернуты в децентрализованных сетях. В будущем полное развертывание в децентрализованных сетях может стать стандартной функцией проектов Web3.
круто лично
Доменные имена ENS очень популярны в социальных сетях (например, в Twitter). Многие KOL имеют псевдоним xxx.eth. На этом основании они расширили свои блоги до сети IPFS и использовали доменное имя ENS в качестве входа. быть крутой вещью для криптоэнтузиастов.
Анонимность и защита конфиденциальности
Поскольку Dweb полностью рассмотрел комбинацию «децентрализации» и «конфиденциальности» на ранней стадии проектирования, она на самом деле чем-то похожа на сеть Tor и имеет характеристики неотслеживаемости и анонимности.
недостаточный
Совместимость с Web2 все еще нуждается в улучшении.
Хотя инструмент уже поддерживает множество основных платформ, не все из них поддерживаются. Динамические веб-фреймворки, такие как PHP, по-прежнему не поддерживаются. Общая совместимость нуждается в улучшении.
Не дружелюбен к отечественным пользователям
Поскольку текущее количество узлов IPFS далеко от количества, запланированного в официальном документе (дорожной карте), существуют определенные препятствия для внутреннего доступа Dweb.
Я надеюсь увидеть более полные решения и технологические итерации в будущем.
