Skip to main content

Create a decentralized website

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:

  1. Build a website
  2. Set up a GitHub repository
  3. Upload it to a decentralized storage using IPFS
  4. Point your ENS name to it

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.

tip

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

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!

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. This archive contains the files we're going to upload to GitHub in the next section!

heavens.tools

Extract the compressed archive​

If you're unsure of how to extract the .zip archive, expand this section for help.

Extract compressed archive

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


Press `Extract all`


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

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​

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.

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 and connect your wallet.

app.ens.domains

Click on My Account to go to a list of your ENS names.

app.ens.domains

Go to your ENS name and click Add/Edit Record, scroll down and enter the IPFS CID you saved earlier into the Content field, then scroll down and click Save

app.ens.domains

app.ens.domains

Congratulations! That's it!