Original article: "Teach you how to build a decentralized personal website step by step"
Author: Fat Tiger
For Web3 enthusiasts who are used to expressing their opinions, "hosting" content on Web2 social media such as Twitter does not seem to be "censorship-resistant" enough, and lacks a sense of exclusivity and independence; for Web3 protocol teams or project parties, the decentralization of the entire process from product services to front-end presentation is also more attractive in terms of narrative. Regardless of the motivation, making the official website of an individual or project 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 (taking the web page 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, practice, and suggestions. I will first introduce the concept and representatives of the decentralized network Dweb, then teach you how to deploy your personal business card website on Dweb, and finally, I will summarize the advantages and disadvantages of the current solution.
Considering the length of the article and the difficulty of getting started, in the practical part, I will only introduce the simplest method of deploying the Html webpage framework. At the same time, this tutorial mainly relies on the Fleek tool to achieve deployment. Fleek is powerful and can package a variety of webpage frameworks (such as WordPress, Next.js, etc.). Friends with a certain technical foundation can explore it in depth.
What is the decentralized web?
Decentralized website (Dweb), literally means a website deployed on a decentralized network.
From the perspective of components, Dweb is similar to traditional Internet websites, both of which require an entry point - a domain name, and a carrier - 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 more projects).
ENS (Ethereum Name Service) is a distributed, scalable, and open naming system based on Ethereum; in layman's terms, it is a blockchain domain name system.
The idea of IPFS is to store data in nodes around the world that can be run by anyone; it is essentially a censorship-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 the most recently updated source, and the actual experience will be faster and more reliable.
For further explanation of ENS and IPFS, interested readers can read "One article to learn about ENS, the most successful non-financial Ethereum application to date" and "In-depth analysis of IPFS: the underlying protocol of the new generation of the Internet."
With the joint support of ENS and IPFS, the distributed blockchain infrastructure can store content directly into smart contracts (containers).
Representative website based on ENS+IPFS
Although it is not obvious at the perceptual level, if users pay attention to some mainstream Web3 applications, they can find from their official documents that leading Web3 protocols such as Uniswap and 1inch have synchronized their websites to IPFS.
The ENS link addresses are 1inch.eth and uniswapexchange.eth. 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：1inch. eth. link/" _src="https://1inch. eth. link/">https://1inch.eth.link/
uniswap：https://uniswapexchange.eth.link。
For more websites deployed with ENS+IPFS technology, Almonit has compiled Dweb websites. The link is as follows: https://almonit.eth.link/#/discover/. Interested readers are welcome to visit and check it out.
How to deploy
In this article, we mainly use the solution provided by the Fleek tool. The advantages of this solution are simple deployment and support for 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 of the many functions supported by Fleek - the HTML page framework deployment solution, and explains it step by step. I hope that novices can quickly get started after reading it; for experts, it can also serve as a starting point for discussion.
I just mentioned that you need to prepare an Html web page, so you will use notion to generate this Html web page file. The main reason is that notion is easy to operate and has its own html export function, so it can be used as a visual Html web page maker.
Since the tool Fleek uses automatic synchronization with Github, you also need to prepare a Github account and the corresponding Repo (library).
Deployment to the IPFS network itself does not require a domain name. Uploading to the network will generate a hash, similar to the IP address in Web2, so you also need to prepare an ENS to map this IPFS hash.
To summarize, prepare three things in advance:
A github account; an ENS domain name, a corresponding wallet and a small amount of ETH as gas; a notion account and 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 the prepared page from the notion export function. Due to the limited support of IPFS for static web pages, we can only export a single page 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 computer. After decompressing it locally, you will get a folder and an Html file as shown in the figure below. Rename the file ending with "xxx.html" to "index.html".
2. Upload to Github
2.1 Go to the GitHub homepage, log in (if you don’t have an account, you need to register one), enter the following page, and click “New” to create a new Repo.
2.2 For this newly created Repo, it is recommended to use a Private library, because this can prevent others except the Fleek tool and the creator from accessing the original file.
2.3 Next, you need to use the Github client (if there is no Github client on your computer, you need to download and install one). After logging in to the Github client, return to the Github webpage just created and click "Set up in desktop" in the blue box.
2.4 After installing the desktop client, the following prompt will appear.
2.5 Go 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 the local directory.
2.5 After the copy is complete, you will see the following prompt when you return to the client. Fill in some description and click commit.
2.6 Click push origin to push the document to the Github Repo.
3. Create a new project using Fleek
“Fleek is a set of tools that includes everything you need to seamlessly build modern sites and applications on the open web and its protocols.”
Simply put, Fleek is a tool that makes it easy to deploy personal websites on a decentralized network.
3.1 You need to register when you enter Fleek for the first time. It is recommended to use Etheretrum 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 homepage. Next, you need to create a website project.
3.3 We select the Github Repo created in step 2 and proceed to the next step.
3.4 Select IPFS in the Hosting services option and select Cointinue to proceed to the next step.
3.5 Select the website you just created and enter the detailed configuration page.
3.6 Now the website has been deployed on IPFS. The Fleek tool has also thoughtfully associated a mapping domain name, as shown in the figure.
3.7 Next, bind the ENS domain name, select "Settings", and find "ENS".
3.8 Scroll down to “Add ENS”.
3.9 Enter the ENS domain name.
3.10 Enter the following interface and click the ENS address you just entered again. Select "Set content hash" and finally pay a gas fee to complete the binding.
3.11 At this time, we can see that the previously gray ENS domain name has turned blue, and the binding is successful.
3.12 For browsers that support decentralized domain names, such as brave, Little Fox Wallet mobile APP, etc., you can directly enter ENS, such as yyzfish.eth I set here, to directly access the deployed Dweb. For Web2 browsers, ENS also has a compatible solution, and you can directly access https://yyzfish.eth.link/.
Some thoughts during the website building process
After going through this process, I realized some of the advantages and disadvantages of decentralized websites compared to traditional websites.
Advantage
Low cost and stable
Traditional Web2 web pages need to be deployed on a server, which not only requires maintenance, but the cost 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 the cost will not change regardless of the number of users.
A more complete Web3 narrative
In the early days, it was difficult to deploy a complete project (frontend + smart contract) on a network such as Ethereum at the same time due to the high gas cost on the chain. Now, with the improvement of the IPFS network protocol, the huge front-end interactive page also has its own exclusive decentralized network. This is in line with the true "decentralization" concept in terms of narrative. Currently, leading DeFi protocols such as Uniswap and 1inch have been deployed on decentralized networks one after another. In the future, perhaps full deployment on decentralized networks will become the standard for Web3 projects.
Cool for individuals
ENS domain names are very popular on social media (such as Twitter). Many KOLs have the nickname xxx.eth. On this basis, further extension has been achieved - deploying one's own blog to the IPFS network and using the ENS domain name as the entrance, which will be a cool thing for crypto enthusiasts.
Anonymity and Privacy
Since Dweb fully considered the combination of "decentralization" and "privacy" in the early design stage, it actually has some similarities with the Tor network, both of which have the characteristics of untraceability and anonymity.
insufficient
Compatibility with Web2 still needs to be improved
Although the tool already supports many mainstream frameworks, it does not support all of them. Dynamic web page frameworks such as PHP are still not supported. The overall compatibility needs to be improved.
Not friendly to domestic users
Since the current number of IPFS nodes is far from the number planned in the white paper (roadmap), there are certain obstacles to accessing Dweb in China.
I hope to see more complete solutions and technological iterations in the future.
