A step by step tutorial for creating your own full crypto website
No programming skills required!
Before getting started, we need to make sure that all necessary tools are available and accessible. I recommend using the following:
- Nicepage (free version sufficient)
- Metamask (or other equivalent Ethereum wallet)
- Visual Studio Code (or similar HTML environment)
- Unstoppable Domains (free account, domains from $40)
- Opera Browser or Brave Browser (latest version)
- Pinata cloud service for IPFS (free account sufficient)
It seems like a lot to prepare at a first glimpse until you recognize that everything works out quite simply. We will walk through the tutorial using my own website called bitcoin-book.crypto as an example. If you try to get there using a common web browser, you will find out that displaying this kind of page is not yet supported. Therefore, we are in need to have either Opera or Brave ready to use. Currently, they are the only two browsers, which are natively supporting webpages with a .crypto domain.
First, I want to address where you can pick up such a domain name ending with crypto.
Obtaining an unstoppable domain
As the title says, these domains are so-called unstoppable domains, and this is where you can buy one of them. Move to https://unstoppabledomains.com/ and find the domain name you like the most. At the time of writing, you do not have to be very creative because most domains are still for sale in this early stage of web3. Many of them are starting from $40 each.
In my case, I picked the one called bitcoin-book (and I already own some more). Further, they suggest similar domains in case your favorite is no longer available.
If you care about the NFT hype, you will be happy to see that each of the domains comes as an NFT directly into your Ethereum wallet. You are the only person to own this website token. Additionally, this is the first reason why you need an Ethereum wallet address.
Get yourself an Ethereum wallet (if not done already)
Unstoppable domains provide a functionality called claiming after the purchase was executed. Claiming means we need to store our domain NFT in our wallet by interacting with a smart contract on the Ethereum blockchain. Therefore we are executing Metamask or any other Ethereum wallet that enables you to sign transactions. As soon as the transaction is finally processed by the blockchain, we can find the related NFT in our wallet.
Now, you are equipped with your first crypto domain and ready to start preparing the look and content of your web page.
Design your personal website with Nicepage
Nicepage is an easy-to-use software tool for creating web pages per drag and drop, yet without the need of understanding or writing code in HTML. However, the HTML outcome is what we want to get from Nicepage to upload it on the internet.
But first, we will focus on some design aspects. The software provides a lot of templates, called blocks, which you can use for an easy start in visualizing your page. Within these blocks, you can place pictures, buttons, text space, and much more. Additionally, each element is linkable to other web pages or files. You will see how simple it is to create a concept of your own page in minutes. Below you can see how I illustrated my bitcoin-book.crypto website with Nicepage.
The last step in Nicepage will be the output of your page as HTML code, which can be done using the export function. Find the export button in the top right corner of the header menu.
Preparing the HTML code for Ethereum ads
If you do not want to earn with ads on your website, you can skip this section.
Okay, I admit, we have to look at some HTML code to implement the Ethereum ads. However, it will be not harder than copy and paste some text. Although, I find it interesting to see an early-stage project bringing ads to the blockchain for selling some space on your website to earn ETH.
We want to replace the right picture next to the medium articles with an Ethereum ad.
Therefore we open both HTML files created from Nicepage, namely, the index and the file named as your main page with, for example, Visual Studio Code.
The only programming-like step to do is the following: Replace the source line of a picture with the HTML snippet, which you receive from https://ethereumads.com/, as seen in the following pictures. Therefore you need to have your Ethereum address at hand.
Having the code section pasted, you can close the coding environment and open the HTML file with a web browser. If successful, it will look like this.
(In case you like this tutorial and want to support my work, feel free to use the affiliate links on my crypto website.)
Upload the final website with Piñata and unstoppable domains
As you hit the export button in Nicepage, you received a folder repository with data, including the HTML files. We need this complete folder to pin it onto the so-called interplanetary file system (IPFS), a new store of data on the internet, yet in a decentralized way. The node provider https://pinata.cloud/ makes IPFS nodes easy to access for everyone. We will sign-up there for free and get 1GB of storage for our data.
Uploading the complete folder to Piñata creates an IPFS Hash for your data, which we need for the final step.
Make your data unstoppable!
Everything is now ready to get released into the new decentralized web3! Having our IPFS hash prepared and copied from Piñata, we move back to unstoppable domains and head to manage our website. The picture below illustrates where to put in the IPFS hash.
Finally, we click save all changes at the bottom of the website, a new blockchain transaction will be initiated, and that is it.
It’s a wrap!
Use Opera (recommended) or Brave to display your crypto website
As of now, there are only two web browsers compatible with IPFS domains. These are Opera and Brave. From the moment your Ethereum transaction is completed, you can open the Opera browser and type in your domain. For this case, we will type in bitcoin-book.crypto and here we go!
A little tasty treat: There will be no additional provider fees or hosting fees ever! Once the blockchain is updated, it will stay there forever (or until you delete it).
