Hosting a static site with IPFS and ENS

Koshik Raj

Koshik Raj

Co-Founder, Consenso Labs

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:

  1. IPFS and ENS
  2. Registering and managing an ENS domain
  3. Hosting a static site with IPFS
  4. 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.

IPFS

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: 0xd5B5Ff46dEB4baA8a096DD0267C3b81Bda65e943) or 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.

ENS

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.

caution

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.

  1. 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.

  2. 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.

    ens-home

info

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.

  1. 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.

    ens-register

  2. The first transaction transaction is to reserve the ENS name. This transaction is created as soon as the Request to Register button 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.

    ens-txn1

note

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.

ens-txn-wait

  1. 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 the Register button is clicked.

    Congratulations, you are now the proud owner of a unique ENS name ๐Ÿ‘๐Ÿ‘๐Ÿ‘

    ens-txn2

  2. 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 Names tab 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.

    note

    By default the ENS name will point to the registered user address. In my case, koshik.eth will poin to 0x958543756A4c7AC6fB361f0efBfeCD98E4D297Db

    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.

    ens-dashboard

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.

koshik@koshik ~/D/p/ipfs> ipfs version
ipfs version 0.5.1

We need to now run a local IPFS daemon so that we can communicate with the other nodes.

koshik@koshik ~/D/p/ipfs> ipfs daemon
Initializing daemon...
go-ipfs version: 0.5.1
Repo version: 9
System version: amd64/linux
Golang version: go1.13.10
Swarm listening on /ip4/10.50.0.1/tcp/4001
Swarm listening on /ip4/127.0.0.1/tcp/4001
Swarm listening on /ip4/172.17.0.1/tcp/4001
Swarm listening on /ip4/172.18.0.1/tcp/4001
Swarm listening on /ip4/192.168.225.189/tcp/4001
Swarm listening on /ip6/2409:4071:e8f:f3a7:34c4:41b:ff78:40da/tcp/4001
Swarm listening on /ip6/2409:4071:e8f:f3a7:3cbb:2b12:522b:1c29/tcp/4001
Swarm listening on /ip6/::1/tcp/4001
Swarm listening on /p2p-circuit
Swarm announcing /ip4/10.50.0.1/tcp/4001
Swarm announcing /ip4/127.0.0.1/tcp/4001
Swarm announcing /ip4/172.17.0.1/tcp/4001
Swarm announcing /ip4/172.18.0.1/tcp/4001
Swarm announcing /ip4/192.168.225.189/tcp/4001
Swarm announcing /ip6/2409:4071:e8f:f3a7:34c4:41b:ff78:40da/tcp/4001
Swarm announcing /ip6/2409:4071:e8f:f3a7:3cbb:2b12:522b:1c29/tcp/4001
Swarm announcing /ip6/::1/tcp/4001
API server listening on /ip4/127.0.0.1/tcp/5001
WebUI: http://127.0.0.1:5001/webui
Gateway (readonly) server listening on /ip4/127.0.0.1/tcp/8080
Daemon is ready

Let's create a basic Hello World website to upload it to the IPFS nodes. Create the following files under the hello directory.

hello/
โ”œโ”€โ”€ index.html
โ””โ”€โ”€ style.css
hello/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World! IPFS + ENS</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>Hello World!</h1>
<span>Hosting on IPFS and ENS</span>
</body>
</html>
hello/style.css
h1 {
color: #3f51b5;
}

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.

ipfs add -r hello/
added QmcMsW8CUPJBDpBAE9uxH5B57gED3SuHzhYVzhYLpQ9ZzE hello/index.html
added QmazEzEvcnQ6QRdMCMYPMFphen85G93x7qKpxgeCH2FFmu hello/style.css
added QmT3LNMyQ1fnsKHHz5RQkHWG84CeAEQEKToXeuJ3x6JdWD hello
272 B / 272 B [=======================================================] 100.00%

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:

https://gateway.ipfs.io/ipfs/QmT3LNMyQ1fnsKHHz5RQkHWG84CeAEQEKToXeuJ3x6JdWD

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.

ipfs-local-page

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. IPNS creates 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.

  1. As a first step, let's go to our ENS name dashboard and navigate to the Subdomains tab and click on the Add Subdomain button.

  2. Let's create a new subdomain label named hello. Click on the save and sign the MetaMask transaction.

    ens-subdomain

  3. 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 CONTENT from the dropdown list. The IPFS hash in our case is QmT3LNMyQ1fnsKHHz5RQkHWG84CeAEQEKToXeuJ3x6JdWD. Save and confirm the transaction. ens-ipfs-link

That is it !!!. Once the transaction is confirmed you can visit your subdomain address on your favourite browser by adding .link at the end. That is 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.

ens-ipfs-site

That's it for this post. I shall add more interesting posts on ENS and IPFS. Cheers!