How to Build Your First Web3 Website - Moralis Academy (2024)

Web3 domains are multi-utility NFTs (non-fungible tokens) or “digital certificates” that are publicly transparent on the blockchain. As unique assets, Web3 domains act as a gateway to decentralized websites and applications, alongside providing a convenient way to send and receive funds. For people looking to create their own Web3 website, it will first start with purchasing a Web3 domain.

In this article, we provide a comprehensive guide to creating a Web3 website with a Web3 domain. We will cover methods to build your own site using a template and redirect existing websites to a newly purchased Web3 domain. For the purpose of the article, we will explore ways of creating a Web3 website with Unstoppable Domains. Finally, we’ll cover how to configure the Google Chrome browser settings to access Web3 domains.

This guide requires users to interact with Web3 wallets. For a video tutorial on installing the number one Web3 browser wallet, MetaMask, see our Master DeFi in 2022 course at Moralis Academy. Here, we provide a step-by-step guide on setting up and navigating the leading crypto wallet and interacting with popular Ethereum applications. Check out Moralis Academy today!

Explaining Web3 Domains

A domain name is the recognizable and memorable web address visitors enter into the address bar on browsers to access a website. As each domain name is unique, popular domain names can be worth upwards of seven figures due to high demand.

With the emergence of blockchain, people can now gain digital property rights over intangible assets using computer science, mathematics, and cryptography. This includes different types of unique assets such as artwork, music, and Web3 domains.

Web3 domains are the gateway to the decentralized world of applications running across various blockchain networks. However, unlike traditional Web2 domains, Web3 domains are not just domains but can also be crypto wallet addresses. Moreover, Web3 domains are human-readable, unlike the long string of random digits representing the public key of crypto wallets. This makes sending and receiving cross-border payments easier than ever before.

The familiar structure of a Web2 domain is “http://mywebsite.com”, whereas the structure of a Web3 domain is typically “myname.crypto”. The top-level domain (TLD) of Web2 addresses (e.g., “.com”, “.co.uk”, “.au” etc.) is variable alongside the “DomainSherpa” name (the unique name of the site). Web3 domains work in a similar way, with limited available TLDs (i.e., “.eth” or “.crypto”) and a near-endless number of possible combinations for DomainSherpa.

Various blockchain domain name service (DNS) systems exist, including Handshake, Unstoppable Domains, Decentraweb, and Ethereum Name Service (ENS). Moreover, to create a Web3 website, you must first buy a Web3 domain. For the purpose of this article, we are using Unstoppable Domains as an example service for creating a Web3 website. In addition, Unstoppable Domains allows users who own other Web3 domains or traditional websites to redirect traffic to their “Unstoppable” address.

Mint the Web3 Domain

After purchasing an Unstoppable Web3 domain, you will need to mint it on the blockchain before being able to connect it to a Web3 site.

To mint an Unstoppable Web3 domain, head to the menu bar at the top of Unstoppable Domains and click on “Domains” and then “My Domains”. Here, you will see a list of Web3 domains that have not yet been minted. Go to your Web3 domain and click on “Free Mint”. As the Unstoppable Domains service uses the Ethereum layer-2 Polygon network, it offers users a cost-free minting service covering the network fees.

A pop-up screen will display a list of activities the minting process comprises. Click on “Continue” if you are happy to proceed. To proceed with the minting process, users must verify their email authentication and choose which Web3 wallet the NFT address should be assigned to.

Completing the minting process should take no more than ten minutes, and you can check on the progress using the “Track Progress” button. Once complete, the “Free Mint” option next to your Web3 domain will automatically convert into the “Manage” button in the “MyDomains” tab.

How to Build a Web3 Website with Web3 Domains

Unstoppable Domains offers users three different website options to connect to Web3 domains. This includes offering customizable templates to create your own Web3 website using the site’s available designer tools. Alternatively, users can redirect an existing Web2 website or upload existing website files to IPFS.

Below, we’ve outlined three ways users can create and connect Web3 websites using the Unstoppable Domains service. Finally, we’ll explore extension options for accessing Web3 domains using the Google Chrome browser.

Create Website Using Templates

Make sure to log in to your Unstoppable Domains account. Then, go to “Go Domains” > “My Domain” and select “Manage”. This will bring up a sidebar menu. Select the “Website” option to bring up the list of options to create a site using registered Web3 domains. Choose the first option, “Create Website”, to move on to the next step.

Next, you will need to select a “Page Type”. For example, opt for a “For Sale” page for selling Web3 domains, “Personal”, or “Coming Soon” if your site is not quite ready. This will then take you to a list of applicable website templates. After selecting your preferred template, you can now customize it. Texts, images, columns, links, and buttons are all modifiable to user preference.

When you’re happy with your site design, it is time to click on “Publish to IPFS”. At this stage, you will need to authorize the transaction using a Web3 wallet. This proves your ownership of the Web3 domain. It will take approximately ten to fifteen minutes for the site to be uploaded and published to IPFS, with the option for users to track the progress.

Once complete, you will receive an IPFS hash representing the website on the network in the “My Domains” > “Manage” section. In addition, you will receive a URL link that you can share with friends and post online to visit your Web3 website. Congratulations – your Web3 site is now live!

Upload Website Files to IPFS

Website owners with existing files can seamlessly connect their NFT domain to direct users to the same site. Accordingly, Unstoppable Domains offers a simple three-step process. First, make sure you are logged in to your Unstoppable Domains account. Then, from the homepage, select “Go Domains”, then click on “My Domain”, and select “Manage”. Here, you can view the range of website options. Select the second option: “Upload website files to IPFS”. When your site files are ready, click on “Upload Website Files”.

Congratulations! After following these steps closely, your existing site will be published on IPFS and connected to your chosen Web3 Unstoppable Domains NFT asset.

Custom Website Linking

Finally, owners of traditional websites or using an existing IPFS gateway (such as the one from Pinata Technologies) with an IPFS hash can redirect sites to Web3 domains. Plus, this allows owners of regular websites to redirect to a decentralized name while a Web3 version of the site is under construction. Follow the steps carefully below to discover how simple it is to redirect to Web3 domains.

See Also

List of Top Web3 Programming Languages

If you would like a video-guided tutorial led by an industry expert for creating your own Web3 gaming application, check out ourEthereum Game Programmingcourse at Moralis Academy. This course is perfect for beginners with no coding experience! Also, our free blogs at Moralis and Moralis Academy are packed full of educational content. Topics include “Quantum Computing and Blockchain“, “Exploring Chainalysis“, and “NFT Royalties Explained“. For the best place to discover all things Web3, regardless of age or expertise, enroll with Moralis Academy.

Redirect to IPFS Hash

If you already have an IPFS hash for your website, this is the ideal method. First, make sure you’re logged in to your Unstoppable Domains account before heading to “Go Domains”. Next, go to “My Domain” and select “Manage”. This will bring up a sidebar menu; choose “Website” to move to the next step.

This will present users with three website options. Choose the third option, “Custom website linking”, and click on “Link Website”. After, the landing page will present a text field prompting users to paste an existing IPFS hash. Please note that this method will not work for traditional HTTP websites.

Paste in the IPFS hash and click on “Launch Website”. Then, users will need to sign in to a Web3 wallet (e.g., MetaMask) and confirm the transaction. Hold tight for a few moments as the transaction processes. Once complete, your Web3 domain should be live! Now, if you head to the NFT address, it should redirect to the site connecting to the IPFS hash.

Redirect to a Traditional HTTP Website

This method contains more steps than the previous methods. However, by following this guide closely, you will be able to redirect your existing website to your NFT Web3 domain. The first step requires you to open any text editing program on your desktop (i.e., TextEdit on macOS or Notepad on Windows) and create a new file. Now, highlight and then copy and paste the following code:

<!DOCTYPE HTML><HTML><head><title>HTML Meta Tag</title><meta http-equiv = “refresh” content = “1; url = WEBSITE URL” /></head><body><p>WEBSITE DESCRIPTION </p></body></html>

Once you have done this, you must adjust the code to incorporate your site details. First, highlight “WEBSITE URL” and replace it with your existing website’s URL (this will start with either HTTP:// or HTTPS:// ). Next, adjust the “WEBSITE DESCRIPTION” with a few sentences about your website.

The file will need to be saved as plain text (txt). For mac operators using TextEdit, head to “Preferences” and choose “Plain text” instead of “Rich text”. Now, save the file as “index.html” before opening it in a browser to check that it’s working.

Log in to your Unstoppable Domains account. Click on “Go Domains”, then “My Domain”, and “Manage”. Next, select the “Website” option on the sidebar menu. This will present you with three website options. Choose the second option and select “Upload Website Files”. Then, choose “Upload” and select your site’s “index.html” file (note: the maximum file size is 20 MB). Now, click on “Launch Website”, and your website and Web3 domain will be connected!

How to View Web3 Domains in Google Chrome

As the Web3 evolution is still in its infancy, it is not yet possible to open your Web3 website directly using traditional browsers. However, it is not impossible with two different configurations to view your Web3 domains on the blockchain.

One option is to reconfigure a custom DNS provider using Google Chrome. Head to the settings menu and choose “Privacy and Security” and then “Security”. Click on “With” under the “Use secure DNS” option and next to the custom drop-down list, and paste in Unstoppable Domain’s DNS resolver:

https://resolver.unstoppable.io/dns-query

Now, you can access your Web3 domains in two different ways:

“http://myname.crypto” (use Web3 domain with HTTP, not HTTPS) or “myname.crypto/“(using a Web3 domain with a forward hash).

An alternative option is to install the Unstoppable extension, which is compatible with all Chromium-based browsers, including Brave and Edge. However, the extension will only resolve “.crypto”, “.eth”, and “.zil” websites directly in Chrome. Simply head to the Google Chrome web store and paste “Unstoppable Extension” in the search bar. Then, select “Add to Chrome” and confirm. As a result, the extension should be installed and will resolve Unstoppable Web3 websites within a few seconds!

Exploring How to Build a Web3 Website with Web3 Domains – Summary

Web3 domains are an innovative evolution of traditional Web2 domains offering multi-utility value as a wallet address. Moreover, Web3 domains are seamlessly integrable with traditional Web2 websites with a variety of options available. We hope our “How to Build a Web3 Website” article was helpful and assists in the creation of your own decentralized website.

If you’re a reader keen to dive deep into blockchain and develop your own applications, look no further! OurEthereum Dapp Programmingcourse is the best place to start! Discover end-to-end development of decentralized applications (dapps) operating on the number one smart contract chain, Ethereum! Learn from industry experts about the top Web3 development tools, includingWeb3.js, MetaMask, Truffle, andGanache! Kickstart your blockchain career with Moralis Academy today!