Ever wondered how to host a website without a server or purchasing a domain name? Here is a treat for you then...
Everyone who has an online portfolio will eventually manage their on website to maintain all their resources at one place. There are plenty of ways to create and host static websites freely on the internet using different platforms. Hosting a website essentially requires a web hosting platform and a domain name bought from registrars such as GoDaddy, NameCheap, BigRock etc. We being an advocate of decentralization and censorship resistant network are in search of purely decentralized way of hosting a web application. That's what we will discuss in this article by deploying a static website using IPFS and ENS.
We will cover the following topics. Feel free to skip the topics you are already familiar with:
- IPFS and ENS
- Registering and managing an ENS domain
- Hosting a static site with IPFS
- Linking the hosted IPFS site to the ENS domain
Introducing IPFS and ENS
Before we get into the depths of the technologies, let's try to define them first:
Inter Planetary File System or IPFS is a distributed file system where file is stored on a network of computers that communicate with each other rather than storing it on a single server. More details on IPFS can be found here.
Ethereum Name Service is a distributed, open naming system on Ethereum blockchain. Just like domain names in the web
standards, ENS's job is to map human-readable names like
alice.eth to Ethereum addresses (Ex:
IPFS content hashes (Ex: ipfs://QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T). Although it can map to machine readable
addresses and contents, they cannot map names directly to the ANAME or CNAME unless we use bridges like EthDNS. We will
discuss about EthDNS in a while after we create our first ENS domain.
Registering and managing an ENS domain
We often get a domain before we work on a project so that we can host all the resources in the future. Registering a domain name is the simplest step of the entire process. We shall do the same thing but with the ENS. This process is as simple as registering a domain name using GoDadday. Probably much simpler than that since all we need is a Ethereum wallet extension such as MetaMask with some funds. Although we will be using MainNet in this article feel free to use Ropsten test network for domain registration.
Although you can register a name using Ethereum test network such as Ropsten, you won't be able to use it to deploy IPFS sites since the integration is only supported on MainNet.
Unlike domain name registration there is a single ENS registrar maintained at https://app.ens.domains, although it may have different clients (MyCrypto, OpenSea). We will refer to this as ENS app throughout this post. Make sure to set the network on MetaMask to Ropsten if you are planning to use testnet before visiting https://app.ens.domains.
In the home page of the ENS app search the required name. In my case it is
koshik.eth. It will then take you to the registration page if the desired name is available.
Currently, ENS mainnet has only
.eth as the top level domain. So, you won't be able to register a name with any other TLD as of now.
A regular name on ENS costs $5 (Around 0.024 at the time of writing) for a year unlike 10 dollar domains for web. Although the user doesn't have to provide any more details, 2 transactions need to be passed to the Ethereum blockchain.
The first transaction transaction is to reserve the ENS name. This transaction is created as soon as thebutton is clicked. Make sure to pay enough GAS for the transaction (Set the GAS price to atleast 30 GWEI) to make sure you don't lose your ENS name.
After the first transaction is confirmed, there is a waiting period of one minute to make sure that multiple people do not register for the same name.
The second and the final transaction will register the ENS name and transfer the ownership to the current logged in user account in the MetaMask. The transaction will be created as soon as thebutton is clicked.
Congratulations, you are now the proud owner of a unique ENS name 👏👏👏
Once the transaction is confirmed, we can now access the the details and manage page of the ENS name. You can reach this page by either going to
My Namestab or simply searching for the newly registered name.
The Controller and Registrant will be set to the registered used address by default. The Resolver is a special contract which handles ENS name resolution.
By default the ENS name will point to the registered user address. In my case,
koshik.ethwill poin to
We can create any number of subdomains just like web domain addresses. We will use subdomains concept to point to our static website using IPFS at later stage. We have now completed the first part of our mission.
Hosting a static site with IPFS
Now that we have registered an ENS name, let's create and host a static web page and host it on IPFS.
An IPFS client needs to be installed to communicate with the IPFS swarm. The installation of the client is pretty straightforward. Installation instructions for Linux, Mac and Windows can be found here.
Make sure the you have the recent version of IPFS client once the installation is complete.
We need to now run a local IPFS daemon so that we can communicate with the other nodes.
Let's create a basic Hello World website to upload it to the IPFS nodes. Create the following files under the
Both of these files under
hello directory can be added to the IPFS listing locally with the following command:
It will publish the files to the local IPFS node and display the IPFS hash value of each files.
We should now be able to view the website on our browser. Just paste the IPFS hash value of the
hello directory to the address bar of the browser:
We will be greeted with the following page as expected. This page may be rendered by our local IPFS node until the files are uploaded to a few of the peers of the IPFS swarm.
Voila! We have successfully hosted our website on the IPFS distributed network. We are still missing the last piece. That is mapping our website to a ENS name so that we can view our website through a friendly name. We shall do that next.
Linking the hosted IPFS site to the ENS domain
A file or set of files hosted on a distributed storage network can be mapped to a an identifier or name. But the mechanism
should also promise the mapping to persist even if there is an update to the files on the IPFS network. IPFS provides
the mapping mechanism with the help of IPNS or DNSLink in a IPFS gateway.
peerId for the IPFS hash so that subsequent versions of the IPFS content can still be accessed with
the help of this
peerId. Where as, DNSLink allows to create a more readable name to access the IPFS content through
gateways. Read more on this here.
We will not use IPNS to create a mapping to our static website, instead, we shall use the ENS domain which was created earlier.
As a first step, let's go to our ENS name dashboard and navigate to the
Subdomainstab and click on the button.
Let's create a new subdomain label named hello. Click on the save and sign the MetaMask transaction.
Once the previous transaction is confirmed, we can now go to the subdomain page add our IPFS hash of our static website in the RECORDS section at the bottom of the page. Make sure to select the
CONTENTfrom the dropdown list. The IPFS hash in our case is
QmT3LNMyQ1fnsKHHz5RQkHWG84CeAEQEKToXeuJ3x6JdWD. Save and confirm the transaction.
That is it !!!. Once the transaction is confirmed you can visit your subdomain address on your favourite browser by adding
.link at the end.
hello.koshik.eth.link in our case. Voila! you will be greeted with our brand new website hosted on the IPFS network with ENS domain.
That's it for this post. I shall add more interesting posts on ENS and IPFS. Cheers!