Ethereum_name_service

Host your first Fully decentralized, censorship-resistant website with ENS & IPFS

By Magic_Pickles | Take back control! | 8 Jan 2022


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 IPFS and ENS (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:

Centralized vs Decentralized 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 "address.eth". No central authority can censor it.

Requirements

  • 1 Ethereum wallet with some ETH in it
  • Metamask browser extension

How-to

Prepare your website content

1. Download simple website files from this github repo.

You should end up with 3 files downloaded on your computer:

files for simple website

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

Register on Pinata

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)

Upload files to Pinata

4. Get your CID

Copy the CID (Qm...), you will need it further.

Get CID from pinata

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/<CID> (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 Metamask, 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.

Register 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".

Set new record on ENS name

Then, select "content" as a record type and type the IPFS address of your website: ipfs://<CID>. Do not forget to adapt it to your own CID!

Set CID on ENS

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 brave). 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!

How do you rate this article?


44

2

Magic_Pickles
Magic_Pickles

Love IT tech and innovation. Interested in all wha't's related w/ blockchain & decentralized systems. Not fundamentally against gov(s). or other form of centralization. My conviction: we are at the beginning of what those techs will bring to the world.


Take back control!
Take back control!

When I started working as an IT consultant, I barely knew what a server was. So I practiced on my own time, helping my "professional life" and vice versa. Then, one thing came to my mind: reinviting the wheel is a good thing. It allows you to learn and take back control - on your data or even your life. Over time, taking back control became an everyday challenge. And 3 enablers help me to reach it: the Blockchain tech, personal finance and Open-Source. I want share my tips about those.

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.