Unstoppable Domains: Create a Decentralized Website Using Unstoppable Domains and IPFS Folders

Learn how to create a decentralized website using Unstoppable Domains and IPFS folders on Filebase.

What are Unstoppable Domains?

Unstoppable Domains are NFT domains that are associated with a crypto wallet and minted on blockchain networks, just like other forms of NFTs like image or music files. Unstoppable Domains can be used with DNS CNAME records like traditional domain names, meaning you can use an Unstoppable Domain as a domain name for a personal website or blog.

Read below to learn how to create a decentralized website using Unstoppable Domains and IPFS folders on Filebase.

Prerequisites:

1. Login to the Unstoppable Domains web dashboard.

Select ‘Domains’ then ‘Domain Search’.

2. Search for your desired domain name.

Select the one you’d like to purchase.

3. Once purchased, your domain will be listed under the ‘My Domains’ tab.

Select ‘Free Mint’ to mint your domain on the Polygon network.

Minting is the process of converting a digital file into a crypto collectible or digital asset on a blockchain network. In this case, we are minting our digital asset, our domain, on the Polygon blockchain network.

4. Select ‘Continue’ to begin the minting process.

5. Choose the crypto wallet you’d like to mint your domain to.

In this tutorial, we’ll use MetaMask.

6. Accept and sign the signature request through the MetaMask plugin.

7. Choose the wallet to mint to.

8. Confirm that the wallet address is correct and that the domain name is the desired domain to be minted.

9. The minting process can take a few minutes.

Select “Track Progress” to view the status of your minting transaction.

10. Once the transaction has been completed, your domain has been minted.

11. Start by creating a new folder called ‘My Website’ and create the file index.html.

This file is a basic HTML file to serve as the homepage of your website. Change and edit this file to reflect your website’s content, and style it accordingly. To learn more about HTML and CSS styling, see here.

<!DOCTYPE html>
<html>
<head>
	<title>A Static Site Hosted on the Decentralized Web</title>
</head>
<body style="background-color:black;">
<h1 align="center" style="color:white;"> A Static Site Hosted on the Decentralized Web</h1>
<p style="color:orange;" align="center">
	A website hosted on IPFS through Filebase, using a Filebase dedicated IPFS gateway.
<a href = "https://filebase.com">
<img src="./image1.png" width="300px" >
</a>
</p>
<ul align="center">
<li>
<li>
<table border align="center">
<tr> <th style="color:teal;">IPFS</th> <th style="color:green;">Sia</th>
</tr>
<tr><td> <img src="./image2.png" width="400px" > </td> <td> <img src="./image3.png" width="400px"></td></tr>
</table>
</body>
</html>

12. This example uses 3 image files, so we’ll save those in the same folder that our index.html file is saved in.

Any files you want to be used with your website, such as image files or script files, save in this folder.

Currently, the directory should look like this:

  • My Website

    • index.html

    • image1.png

    • image2.png

    • image3.png

13. Then, navigate to the Filebase Web Dashboard. Create a new bucket on the IPFS network.

14. Select your bucket, then select ‘Upload’ > ‘Folder’.

15. Select your website’s folder that contains your index.html file and any other files associated with your website.

Once uploaded, click on the CID to copy it to your clipboard.

16. Navigate back to the Unstoppable Domains console, then navigate to your ‘My Domains’ page.

Select ‘Manage’ next to the domain you want to use with your website.

17. Select ‘Website’ from the left side bar menu.

19. Paste in your IPFS CID for your folder that was uploaded to Filebase.

20. Then select ‘Launch Website’. You will be prompted to authorize the transaction through your Cryptowallet.

Once authorized, your domain will display ‘Website Launched’ followed by the CID of your folder.

21. You can then use a browser such as Brave to navigate to your domain and see your website!

Last updated