For Web3 enthusiasts who have the habit of outputting their opinions, "hosting" content on Web2 social media such as Twitter does not seem to be "resistance to censorship" enough, and it also lacks a sense of exclusivity and independence; for Web3 protocol teams or project parties In other words, the decentralization of the whole process from product service to front-end presentation is also more attractive in terms of narrative. Regardless of the motivation, making the official website of an individual or a project as a decentralized website has certain advantages in terms of cost, anonymity, and privacy protection.
Therefore, this article will take you step by step to deploy your personal website (take the webpage generated by Notion as an example) on IPFS, and build a truly decentralized website (Dweb) that belongs only to you.
The article is divided into three parts: introduction, practical operation and suggestion. I will first introduce the concept and representative of the decentralized network Dweb, and then teach how to deploy a personal business card website to Dweb. Finally, I will summarize the advantages and disadvantages of the current solution.
first level title
What is a decentralized website?
A decentralized website (Dweb) is literally a website deployed on a decentralized network.
From the perspective of components, Dweb is similar to traditional Internet websites, and both need to have an entrance—a domain name, and a hosting entity—a hosting server. In the Web3 world, the representative projects corresponding to these two "functions" are ENS, IPFS and Arweave (this article focuses on the former, which is also the solution used by many projects).
ENS (Ethereum Name Service) is a distributed, scalable, and open naming system based on Ethereum; in layman's terms, it is the blockchain domain name system.
The idea of IPFS is to distribute and store data on nodes that can be run by anyone around the world; it is essentially a review-resistant, peer-to-peer data storage service. In addition, because IPFS distributes data across nodes and points to specific data, it can ensure that resources come from recently updated sources, and the actual experience will be faster and more reliable.
For further interpretation of ENS and IPFS, interested readers can read "Learn about ENS, the most successful non-financial Ethereum application to date》《In-depth analysis of IPFS: a new generation of Internet underlying protocol》。
first level title
Representative website based on ENS+IPFS
Although it is not obvious at the perception level, if users pay attention to some mainstream Web 3 applications, they can find from their official documents that leading Web 3 protocols such as Uniswap and 1inch have synchronized their websites to IPFS.
Its ENS link addresses are 1inch.eth and uniswapexchange.eth respectively. For native Web3 browsers, you can directly enter the above addresses to access. For non-native browsers, you can use compatible addresses to access:
1inch：https://1inch.eth.link/
uniswap：https://uniswapexchange.eth.link。
For more websites deployed with ENS+IPFS technology, Almonit has organized Dweb website, the links are as follows:https://almonit.eth.link/#/discover/first level title
text
In this article, we mainly use the solution provided by the Fleek tool. The advantage of this solution is that it is easy to deploy and supports multiple web frameworks. In addition to supporting Html pages, it also supports web frameworks in multiple languages such as Next.js, Hugo.js, and Wordpress.
This article focuses on the simplest one of the many functions supported by Fleek - the Html page framework deployment scheme, and explains it step by step. I hope Xiaobai can get started quickly after reading it; for experts, it can also play a role in attracting jade. .
I just mentioned that an Html web page needs to be prepared, so notion will be used to generate this Html web page file. The main reason is that notion is easy to operate and has its own html export function, which can be used as a visual Html web page creator.
Since Fleek, the tool used, automatically synchronizes Github, it is also necessary to prepare a Github account and the corresponding Repo (library).
Deploying to the IPFS network itself does not require a domain name. Uploading to the network will generate a hash, which is similar to the IP address in Web2. Therefore, it is also necessary to prepare an ENS to map this IPFS hash.
To summarize, prepare three things in advance:
a github account;
An ENS domain name, the corresponding wallet and a small amount of ETH as gas;
A notion account, and make a personal profile page.
1. Export Html from Notion
1.1 Design a profile in notion, the Demo is as shown below.
1.2 Export our prepared pages from the notion export function. Due to the limited ability of IPFS to support static web pages, we can only choose single-page export for the time being. (Advanced players can also implement multi-level pages - subpages).
1.3 After obtaining the exported compressed file, it will be automatically downloaded to the local. After decompressing locally, you will get a folder and an Html file as shown in the figure below. Rename the file ending in "xxx.html" to "index.html".
2. Upload to Github
2.1 Access toGitHubOn the homepage, log in (if you don’t have an account, you need to register an account) to enter the following page, click “New” to create a new Repo.
2.2 For this new Repo, it is recommended to adopt the method of Private (privacy) library. Because this prevents anyone other than the Fleek tool and creator from accessing the original file.
2.3 Next, you need to useGithub client(If you don't have a Github client on your computer, you need to download and install one). After logging in to the Github client, go back to the Github web page just created, and click "Set up in desktop" in the blue box (open the client on the desktop).
2.4 After installing the desktop client, the following prompt will appear.
2.5 Come to the desktop client, follow the prompts to set a local directory and record the path of this local directory. Copy the file we downloaded in the first step "Export data from Notion" to this local directory.
2.5 After the copy is completed, the following prompt will appear when returning to the client. Fill in some description and hit commit.
2.6 Click push origin to push the document to Github Repo.
3. Use Fleek to create a new project
"Fleek is a suite of tools that includes everything needed to seamlessly build modern sites and applications on the open web and its protocols."
Simply put, Fleek is a tool that can easily deploy personal websites to decentralized networks.
3.1 The first time you enter Fleek, you need to register. It is recommended to use the Ethereum Little Fox Wallet to register and log in directly with one click, which is more convenient (you can also use Github or Email to register).
3.2 After registering and logging in, you will come to the project home page, and then you need to create a website project.
3.3 We choose the Github Repo created in the second step just now, and go to the next step.
3.4 We choose IPFS in the Hosting services option, and choose Cointinue to go to the next step.
3.5 Select the newly created website to enter the detailed configuration page.
3.6 Now that the website has been deployed on IPFS, the Fleek tool has intimately associated a mapped domain name, as shown in the figure.
3.7 Next, bind the ENS domain name, select "Setting", and find "ENS".
3.8 Pull down to "Add ENS".
3.9 Enter the ENS domain name.
3.10 Enter the following interface, and click the ENS address just entered again. And select "Set content hash", and finally pay a gas fee to complete the binding.
3.11 At this point, we can see that the gray ENS domain name has changed to blue, and the binding is successful.
3.12 For browsers that support decentralized domain names, such as brave, Fox Wallet mobile app, etc., directly enter ENS, such as the yyzfish.eth I set here, to directly access the deployed Dweb. For Web2 browsers, ENS also has a compatible solution , you can directly accesshttps://yyzfish.eth.link/ 。
text
After going through this process, I realized some advantages and disadvantages of decentralized websites compared with traditional websites.
Advantage
Low cost and stable
Traditional Web2 web pages need to be deployed on the server, which not only requires maintenance, but also increases with the number of users. However, through the process of deploying to Web3 in this article, it is not difficult to find that the cost of deploying to IFPS is extremely cheap (currently free), And regardless of the size of the user, the cost will not change.
A more complete Web3 narrative
In the early days, due to the high gas on the chain, it was difficult to deploy the complete project (front-end + smart contract) on the Ethereum network at the same time. Now, with the improvement of the IPFS network protocol, the huge front-end interactive pages also have their own exclusive decentralized network. This is narratively in line with the true idea of "decentralization". At present, top DeFi protocols such as Uniswap and 1inch have been deployed on the decentralized network one after another. In the future, the complete deployment to the decentralized network may become the standard configuration of the Web3 project.
cool for a person
The ENS domain name is very popular on social media (such as Twitter), and many KOL nicknames are xxx.eth, and a further extension has been achieved on this basis - deploying your own blog to the IPFS network, and using the ENS domain name as the entrance , would be a cool thing for crypto enthusiasts.
Anonymity and Privacy Protection
Since Dweb fully considered the combination of "decentralization" and "privacy" in the early design stage, it is actually somewhat similar to the Tor network, both of which have the characteristics of untraceability and anonymity.
insufficient
Compatibility for Web 2 still needs to be improved
Although the tool already supports many mainstream frameworks, not all of them are supported. Dynamic web frameworks like PHP are still not supported. Overall compatibility needs to be improved.
Unfriendly to domestic users
Since the current number of IPFS nodes is far from reaching the number (roadmap) planned in the white paper, there are certain obstacles to the access of Dweb in China.
I hope to see more perfect solutions and technology iterations in the future.
