One of the most interesting and powerful features of ENS names is the ability to point them to webpages hosted on the decentralized web, creating a website where both the hosting and the domain name is entirely decentralized.
In this tutorial you will:
ENS supports several decentralized protocols apart from IPFS, but this tutorial only covers IPFS (for now).
Anyhow, let's get started!
Build a website
In this section we'll create a basic website to deploy to IPFS using Heaven's Tools excellent Web3 website builder.
If you already have a website you'd like to upload, proceed to
Create the website
Before we can upload a site to IPFS we have to first create it! There are many ways to do that, but in this guide we'll try to keep it simple by using Heaven's Tools which is a WYSIWYG, or "What You See Is What You Get", type editor where you don't have to know how to code.
All you need to do is go to Heaven's Tools website and drag blocks in the order you want them and Heaven's Tools will take care of the rest and build the site for you!
Go to Heaven's Tools website and use the drag and drop building blocks to create your site.
Download the website
Once you're happy with the site you've created click the Download button to download a compressed .zip archive of your website.
Set up a GitHub Repository
Go to GitHub and create an account.
Create a repository
Click New to create a new GitHub repository for your website.
Then choose a name for the repository.
Then scroll down and click on Create.
Upload your files to the repository
On the next screen, click the link Uploading an existing file
Upload your files to GitHub
After that's done, scroll down and click Commit.
Upload to IPFS
IPFS, or the InterPlanetary FileSystem, is a decentralized storing protocol we'll use to store our website files in, and serve them from. For this tutorial we'll use a so called "pinning service" to store our files on IPFS but it's also possible to pin files yourself using a local IPFS node.
The benefit of using a pinning service is that you'll not need to run your own IPFS node to make sure that your website is accessible.
Create an account with Fleek
Go to Fleek's website and Sign Up for an account.
Upload your site to Fleek
After logging into Fleek, at the dashboard select Add new site.
Choose Connect with GitHub and connect your GitHub account.
Click Install & Authorize
When asked which repository to create the website from, select the repository you created earlier in Step 1.
For the hosting service, make sure IPFS is selected and press Continue.
On the next screen no changes are necessary, so just scroll down and click Deploy site.
Fleek will now deploy the website to IPFS, which might take a little while.
When the site has been deployed, it will look like this:
Select the IPFS CID (marked in blue below) and press CTRL + C to copy it into the clipboard or write it down.
Configure your ENS name
Go to the ENS Manager App
Go to the ENS Manager App with the wallet set as Manager for the ENS name you want to manage and click Names to bring up a list of your ENS names or search for an ENS name you own directly from the main page.
Click the ENS name you want to add the content record to.
Go to the Records tab
Click Edit Records
Then go to the Other tab
Type in the IPFS CID you saved earlier into the Content field and then click Save
Click Open Wallet and confirm the transaction in your wallet.
Wait for the transaction to complete.
Once the transaction has completed you should see a screen like this, it means that the changes to the content record is now stored on-chain. Click Done to go back to the Manager.
You should now see the Content Hash record populated with the IPFS CID you entered.
Congratulations! That's it! Now you can try visiting your website!
ENS Compatible browsers
For ENS resolution in the browser address bar to work, the browser needs to be compatible with ENS or have the Metamask extension installed.
Some browsers which are more oriented towards Web3 support ENS right out of the box:
Other browsers will need to have an extension installed for it to work, such as the Metamask browser extension:
Web3 Gateway
You can also use the eth.limo web3 gateway by entering in your-ens-name.eth.limo into any browser address bar, regardless of if it supports ENS names natively or not.