Tekst oryginalny: „Nauczę Cię krok po kroku tworzenia zdecentralizowanej osobistej witryny internetowej”

Autor: Gruby Tygrys

Dla entuzjastów Web3, którzy mają zwyczaj publikowania opinii, „hosting” treści w mediach społecznościowych Web2, takich jak Twitter, nie wydaje się wystarczająco „odporny na cenzurę” i brakuje im poczucia ekskluzywności i niezależności; w przypadku zespołów obsługujących protokół Web3 lub stron projektu Innymi słowy, decentralizacja całego procesu od usług produktowych po prezentację front-end jest również atrakcyjniejsza pod względem narracyjnym. Bez względu na motywację, uczynienie z oficjalnej strony osobistej lub projektu zdecentralizowanej strony internetowej ma pewne zalety pod względem kosztów, anonimowości i ochrony prywatności.

Dlatego też ten artykuł poprowadzi Cię krok po kroku przez wdrożenie Twojej osobistej witryny internetowej (na przykładzie strony wygenerowanej przez Notion) w IPFS w celu zbudowania prawdziwie zdecentralizowanej witryny internetowej (Dweb), która będzie należała tylko do Ciebie.

Artykuł podzielony jest na trzy części: wprowadzenie, działanie praktyczne i sugestie. Najpierw przedstawię koncepcję i reprezentację zdecentralizowanej sieci Dweb, a następnie nauczę krok po kroku, jak dodać osobistą wizytówkę do Dweb. Na koniec podsumuję również zalety i wady obecnego rozwiązania.

Biorąc pod uwagę długość artykułu i trudność rozpoczęcia, w części praktycznej przedstawię jedynie najprostszą metodę wdrożenia frameworku strony internetowej HTML. Jednocześnie ten samouczek opiera się głównie na narzędziu Fleek do wdrażania wdrażania. Fleek jest potężny i może pakować różne frameworki stron internetowych (takie jak WordPress, Next.js itp.). Znajomi posiadający pewne podstawy techniczne mogą go dogłębnie poznać.

Co to jest zdecentralizowana witryna internetowa?

Zdecentralizowana witryna internetowa (Dweb) dosłownie odnosi się do witryny internetowej wdrożonej w zdecentralizowanej sieci.

Z punktu widzenia komponentów Dweb przypomina tradycyjne strony internetowe, wszystkie muszą mieć wejście - nazwę domeny i podmiot hostingowy - serwer hostingowy. W świecie Web3 reprezentatywnymi projektami odpowiadającymi tym dwóm „funkcjom” są ENS, IPFS i Arweave (w tym artykule skupiono się na tym pierwszym, które jest również rozwiązaniem stosowanym w wielu projektach).

ENS (Ethereum Name Service) to rozproszony, skalowalny i otwarty system nazewnictwa oparty na Ethereum; w laickim rozumieniu jest to system nazw domen typu blockchain.

Ideą IPFS jest dystrybucja i przechowywanie danych w węzłach, które może uruchomić każdy na całym świecie; jest to zasadniczo odporna na cenzurę usługa przechowywania danych typu peer-to-peer. Ponadto, ponieważ IPFS dystrybuuje dane pomiędzy węzłami i wskazuje konkretne dane, może zapewnić, że zasoby pochodzą z niedawno zaktualizowanych źródeł, a rzeczywiste działanie będzie szybsze i bardziej niezawodne.

Aby uzyskać dalsze wyjaśnienia dotyczące ENS i IPFS, zainteresowani czytelnicy mogą przeczytać „Jeden artykuł, aby dowiedzieć się o ENS, najskuteczniejszej jak dotąd niefinansowej aplikacji Ethereum” oraz „Dogłębna analiza IPFS: podstawowy protokół nowej generacji Internetu „.

Rozproszona infrastruktura blockchain, obsługiwana przez ENS i IPFS, może przechowywać treści bezpośrednio w inteligentnych kontraktach (kontenerach).

Reprezentatywna strona internetowa oparta na ENS+IPFS

Chociaż na poziomie percepcyjnym nie jest to oczywiste, jeśli użytkownicy zwrócą uwagę na niektóre popularne aplikacje Web3, z oficjalnych dokumentów mogą dowiedzieć się, że wiodące protokoły Web3, takie jak Uniswap i 1inch, zsynchronizowały swoje strony internetowe z IPFS.

Adresy łączy ENS to odpowiednio 1inch.eth i uniswapexchange.eth. W przypadku natywnych przeglądarek Web3 można bezpośrednio wprowadzić powyższe adresy, aby uzyskać dostęp. W przypadku przeglądarek innych niż natywne można uzyskać dostęp za pomocą zgodnych adresów:

1 cal：1 cal. eth. link/" _src="https://1inch. eth. link/">https://1inch.eth.link/

uniswap：https://uniswapexchange.eth.link.

Aby uzyskać więcej stron internetowych wdrożonych przy użyciu technologii ENS+IPFS, Almonit zorganizował strony internetowe Dweb. Link jest następujący: https://almonit.eth.link/#/discover/. Zainteresowanych czytelników zapraszamy do odwiedzenia.

Jak wdrożyć

W tym artykule korzystamy głównie z rozwiązania dostarczonego przez narzędzie Fleek. Zaletą tego rozwiązania jest to, że jest proste we wdrożeniu i obsługuje wiele frameworków internetowych. Oprócz obsługi stron HTML obsługuje również frameworki internetowe w wielu językach takie jak Next.js, Hugo.js, Wordpress itp.

W tym artykule skupiono się na najprostszej z wielu funkcji obsługiwanych przez Fleek – rozwiązaniu do wdrażania frameworka strony HTML i przedstawiono szczegółowe wyjaśnienie. Mam nadzieję, że nowicjusze będą mogli szybko zacząć po przeczytaniu, a eksperci również służyć jako punkt wyjścia do przyciągania nowych pomysłów.

Właśnie wspomniałem, że musisz przygotować stronę internetową w formacie HTML, więc do wygenerowania pliku strony internetowej HTML zostanie użyty program Concept. Głównym powodem jest to, że koncepcja jest łatwa w obsłudze i posiada własną funkcję eksportu do formatu HTML, dzięki czemu można go używać jako wizualny kreator stron internetowych HTML.

Ponieważ narzędzie, z którego korzysta Fleek, korzysta z automatycznej synchronizacji z Githubem, należy również przygotować konto Github i odpowiednie Repo (bibliotekę).

Samo wdrożenie w sieci IPFS nie wymaga nazwy domeny. Przesyłanie do sieci spowoduje wygenerowanie skrótu podobnego do adresu IP w Web2, dlatego należy przygotować ENS do mapowania tego skrótu IPFS.

Podsumowując, przygotuj z góry trzy rzeczy:

Konto Github; nazwa domeny ENS, odpowiedni portfel i niewielka ilość ETH jako konto koncepcyjne i utwórz stronę profilu osobistego. 1. Eksportuj HTML z Notion

1.1 Zaprojektuj koncepcyjny profil. Wersja demonstracyjna jest pokazana poniżej.

1.2 Eksportuj przygotowaną przez nas stronę za pomocą funkcji eksportu koncepcji Ze względu na ograniczone możliwości IPFS w zakresie obsługi statycznych stron internetowych, na razie możemy wyeksportować tylko jedną stronę. (Zaawansowani gracze mogą także implementować strony wielopoziomowe – podstrony).

1.3 Po otrzymaniu wyeksportowanego skompresowanego pliku zostanie on automatycznie pobrany lokalnie. Po lokalnej dekompresji otrzymasz folder i plik HTML, jak pokazano poniżej. Zmień nazwę pliku kończącą się na „xxx.html” na „index.html”.

2. Prześlij do Githuba

2.1 Przejdź do strony głównej GitHub, zaloguj się (jeśli nie masz konta, musisz je zarejestrować), wejdź na następną stronę i kliknij „Nowe”, aby utworzyć nowe Repo.

2.2 Dla tego nowo utworzonego Repo zaleca się korzystanie z biblioteki Prywatnej (prywatności). Uniemożliwia to komukolwiek innemu niż narzędzie Fleek i twórca dostęp do oryginalnego pliku.

2.3 Następnie musisz użyć klienta Github (jeśli na Twoim komputerze nie ma klienta Github, musisz go pobrać i zainstalować). Po zalogowaniu się do klienta Github wróć do właśnie utworzonej strony internetowej Github i kliknij „Konfiguruj na pulpicie” w niebieskim polu (otwórz klienta na pulpicie).

2.4 Po zainstalowaniu klienta stacjonarnego pojawi się następujący monit.

2.5 Przejdź do klienta stacjonarnego, postępuj zgodnie z instrukcjami, aby ustawić katalog lokalny i zapisz ścieżkę do katalogu lokalnego. Skopiuj plik, który pobraliśmy w pierwszym kroku „Eksportuj dane z Notion” do katalogu lokalnego.

2.5 Po zakończeniu kopiowania po powrocie do klienta pojawi się następujący monit. Wpisz opis i kliknij zatwierdź.

2.6 Kliknij opcję Push Origin, aby przekazać dokument do Github Repo.

3. Utwórz nowy projekt za pomocą Fleek

„Fleek to zestaw narzędzi zawierający wszystko, czego potrzebujesz do płynnego tworzenia nowoczesnych witryn i aplikacji w otwartej sieci i jej protokołach”.

Mówiąc najprościej, Fleek to narzędzie, które może z łatwością wdrażać osobiste strony internetowe w zdecentralizowanych sieciach.

3.1 Przy pierwszym wejściu do Fleek zaleca się skorzystanie z portfela Etheretrum Little Fox w celu bezpośredniej rejestracji i zalogowania się jednym kliknięciem, co jest wygodniejsze (do rejestracji można również użyć Githuba lub poczty elektronicznej).

3.2 Po zarejestrowaniu się i zalogowaniu przejdziesz na stronę główną projektu. Następnie musisz stworzyć projekt strony internetowej.

3.3 W drugim kroku wybieramy właśnie utworzone repozytorium Github i przechodzimy do następnego kroku.

3.4 W opcji Usługi hostingowe wybieramy IPFS i wybieramy opcję Kontynuuj, aby przejść do kolejnego kroku.

3.5 Wybierz właśnie utworzoną witrynę i wejdź na stronę szczegółowej konfiguracji.

3.6 Teraz, gdy witryna internetowa została wdrożona w systemie IPFS, narzędzie Fleek w przemyślany sposób powiązało zmapowaną nazwę domeny, jak pokazano na rysunku.

3.7 Następnie powiąż nazwę domeny ENS, wybierz „Ustawienia” i znajdź „ENS”.

3.8 Przewiń w dół do „Dodaj ENS”.

3.9 Wprowadź nazwę domeny ENS.

3.10 Przejdź do poniższego interfejsu i ponownie kliknij wprowadzony przed chwilą adres ENS. I wybierz „Ustaw skrót zawartości”, a na koniec zapłać opłatę za gaz, aby zakończyć wiązanie.

3.11 W tym momencie widzimy, że nazwa domeny ENS, która wcześniej była szara, zmieniła kolor na niebieski, a powiązanie zakończyło się pomyślnie.

3.12 W przypadku przeglądarek obsługujących zdecentralizowane nazwy domen, takich jak braw, aplikacja mobilna Little Fox Wallet itp., możesz bezpośrednio wejść do ENS, takiego jak yyzfish.eth, które tutaj ustawiłem, aby uzyskać bezpośredni dostęp do wdrożonego Dweb. W przypadku przeglądarek Web2 ENS również jest kompatybilny rozwiązania, możesz uzyskać bezpośredni dostęp do https://yyzfish.eth.link/.

Kilka przemyśleń w trakcie tworzenia strony internetowej

Po przejściu przez ten proces zdałem sobie sprawę z niektórych zalet i wad zdecentralizowanych witryn internetowych w porównaniu z tradycyjnymi witrynami internetowymi.

Zalety

Niski koszt i stabilność

Tradycyjne strony internetowe Web2 muszą zostać wdrożone na serwerze, co nie tylko wymaga konserwacji, ale także koszty rosną wraz z liczbą użytkowników. Jednak w procesie wdrażania do Web3 opisanym w tym artykule nietrudno stwierdzić, że jest to koszt wdrożenia do IFPS jest wyjątkowo tanie (obecnie bezpłatne). I niezależnie od liczby użytkowników, koszt się nie zmieni.

Pełniejsza narracja Web3

Na początku wdrożenie całego projektu (frontend + inteligentny kontrakt) w sieci takiej jak Ethereum było trudne ze względu na duże obciążenie łańcucha. Teraz, wraz z udoskonaleniem protokołu sieciowego IPFS, ogromna interaktywna strona front-end ma również własną dedykowaną zdecentralizowaną sieć. Jest to narracyjnie spójne z ideą prawdziwej „decentralizacji”. Obecnie w sieciach zdecentralizowanych wdrożono wiodące protokoły DeFi, takie jak Uniswap i 1inch. W przyszłości pełne wdrożenie w sieciach zdecentralizowanych może stać się standardową funkcją projektów Web3.

fajne osobiście

Nazwy domen ENS są bardzo popularne w mediach społecznościowych (takich jak Twitter). Wielu KOL-ów ma pseudonim xxx.eth. Na tej podstawie rozszerzyli swoje blogi na sieć IPFS i używali nazwy domeny ENS jako wejścia będzie fajną rzeczą dla entuzjastów kryptowalut.

Anonimowość i ochrona prywatności

Ponieważ Dweb w pełni uwzględnił połączenie „decentralizacji” i „prywatności” na wczesnym etapie projektowania, w rzeczywistości jest ona nieco podobna do sieci Tor i ma cechy niewykrywalności i anonimowości.

niewystarczający

Nadal wymaga poprawy kompatybilność z Web2

Chociaż narzędzie obsługuje już wiele popularnych frameworków, nie wszystkie z nich są obsługiwane. Dynamiczne frameworki internetowe, takie jak PHP, nadal nie są obsługiwane. Należy poprawić ogólną kompatybilność.

Nieprzyjazny dla użytkowników domowych

Ponieważ obecna liczba węzłów IPFS jest daleka od liczby zaplanowanej w białej księdze (mapa drogowa), istnieją pewne przeszkody w krajowym dostępie Dweb.

Mam nadzieję, że w przyszłości zobaczę więcej kompletnych rozwiązań i iteracji technologicznych.