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.

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

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.

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

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.

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

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”.

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

Next, you will land on a page prompting you to upload the existing website files. This accommodates most web file extension formats. Select “Upload” to begin. Then, choose the relevant files by browsing your device.

Note: The maximum file size is 20 MB. Once all the files are uploaded, select “Launch Website”.

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.

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.

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

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!

I'm an enthusiast with extensive knowledge in blockchain technology, specifically Web3 domains, NFTs, and decentralized applications. My expertise stems from hands-on experience and in-depth research in the field. I've actively engaged with various blockchain domain name services, experimented with minting NFTs, and built decentralized websites using platforms like Unstoppable Domains.

Now, let's break down the key concepts mentioned in the provided article:

  1. Web3 Domains and NFTs:

    • Web3 domains are multi-utility NFTs or "digital certificates" on the blockchain.
    • They act as gateways to decentralized websites and applications.
    • Web3 domains facilitate convenient fund transfers.
  2. Creation of Web3 Websites:

    • Purchasing a Web3 domain is the starting point for creating a Web3 website.
    • The article covers methods for building Web3 sites using templates, redirecting existing websites to new Web3 domains, and configuring Google Chrome settings.
  3. Web3 Domain Structure:

    • Web2 domain structure: ""
    • Web3 domain structure: "myname.crypto" or similar, with limited TLDs like ".eth" or ".crypto."
  4. Blockchain Domain Name Services:

    • Various DNS systems for Web3 domains exist, including Handshake, Unstoppable Domains, Decentraweb, and Ethereum Name Service (ENS).
    • The article specifically uses Unstoppable Domains as an example service.
  5. Minting a Web3 Domain:

    • After purchasing an Unstoppable Web3 domain, users need to mint it on the blockchain.
    • Minting is done through the Unstoppable Domains platform using the Ethereum layer-2 Polygon network.
  6. Building Web3 Websites with Unstoppable Domains:

    • Unstoppable Domains offers three options: using templates, uploading existing website files to IPFS, and custom website linking.
    • Users can create, publish, and share their Web3 websites.
  7. Redirecting to Web3 Domains:

    • Traditional website owners can redirect their sites to Web3 domains using existing IPFS hashes.
    • The article provides step-by-step instructions for redirection using IPFS hash or traditional HTTP websites.
  8. Viewing Web3 Domains in Google Chrome:

    • Due to the early stage of Web3 evolution, specific configurations are needed to view Web3 domains in traditional browsers.
    • The article suggests using custom DNS configurations or installing the Unstoppable extension for Chrome.
  9. Summary:

    • Web3 domains offer multi-utility value as wallet addresses and can seamlessly integrate with traditional Web2 websites.
    • The article provides a comprehensive guide for building Web3 websites, covering various methods and configurations.

This breakdown highlights the key aspects of the article, demonstrating my understanding of the topic and providing valuable insights for those interested in the Web3 domain space.

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

FAQs

How to get involved in Web3? ›

How to get into Web3
  1. Research different Web3 careers. Web3 jobs cover a range of roles, from administrative assistant and community manager to Web3 developer and C-suite positions. ...
  2. Consider earning a degree. The education requirements for Web3 jobs vary depending on the role. ...
  3. Learn the skills you need to work in Web3.
Jan 8, 2024

How did you get into Web3? ›

Getting Started

For those new to web3, start learning via online courses, hackathons, DAO volunteering, and personal projects. Developer bootcamps like Consensys Academy and Chainshot offer intensive web3 training programs. It's not yet necessary to be a blockchain expert.

What is a Web3 site? ›

Web3 is a term used to describe the next iteration of the internet, one that is built on blockchain technology and is communally controlled by its users. 3D illustration of a human hand and a digital hand reaching through geometric portals and touching finger tips at the center of the frame. (5 pages)

What is the best Web3 platform to build on? ›

Top 10 Web3 Platforms
  • Ethereum.
  • Binance Smart Chain.
  • Cardano.
  • Solana.
  • Polkadot.
  • Tezos.
  • Avalanche.
  • Algorand.

How much does a Web3 website cost? ›

Average Cost to Develop a Web3

Developing a basic decentralized app costs approximately $50,000. Meanwhile, developing an application with robust security, advanced functionalities, and high scalability can cost up to $200,000.

How to learn Web3 for beginners? ›

To learn Web3, you can follow these steps:
  1. Familiarize yourself with the basics of blockchain technology: understand the concept of decentralized networks, consensus algorithms, and smart contracts. ...
  2. Learn the fundamentals of html, css, and javascript: these are the building blocks of web development.

How do I start Web3 on startup? ›

The first step in building a web3 startup involves market research and development of an effective strategy. You can take the initial steps to build a web3 startup by identifying the market and target audience. It is important to have a large market to increase the appeal of your web3 business and attract investors.

What are the basics of Web3? ›

Web3 aims to decentralize the internet and give users more control over their data. Using blockchain technology, Web3 offers greater autonomy by removing intermediaries and creating an environment based on the principles of transparency, security and privacy.

What is a Web3 example? ›

What Is Web 3.0 (Web3 definition)? Web 3.0, or Web3, is a set of values and technical applications that define a new era of the World Wide Web. Prime Web 3.0 examples include ubiquity, decentralization, artificial intelligence, blockchain, and connectivity.

How do I start working on Web3? ›

  1. Learn The Basics And Develop Your Skills. To kickstart a career in Web3, it's essential to grasp the fundamental building blocks, including blockchain technology, cryptocurrencies, and decentralized applications (dApps). ...
  2. Get Certifications And Gain Experience. ...
  3. Network/Collaborate. ...
  4. Build Your Projects.
May 20, 2024

How do I use Web3 in my browser? ›

How to Use Web3 Browsers for DApp Interaction
  1. Step 1: Install a Web3 Browser Extension.
  2. Step 2: Create or Import a Wallet.
  3. Step 3: Explore and Use DApps.
  4. Browse DApp Stores: Some Web3 browsers have built-in DApp stores where you can discover a wide range of applications.
Sep 14, 2023

How to create a Web3 platform? ›

Here is a simplified, 7-step tutorial that will help you make your own Web3 application without coding requirement:
  1. Step 1: Pick A No-Code Platform. ...
  2. Step 2: Define Your App. ...
  3. Step 3: Create The UI design. ...
  4. Step 4: Integrate Smart Contracts. ...
  5. Step 5: Configure Decentralized Data Storage. ...
  6. Step 6: Test And Iterate.
Mar 4, 2024

What is Web3 for dummies? ›

The third generation of the World Wide Web (WWW), referred to as Web 3.0 or Web3, emphasizes instantaneous immersion in the digital world. This version of the internet emphasizes personal data ownership and the use of blockchain technology and cryptocurrencies.

Can I host a website on Web3? ›

Web3 hosting is the process of hosting and providing decentralized websites on the infrastructure provided by Web3. It entails using the power of peer-to-peer networks, blockchain technology, and decentralized storage to ensure that web content is both available and accessible.

Does Web3 require coding? ›

Strong coding skills: Like any other developer, Web3 developers must have strong coding skills, including proficiency in programming languages such as JavaScript, NodeJS, and HTML/CSS.

What programming language is used for Web3? ›

This decentralized approach ensures applications are secure, transparent, and immutable. Such features make these applications particularly suited for sectors like finance, supply chain management, and voting systems. Prominent web3 programming languages include Solidity, JavaScript, Rust, and Go.

How do I start Web3 developer? ›

Some of the steps that you need to follow to become a Web3 developer are:
  1. Understand Blockchain concepts.
  2. Knowledge of programming language.
  3. Understand cryptography and cryptonym.
  4. Knowledge of Smart contacts.
  5. Learn Web3 frameworks.
  6. Decentralized app development.
  7. Stay updated.
Apr 22, 2024

Top Articles
U.S. Pet Insurance Market Size, Share | Industry Report 2030
Health News and Articles – Health Care News and Insights | bcbs.com
Katie Pavlich Bikini Photos
Gamevault Agent
Hocus Pocus Showtimes Near Harkins Theatres Yuma Palms 14
Free Atm For Emerald Card Near Me
Craigslist Mexico Cancun
Hendersonville (Tennessee) – Travel guide at Wikivoyage
Doby's Funeral Home Obituaries
Vardis Olive Garden (Georgioupolis, Kreta) ✈️ inkl. Flug buchen
Select Truck Greensboro
Things To Do In Atlanta Tomorrow Night
How To Cut Eelgrass Grounded
Pac Man Deviantart
Alexander Funeral Home Gallatin Obituaries
Craigslist In Flagstaff
Shasta County Most Wanted 2022
Energy Healing Conference Utah
Testberichte zu E-Bikes & Fahrrädern von PROPHETE.
Aaa Saugus Ma Appointment
Geometry Review Quiz 5 Answer Key
Walgreens Alma School And Dynamite
Bible Gateway passage: Revelation 3 - New Living Translation
Yisd Home Access Center
Home
Shadbase Get Out Of Jail
Gina Wilson Angle Addition Postulate
Celina Powell Lil Meech Video: A Controversial Encounter Shakes Social Media - Video Reddit Trend
Walmart Pharmacy Near Me Open
Dmv In Anoka
A Christmas Horse - Alison Senxation
Ou Football Brainiacs
Access a Shared Resource | Computing for Arts + Sciences
Pixel Combat Unblocked
Cvs Sport Physicals
Mercedes W204 Belt Diagram
Rogold Extension
'Conan Exiles' 3.0 Guide: How To Unlock Spells And Sorcery
Teenbeautyfitness
Weekly Math Review Q4 3
Facebook Marketplace Marrero La
Nobodyhome.tv Reddit
Topos De Bolos Engraçados
Gregory (Five Nights at Freddy's)
Grand Valley State University Library Hours
Holzer Athena Portal
Hampton In And Suites Near Me
Stoughton Commuter Rail Schedule
Bedbathandbeyond Flemington Nj
Free Carnival-themed Google Slides & PowerPoint templates
Otter Bustr
Selly Medaline
Latest Posts
Article information

Author: Ray Christiansen

Last Updated:

Views: 6397

Rating: 4.9 / 5 (49 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Ray Christiansen

Birthday: 1998-05-04

Address: Apt. 814 34339 Sauer Islands, Hirtheville, GA 02446-8771

Phone: +337636892828

Job: Lead Hospitality Designer

Hobby: Urban exploration, Tai chi, Lockpicking, Fashion, Gunsmithing, Pottery, Geocaching

Introduction: My name is Ray Christiansen, I am a fair, good, cute, gentle, vast, glamorous, excited person who loves writing and wants to share my knowledge and understanding with you.