Create a Decentralized Website on Ethereum

A decentralized website enables users to interact with one or several blockchain networks. While creating a Web2 website is a relatively straightforward task, developing a decentralized Web3 site can be a bit more complex. However, when you opt-in for the proper tech stack, you can learn how to create a decentralized website on Ethereum in four simple steps:

1. Create a Moralis Account
2. Clone the Ethereum Boilerplate on GitHub
3. Configure Environment Variables
4. Start Your Decentralized Website

We’d like to point out that when we refer to developing a “decentralized website”, we’re actually referring to dapps. Moreover, thanks to Moralis – the ultimate Web3 API provider – you can create a dapp with minimum effort. In fact, the fastest way to accomplish this is by using Moralis’ Ethereum boilerplate (Web3 website template). Using this tool, you can deploy Web3 websites on all leading EVM-compatible chains. 

Access the Ultimate Ethereum Boilerplate on GitHub – https://github.com/ethereum-boilerplate/ethereum-boilerplate 

However, before we show you how to create a decentralized website easily, you ought to know the basics. We’ll first ensure you know what a decentralized website is. We’ll also look at some examples of Web3 websites. Then, we’ll go through the tools you need to create such a site and other shortcuts that can make the process straightforward. Last but not least, we will take you through the necessary steps to complete today’s task. In short, you’ll need to use our Ethereum boilerplate and create your free Moralis account.

What is a Decentralized Website?

As with every new industry, the terminology in blockchain development is not yet completely unified. The same goes for “decentralized websites”. However, in most cases, terms such as “decentralized websites” or “Web3 website” are synonyms for decentralized applications (dapps). Dapps are online applications that include Web3 features and, in some way, enable users to interact with the blockchain by connecting their Web3 wallets. This is called Web3 authentication, which is an essential part of every dapp. However, many dapps are far from entirely decentralized. After all, there are many aspects of applications that perhaps do not require a decentralized approach. Hence, many dapps are actually some sort of Web2-Web3 hybrids. 

On the other hand, many users take decentralization more seriously. For them, any sign of centralization would mean that an application or a website is not decentralized. For these people, decentralized websites would only be the sites that have their domains and entire content hosted in a decentralized manner. Moreover, it’s important to point out that we should all strive toward this true decentralization of the internet. After all, any decentralized solution should involve collective management and a high level of distribution. 

Moreover, in some cases, Web3 infrastructure and protocols are also referred to as decentralized websites. Following that perspective, dapps would be a subcategory or specific kinds of decentralized websites. However, throughout this article, decentralized websites represent all websites that enable users to connect their Web3 wallets and, in turn, enter the crypto domain. These websites are also known as wallet-based websites. So, until the crypto space manages to unify all the related terms, your exact approach to creating a decentralized website depends on which definition you prefer.   

Example Sites

Let’s start by pointing out that the most truly decentralized websites use crypto domains and decentralized storage solutions. These domains come in the form of NFTs (non-fungible tokens). Moreover, since these domains use different protocols, you typically won’t be able to open them with your regular browser. However, you can use an IPFS-supported browser such as Brave:

An example “vitalik.eth” address redirects to the following IPFS address:

The fact that popular browsers do not support crypto domains is just another indication that we are still in the early stages of Web3. So, if you want to access any decentralized website freely, you’ll need a Web3 wallet and an IPFS browser. In fact, these tools will also come in handy when creating a decentralized website.

Additionally, typical examples of crypto domains end with “.eth”. At least the ones provided by the ENS protocol. However, there are other popular protocols, with “Unstoppable Domains” leading the pack, which offer “.NFT”, “.crypto”, “.token”, and many other extensions. However, unlike ENS, most of these protocols are not truly decentralized. Moreover, one well-known example of a decentralized website is the “app.uniswap.org” DEX:

Other types of decentralized websites, also known as infrastructure websites, include DAOs, aggregators, and NFT trading platforms. But again, keep in mind that the level of decentralization varies greatly from project to project. Here are some concrete examples of Web3 websites:

• Financial Services:
  • Aave
  • Curve.fi
  • Compound
  • PancakeSwap
  • 1inch
  • Crypto.com
  • Yearn Finance
• NFT Marketplaces:
  • OpenSea
  • Rarible
  • Magic Eden
  • Immutable X 
  • Nifty Gateway
  • Solanart
  • Atomic Market
• Crypto Gaming Platforms:
  • Axie Infinity
  • Illuvium
  • The Sandbox
  • Gala Games
  • Ultra
• Tokenization and Fractionalization:
  • Cloudname
  • ConsenSys
  • Cryptoslate
  • BitTorrent
  • Decentraland
• Internet Services:
  • Dent Wireless
  • Orchid
  • Basic Attention Token

Tools to Create Decentralized Websites

If there’s one tool you need to focus on when it comes to creating dapps, it is Moralis. With this enterprise-grade Web3 API provider, you can build all sorts of dapps using legacy dev platforms and programming languages. For instance, if you know JavaScript, you can use React or NextJS for your frontend, NodeJS for your backend, and then start interacting with blockchains using Moralis’ Web3 API calls. Moreover, thanks to Moralis’ Auth API, you can cover Web3 authentication with MetaMask, for example. What’s more, Moralis already offers integrations for Firebase, Supabase, Parse Server, Unity, and PlayFab.

To deploy and test your dapps, you will also need a reputable Web3 wallet. When it comes to Web3 development, MetaMask continues to be the most popular choice. Furthermore, to ensure a high level of decentralization, you should ensure that the important content on your website uses decentralized storage solutions. This is where IPFS is the leading option. Nonetheless, we also encourage you to ensure that your domain is properly decentralized. In that case, you’ll want to use ENS as well. 

Note: If you’re not sure what IPFS and ENS are, make sure to check out the “ENS and IPFS – Create Websites for Decentralized Purposes” section below.     

As you advance your Web3 development skills, you’ll probably also want to include some unique on-chain features in your decentralized websites or dapps. In that case, you’ll need to learn how to deploy smart contracts. If you focus on Ethereum and EVM-compatible chains, you will need to use Solidity, Hardhat, and Remix. In addition to all these tools, there are also several precious shortcuts. Themes, boilerplates, smart contract templates, and code snippets that you can simply copy and paste can save a lot of development time.  

Themes, Boilerplates, or Coding from Scratch?

Coding the Web3 backend from scratch usually makes little sense, especially with providers such as Moralis. As such, you can save a lot of time by using high-quality boilerplates and templates. Plus, with these shortcuts, you can have your MVP (minimum viable product) ready markedly quicker. In fact, when it comes to creating MVPs, using themes to have a neat-looking frontend ready instantly makes sense. We don’t know about you, but in our opinion, it makes no sense to waste your time and resources on reinventing the wheel. However, we recommend making your frontend as unique as possible if you want your decentralized application to be a great hit.

Moreover, if you are working with quality boilerplates, templates, and themes, it’s almost always faster and simpler to tweak the code to meet your unique desires than coding from scratch. With that in mind, we’ve created several extremely useful code repositories. When it comes to creating a decentralized website, our Ethereum boilerplate is the ultimate shortcut. You can find the link to this GitHub repo at the outset of this article. 

Additionally, once you start working with smart contracts, you’ll definitely want to utilize verified smart contract templates offered by OpenZeppelin. 

ENS and IPFS – Create Websites for Decentralized Purposes

As explained previously, to actually run your Web3 website as a completely decentralized site, you’ll need to deploy your website to IPFS. You should also use an ENS domain. Hence, it’s important that you know what these two tools are.   

ENS is a distributed, extensible, open-naming service based on the Ethereum chain. The core purpose of ENS is to map human-readable names, such as “john.eth”, to machine-readable identifiers, such as a MetaMask wallet. As such, ENS takes long identifiers (combinations of letters and numbers) and connects them to more comprehensible names or domains. Furthermore, ENS supports “reverse resolution”, which enables us to associate metadata with an Ethereum address. 

Essentially, the main purpose of ENS is quite similar to that of the “domain name system” (DNS). Both protocols aim to provide a more seamless user experience. In that sense, ENS provides the same service for Web3 as DNS for Web2. Accordingly, we can say that ENS simplifies Web3. Check out our complete ENS guide for a deeper dive into this decentralized domain protocol.

When it comes to InterPlanetary File System (IPFS), it’s a sort of decentralized protocol for storing content, including data, websites, files, and applications. Also, IPFS serves to access this data in a decentralized manner. As such, we can use IPFS in many different ways to eliminate the issues of censorship and a single point of failure. 

Furthermore, it is worth pointing out that IPFS utilizes “content-based addressing”. In short, it means that data or content is located based on the content itself rather than the location of that content. So, instead of telling the computer where the information is, IPFS lets us request information based on the actual content. To explore IPFS further, follow the “what is IPFS?” link.

Create a Decentralized Website on Ethereum with Moralis

By this point, you have the basics under your belt, which means you are ready to create a decentralized website on Ethereum the easy way. As such, we are handing you over to the very capable hands of one of our in-house experts. In the video below, he’ll show you how to create a decentralized website in these four steps: 

1. Create a Moralis Account
2. Clone the Ethereum Boilerplate on GitHub
3. Configure Environment Variables
4. Start Your Decentralized Website

Yet, we want to show you what you’ll be working towards. Hence, let’s do a quick demo of our boilerplate Web3 website. The following screenshot displays our example site’s homepage:  

To check out the functionality of the dapp, you need to click on the “Connect Wallet” button to authenticate yourself with your wallet:

By clicking on the above button, your MetaMask extension will prompt you with a signature-request notification. After successfully connecting your wallet with this decentralized website, you’ll be able to explore all of its pages. The first option next to “Home” is “Transactions”, which displays all your transactions. It does so by presenting the on-chain data, including hashes, addresses, gas costs, etc., using a table:

Furthermore, you can also explore your transfers, where you can choose between ERC-20 tokens and NFTs. You can also toggle among the same two options when it comes to “Balances”. For example, here’s how you can check your NFTs: 

By clicking on the “NFT” option above, you’re able to view the NFTs that your connected wallet holds:

After seeing the above demo, you must be eager to start creating a decentralized website. So, here’s the video tutorial that will show you how to accomplish that in less than seven minutes:

How to Create a Decentralized Website on Ethereum – Summary

In today’s article, you learned that creating a decentralized website doesn’t need to be difficult. After all, you can use some excellent shortcuts. However, before we demonstrated how to create a decentralized website with the ultimate Ethereum boilerplate, we provided you with a solid foundation. We explained what decentralized websites are and what makes them truly decentralized. For additional clarity, we even took a look at some example Web3 sites. Next, we told you what tools you need to become a developer of decentralized websites or dapps. Finally, you had a chance to use the boilerplate and create your own decentralized website.

Moving forward, we encourage you to try making your website more unique. So, tweak its homepage, change the logo, and add other Web3 features. Moreover, you can go live with your decentralized website. In that case, make sure to use ENS and IPFS to do it in a truly decentralized way. If you need additional guidance, make sure to check out the Moralis docs, the Moralis YouTube channel, and the Moralis blog. These are also the outlets to explore other development tutorials. For instance, some of the latest topics cover the fastest way to build avalanche dapps, how to create Cronos dapps, how to build Polygon dapps, how to use a multichain NFT API, and much more.

Last but not least, we must also point out that the blockchain industry offers many job opportunities. But, to go full-time crypto, you need to have the right knowledge. This is where Moralis Academy enters the picture. For example, you can master DeFi in 2022 or become blockchain certified by enrolling in any of Moralis Academy’s other courses.