Currently, most of the Web we are consuming day to day is not decentralized. Some hosting providers, governments or outage could censor it or even remove it permanently from the Internet.
That's why we need Web3.
Web3 is all about decentralization and power given back to the users.
Let's say how we can put several Web3 pieces together in order to create your first fully decentralized, censorship-resistant and unstoppable website, built upon (Ethereum Name Service).
If you just want to follow a step-by-step guide, just go to the "How-to" section and skip italic paragraphs (they're just there to explain some things).
Why building a fully decentralized Website?
The following high-level diagram shows the main advantages of a decentralized website over a traditional hosting:
This diagrams shows drawbacks of a traditional hosting:
- Website content (images, pages, other medias, etc.) are hosted on centralized places. IT operators and Cloud providers address this drawback by hosting contents on more servers but that means a more complex architecture, new problems (How to ensure replication over the world? How to maintain it efficiently? How to route users to the right server? etc.) and higher costs.
- DNS architecture is very centralized by nature. At several layers, the access to the website may be down because of censorship, human and technical mistakes or even malicious activity.
In other words: several SPOF in the same architecture could lead to shutdown your website.
On the other hand, a decentralized architecture based on ENS and IPFS is highly-available by nature:
- No need to think about content replication & distribution: IPFS network allows to distribute your content all over the world. Of course, that means several IPFS nodes have to store (pin) your content. But that's a very simple and straightforward step, compared to creating a new Highly-available architecture from scratch. Plus, it is easier and cheaper to maintain. As soon as 1 node is storing your website, you're fine.
- ENS on the Ethereum Blockchain allows the user to be redirect to the right IPFS content (your website), based on a easy to remember address in the form ".eth". No central authority can censor it.
- 1 Ethereum wallet with some ETH in it
- browser extension
Prepare your website content
1. Download simple website files from this github repo
You should end up with 3 files downloaded on your computer:
It is a very simple HTML page with CSS formatting, running some javascript.
Upload your website content to IPFS network
2. Create an account on pinata.cloud
To keep things simple for this tutorial, I'm using Pinata and not a self-owned IPFS node.
Indeed, hosting files on IPFS doesn't mean they will be available forever. It just means that as soon as 1 node is hosting your files, they will remain available.
Pinata is a pinning service for IPFS. It means that it will allow you to "pin" files (= store them for you, making them available for the entire IPFS network) in order to make sure they will be available on the IPFS network.
Though, in order to take advantage of the whole potential of IPFS, I would recommend to upload and pin files yourself with your own IPFS node. It is not so more complicated, you'll just have to install IPFS on your computer.
3. Upload your website files to IPFS by selecting the whole folder where the 3 files are stored (index.html, script.js, style.css)
4. Get your CID
Copy the CID (Qm...), you will need it further.
The CID is the Content Identifier. It refers to the 3 files together.
CID is a like an URL link, except that the CID will always be the same for a given file/group of files, no matter where it is stored. So if you have the exact same version of files as me, you should get the same CID as displayed in the picture.
5. Access your website
Congrats! Your website is now hosted on IPFS.
You should be able to access it through the following address: www.ipfs.io/ipfs/(adapt it to your own CID).
But this is not very convenient. How could be able to remember this address?
We need to create a domain name and to link the website to it. So let's move forward :)
Set a decentralized domain name: ENS
6. Go to app.ens.domains
By accessing this Dapp, if you're using , you should see a window prompting and requesting you to type your password. Do it in order to be able to interact with it. Don't worry, your password stays locally, it is just used to unlock your local METAMASK wallet.
ENS means Ethereum Name Service. It is like a domain name, though it is hosted on managed on Ethereum Blockchain. It means no central authority can censor or shut it down. Though, DNS and ENS are completely different at a technical level and how they work.
7. Search for a good-looking ENS domain name and follow registration steps
You will have to pay Ethereum gas fees to register your ENS name.
ENS names with more than at least 5 characters are pretty cheap: $5 in ETH. Though, Ethereum transaction fees may be probably higher than that, depending on the network congestion.
Also remember that you'll have to renew it if you don't want to lose your ENS name.
8. Link your ENS name to your CID
Once you own your ENS name, go to your ENS name details and click "ADD/EDIT RECORD".
Then, select "content" as a record type and type the IPFS address of your website: ipfs://
Now, you should be able to access your fully decentralized website with your ENS address, such as: ens.eth/
Just a few words:
- The .eth address will only work if your browser is able to interpret it. Meaning, you have either install metamask extension on it or you have to use a native Web3 browser (such as ). If you don't have one of these, you can still access it by adding ".link" at the end (after .eth) since .link is a classic top level domain (though this, as any other top level domain, is managed by central authority).
- You have to put a "/" at the end of the address because your browser may not be able to understand this .eth extension (even if you have metamask installed)
Conclusion
That's it!
Nobody can stop or censor your website.
This is a very simple proof of concept, showing the potential of Web3.
Have fun!
