Decentralized Website Concepts and Tools

Decentralized websites function by having their content separated from a central server. Instead, the content is stored in a decentralized way on the blockchain. The InterPlanetary File System (IPFS) is commonly used to store decentralized website data. IPFS is a peer-to-peer protocol and facilitates the decentralized storing and sharing of data, ensuring it could be accessible even if the original publisher of the content goes offline. It functions much like peer-to-peer torrent networks, distributing data across numerous nodes, eliminating single-point failures.

How does a decentralized website work on IPFS?

With IPFS, each node (user) in the network is both a client and a server, which contrasts with the traditional client-server model where data is hosted on centralized servers. Each file and all of the blocks within it are given a unique fingerprint called a cryptographic hash. When you look up a file on IPFS, you’re asking the network to find nodes that are storing the content behind that file’s hash. It’s important to note that IPFS removes any data that is unused. However, IPFS hashes can be pinned by nodes so that they are always available. IPFS locations are referenced via a content identifier (CID), which is a unique cryptographic hash assigned to the content that gets posted to the IPFS network.

How can you point a DNS domain(eg .com) to decentralized content on IPFS?

You can use a traditional domain name (.com, .org, etc.), referencing IPFS content using DNSLink text records. This will map your domain name to the IPFS content, using a gateway that is able to resolve the decentralized content and render it in the browser. In traditional web hosting, this is performed by a web server. DNS is the Internet infrastructure also known as the domain names system, which relies on centralized architecture to map domain names to servers. In the world of blockchain, you can use ENS, or the Ethereum Name Service to save a long CID hash to visit a decentralized content location, you could attach that CID to an ENS name. ENS names are human-readable blockchain names that can point to any location you wish including the content hashes using IPFS locations.

One way to visit a decentralized website can be achieved through DNSLink, which would work to point to a normal domain name like a .com, so that a website visitors will see the decentralized content rendered when visiting the .com. In this way the content is stored decentralized, but the domain you use to reach the content would rely on centralized architecture like DNS and the domain name itself, for instance a .com name.

Using an ENS name for a decentralized website

But what if you have an ENS name? ENS .eth names are owned on the blockchain, and work via smart contracts. Because Ethereum is the blockchain that ENS is built on top of, you can use an ENS name to point to blockchain content. One way to do this is to visit the ENS Manager App and view the dWeb content record of the name to see where the IPFS content location is. You could then copy the IPFS CID to any IPFS gateway service, which reads content on IPFS, and view the website.

Though it’s great that the IPFS hash can be stored immutably on a record for the ENS name, copying and pasting the hash value into an IPFS gateway isn’t ideal. There are a few browsers that you can type in name.eth and it will visit the decentralized website by automatically reading the IPFS hash. Two popular browsers that perform this are Brave and Opera. Browsers that also have Metamask installed can view .eth ENS name’s website content directly in the browser.

Finally, one of the easiest ways is to simply attach .limo to the end of the ENS name and it will resolve in the browser the website content that is stored on IPFS, that is read from your ENS records. For instance, Vitalik’s blog, the founder of Ethereum is here: vitalik.eth.limo

How can I store the location of decentralized content in the ENS content record?

Storing content on a decentralized website involves uploading the content on networks like IPFS and having a pinning service ensure the content stays up. Popular pinning services are Pinata, Filebase, or your own node of IPFS you can run on your local computer. Content is added to the IPFS network, while pinning services ensure the data remains available by preserving it across multiple nodes. Within ENS, you can also use Swarm, Onion, Skynet, and Arweave locations. You can save the decentralized content record using the ENS Manager App

How do you build a simple decentralized website?

Building a decentralized website involves creating frontend code locally and then uploading it to IPFS. The content is then “pinned” to ensure its persistence on the network if using IPFS. You could also use website builders like 1w3, which are tailored for creating decentralized sites. To do that, you would simply log into the project’s dApp with your wallet. 1W3 is great for building decentralized linktr.ee type websites, along with a few other website templates using just your ENS name. The project takes care of uploading and pinning the content to IPFS automatically.

Redirecting an ENS name to an existing domain

Maybe you have a regular .com website for example, and haven’t built a decentralized version of it yet. One thing you can do if you have an ENS name is to just redirect it to your website address. This way if someone goes to mycooltshirts.eth.limo, the content record could point to a redirect file stored on IPFS, that would navigate the user to your existing website. You can visit ENSRedirect to set this up.

How do you build a custom decentralized website?

In order to have a functioning website stored on IPFS, you will need to have a static version available. This means that the website won’t be dynamic in the sense that the website content can change through user interactions. For instance, a user forum won’t make for a good static website since it always changes with new posts and comments. It is possible to run decentralized user forum with the frontend on IPFS, and the dynamic data can be read or updated using the blockchain rather than centralized data servers. This process is out of scope for this article.

One solution to create a static website is to use static site generators like Gatsby, Hugo, Jekyll, or Eleventy. These generators will allow you to develop a website locally, and then it will generate the entire static website for you which you can then upload to IPFS.

Without using a generator, you can also just download a static template and edit the files in the downloaded folder. You can create a static website easily by downloading BootstrapMade Templates. From there, just edit the website files and upload the folder to IPFS.