Host a Website on the Ethereum Platform with InterPlanetary File System (IPFS) and Ethereum Name Service (ENS)

The free and open Ethereum platform delivers the following benefits to developers and end-users:

  • Impervious to censorship
  • Native payment system
  • Universal, plug and play Database
  • Global, anonymous login
  • 100% Uptime

This blog post demonstrates how to use InterPlanetary File System (IPFS) with Ethereum Name Service (ENS) to host a static website on the Ethereum platform.

In this demo we will:

  • Get an Ethereum Account (Wallet)
  • Mint a Non Fungible Token (NFT)
  • Host a Website on IPFS
  • Register an ENS domain
  • Link our ENS domain to our IPFS website

Get a Wallet

You must get an Ethereum wallet to use the new blockchain-enabled web. An Ethereum wallet holds your private key and allows you to use Decentralized Applications (dApps).

You can get a wallet from several providers. In past blog posts I demonstrated how to use Metamask to get an Ethereum wallet. In this blog post I will show you how to use the Brave Browser to get an Ethereum wallet. To get a wallet from Brave, simply open Brave, click the Hamburger icon and select Wallet.

Brave Welcome

Click Get Started.

Get Started

Click continue on the Back up your crypto wallet screen.

Recovery Phrase

Brave displays a 12 word recovery phrase. Write the phrase down on paper. The phrase contains your Wallet private key. If a hacker gets your recovery phrase, she will get all of your coins.

Once you write down your phrase click next and Brave will ask you to re-enter the phrase. Complete this task and click through to the next screen.

After you complete the recovery phrase task, you see an empty wallet.

Buy Eth

In order to proceed with the activities below, you will need to fill your wallet with Ethereum. You can either click the continue to Wyre button to buy Ethereum, or use Coinbase to send Ethereum to your wallet. If you would like to use Coinbase, right click here and open in another tab to see how to use Coinbase to send Ethereum to your wallet.

NOTE: I do not have any affiliation with either Wyre or Coinbase

Below, I use Wyre and pay $400 for some ETH.

Pay Eth

That $400 translates to about 0.08 ETH.

Eth Bought

Distributed App Intro - OpenSea

Ethereum drives dApps, which use the global Ethereum blockchain to manage digital identities, content and ownership.

OpenSea, for example provides a Web based user interface to track, manage and sell Non Fungible Tokens on the Ethereum blockchain.

OpenSea Splash

Use your digital wallet to log into OpenSea. Click the Connect button and then sign the connection request.

Connect Metamask

OpenSea pulls your account info directly from the blockchain. Right now we do not have any activity on the blockchain, so we do not see anything interesting on the Splash page.

OpenSea Home

After we get some digital assets in our new wallet, however, we will look at several dApps to demonstrate the global nature of the Ethereum blockchain. Also, later in this post, we will change the string of hex (0x84916411a80C9C60AD3433A26aEe49805239Bd04) that records our Ethereum wallet's address to a human-readable name via the Ethereum Name Service.

Publish to InterPlanetary File System (IPFS)

The InterPlanetary File System (IPFS) provides a massive, decentralized, distributed file system. Think of an Amazon Web Service (AWS) Simple Storage Service (S3) owned and maintained by the public, vs. a trillion dollar company. (To my stickler nerd friends - the IPFS protocol acts closer in spirt to AWS CloudFront vs. AWS S3).

Each IPFS user hosts and receives data, following a protocol similar to Napster back in the day. To use IPFS, you must first download and install the IPFS client. The IPFS website provides a desktop client for Windows, Linux and Mac.

Install Ipfs

Github hosts the IPFS client repository. Scroll down to find the installer for your system. Download the .exe file, for example, for the Windows installer.

Ipfs Github

Click through the Install wizard.

Installing Ipfs

Once you launch the desktop application, upload a website.

I have a web page that points to a copy of my daughter Lia's superhero creation - Loserman.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Loserman!  By Lia Sobanski</title>
    <meta
      name="description"
      content="The origin of Loseman."
    />
    <meta name="author" content="Lia Sobanski." />
  </head>
  <body>
  <h1>Behold Loserman and Orange Peeler!</h1>
  <img src="./loserman.png">
  </body>
  </html>

I shove the HTML and PNG files into a local folder and then click +Import Folder to send my website to IPFS.

Import Folder

The desktop client uploads my website to IPFS.

Folder Imported

To see the website, click the ellipses next to your uploaded web folder and then select Share Link. IPFS then shows a web address that points to the content of your website.

Share Link

https://ipfs.io/ipfs/QmQG4Pwkuwz3JV1b5ocrD3ZzXkVM2iuZqWxPvmHPZwR2j5

Paste this link into any browser to see your website. Keep in mind that IPFS takes dozens of minutes to catch up.

Create an NFT

The Ethereum blockchain records both our Ethereum account's actions and our Ethereum account's assets.

Let's create and sell an NFT to add some interesting history to our account.

OpenSea and Rarible both provide a dApp to create NFT's. In OpenSea, for example, click Create Item.

Create Item

I upload my daughter's picture of Loserman.

Create One

I click through and complete the Wizard. Once I finish, OpenSea states that I created the digital asset.

Loserman Nft

OpenSea and Rarible now use Lazy Minting. The dApps do not mint the NFT token until a buyer buys the token. In this method, the buyer pays the (very costly) minting fees.

In order to mint the NFT, therefore, we must sell it. To sell the item, click the ellipses on the NFT and then click Sell.

Sell Nft

Before you can sell an item, OpenSea requires you to pay a one-time fee to register your wallet, which includes a pricey gas fee. I pay $241.00 for this privilege.

Sell Two

Click through the Wizard and sign the digital paperwork.

Sell Three

After the registration fee, OpenSea lists (but does not mint) your item.

Sell Four

From a different Ethereum account I click on the Buy Now button, to buy (and mint) the Loserman NFT.

Lia Buy

I need to pay $117 to mint the item. I use Metamask to confirm this.

Pay Mint

OpenSea mints the item and completes the purchase.

Purchased Nft

Shared dApp Ecosystem

OpenSea used the Ethereum blockchain to mint, manage and sell my NFT. Other dApps that use the Ethereum blockchain to mint, manage and sell NFTs see the transactions immediately.

Rarible, for example, displays the creation of the NFT.

On Rarible

Darkblock also catches the NFT.

On Darkblock

In a Web 2.0 Architecture, OpenSea, Rarible and Darkblock would each have their own database to track NFT creation, logistics and permissions. In the Web 3.0 (how long will that name stick?) construct, all three dApps use the same database for their back-ends... the Ethereum Blockchain.

Ethereum Name Service (ENS)

The Internet Domain Name Service (DNS) maps human-readable names to Internet Protocol Addresses. John.Soban.Ski, for example, points to the IP address 65.9.83.48.

In a similar manner, the Ethereum Name Service (ENS) maps our forty character Ethereum wallet address to a human readable name. I will demonstrate this in action.

First, we need to find a name. The ENS dApp lets us search for available names.

I decide to look for the name Gosh Darn It (GDIT) dot ETH , and find that I can buy that name.

Gdit Name

ENS quotes a rough estimate of $300 to buy the domain, with half going to Ethereum gas.

Pay Fee

I use my wallet to connect to the dApp, and sign the requests.

Request Register

I pay $302.19 to snag gdit.eth.

Pay Alot

I use the ENS dApp and connect gdit.eth to my Ethereum wallet address.

Set Primary

I need to pay $68 in gas to associate the name to the wallet.

Pay More

Etherscan summarizes blockchain activity.

I can use Etherscan to profile my wallet using either my hex address (0x84916411a80C9C60AD3433A26aEe49805239Bd04), or my gdit.eth name. Either way, Etherscan replaces the HEX in the transaction log with gdit.eth.

Etherscan Update

Decentralized Website Hosting

Our IPFS website (above) lives on the decentralized, distributed, global IPFS file share. We will configure ENS to serve up the content of our IPFS website via a Content ID (CID) number. The IPFS desktop client provides a Content ID (CID) for the website we launched.

ipfs://bafybeia4rjakzczwxbjllzcsx5h3wjmk6qy3hohkxwfwkvgqqjyebry7jq

To link this CID to our domain name, we must paste this CID in the Content section of ENS. This tells ENS to map gdit.eth to the website hosted on IPFS.

NOTE: ENS maps one name to several protocols (Ethereum, Bitcoin, IPFS) and knows which one to use based on context

Set Content

After another charge of $177 ENS sets the Content record for gdit.eth.

Ipfs Link

At present time (November 2021) not all browsers support the IPFS protocol.

Append .link to the end of Ethereum domains to use an IPFS proxy and access IPFS websites through ANY browser.

Eth Link

Conclusion

In this demo we used two dApps to host a static website. Our website now reaps the benefits of the Ethereum ecosystem, including zero censorship, 100% availability, global reach and immutability.

If you enjoyed this blog post please click on some of the tags below to find similar content, or check out my NFT's on Rarible.

Show Comments