Skip to main content

Create a decentralized website (V3)

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 we'll show you how to deploy a basic website to IPFS and point your ENS name to it. ENS supports several decentralized protocols apart from IPFS, but this tutorial only covers IPFS (for now).

Build a website​

In this section we'll create a basic website to deploy to IPFS using Heaven's Tools excellent Web3 website builder.

tip

If you already have a website you'd like to upload, proceed to Set up a GitHub repository

Create the website​

Go to Heaven's Tools website and use the drag and drop building blocks to create your site.

heavens.tools

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.

heavens.tools

Extract the compressed archive​

Extract compressed archive

Navigate to the file folder and double-click the zip file

Extract the file (Windows)

Press `Extract all`

Extract the file (Windows)

Select a folder to extract the files to and click `Extract`

Extract the file (Windows)

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.

github.com

Then choose a name for the repository.

github.com

Then scroll down and click on Create.

github.com
github.com

Upload your files to the repository​

On the next screen, click the link Uploading an existing file

github.com

Upload your files to GitHub

github.com

After that's done, scroll down and click Commit.

github.com

Upload to IPFS​

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.

fleek.co

Choose Connect with GitHub and connect your GitHub account.

fleek.co

Click Install & Authorize

fleek.co

When asked which repository to create the website from, select the repository you created earlier in

fleek.co

For the hosting service, make sure IPFS is selected and press Continue.

fleek.co

On the next screen no changes are necessary, so just scroll down and click Deploy site.

fleek.co

Fleek will now deploy the website to IPFS, which might take a little while.

fleek.co

When the site has been deployed, it will look like this:

fleek.co

Select the IPFS CID (marked in blue below) and press CTRL + C to copy it into the clipboard or write it down.

fleek.co

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.

app.ens.domains

Click the ENS name you want to add the content record to.

app.ens.domains

Go to the Records tab

app.ens.domains

Click Edit Records

app.ens.domains

Then go to the Other tab

app.ens.domains

Type in the IPFS CID you saved earlier into the Content field and then click Save

app.ens.domains

Click Open Wallet and confirm the transaction in your wallet.

app.ens.domains

Wait for the transaction to complete.

app.ens.domains

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.

app.ens.domains

You should now see the Content Hash record populated with the IPFS CID you entered.

app.ens.domains

Congratulations! That's it! Now you can try visiting your website!

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.

ENS Compatible browsers​

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:

ETH.limo proxy

You can also use the eth.limo web3 proxy by entering in your-ens-name.eth.limo into any browser address bar, regardless of if it supports ENS names natively or not.