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.
Click Get Started.
Click continue on the Back up your crypto wallet screen.
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.
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.
That $400 translates to about 0.08 ETH.
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.
Use your digital wallet to log into OpenSea. Click the Connect button and then sign the connection request.
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.
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.
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.
Click through the Install wizard.
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.
The desktop client uploads my website to IPFS.
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.
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.
I upload my daughter's picture of Loserman.
I click through and complete the Wizard. Once I finish, OpenSea states that I created the digital asset.
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.
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.
Click through the Wizard and sign the digital paperwork.
After the registration fee, OpenSea lists (but does not mint) your item.
From a different Ethereum account I click on the Buy Now button, to buy (and mint) the Loserman NFT.
I need to pay $117 to mint the item. I use Metamask to confirm this.
OpenSea mints the item and completes the purchase.
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.
Darkblock also catches the NFT.
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.
ENS quotes a rough estimate of $300 to buy the domain, with half going to Ethereum gas.
I use my wallet to connect to the dApp, and sign the requests.
I pay $302.19 to snag gdit.eth.
I use the ENS dApp and connect gdit.eth to my Ethereum wallet address.
I need to pay $68 in gas to associate the name to the wallet.
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.
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.
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
After another charge of $177 ENS sets the Content record for gdit.eth.
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.
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.