Introduction
In the traditional online space, hosting a website would entail using dedicated or shared hosting plans from platforms such as Hostinger, BlueHost, e.t.c, creating and registering a domain name with services such as NameCheap and Google domains, and lastly pointing your domain to your hosted server.
Having said that, this process appears to be experiencing major setbacks. Centralised registrars and private servers are becoming increasingly vulnerable to phishing attacks, denial of service attacks, hijacking, and other forms of threats. Websites can be taken down because these providers control your content. When this occurs, web content becomes unavailable to end users, increasing the bounce rate.
However, you would want users to have complete access to your content at all times, right? This is where decentralized hosting and serving of your website comes into play.
Decentralized web hosting uses a peer-to-peer system to store content across computer networks (nodes). In this case, even if one node fails, your content is served by other running nodes, ensuring that your content is always available.
In this article, you will learn how to host a static website using the Interplanetary File System (IPFS), Pinata, and Unstoppable Domain (UD), as well as visualize the content in your browser. Here's a quick rundown of what you'll be doing in this article:
- Introduction
- What are decentralized websites
- Prerequisite
- Building your Static Webpage
- Purchasing Domain on Unstoppable domain
- Connecting IPFS hash on UD
- Resolving dWebsites in a browser
- Websites hosted using IPFS + UD(dWebsite)
- Conclusion
Decentralized Websites(dWebsites)
Simply put, dWebsites are websites that serve censorship-resistant content to end users by utilizing the decentralized storage system and blockchain domains. Let us now break down these two concepts and explain why they are important to dWebsites.
dWebsites, as opposed to traditional websites, use decentralized storage (dStorage) systems to ensure that data or websites stored are accessible, have no single point of failure, and cannot be shut down. IPFS is one example of a dStorage system.
The Interplanetary File System (IPFS) is a distributed peer-to-peer system for storing and accessing files, websites, applications, and data. When storing data, IPFS stores data based on its content and returns the content identifier(CID), which is a unique hash of that data. Unlike the traditional web, which uses location addressing, IPFS employs content addressing, which means that files are stored based on their content rather than their location. As a result, you won't be able to change the content of the files while keeping the same CID. Therefore, if the content changes, so does the CID.
Blockchain domains are another essential part of dWebsite. These domain names are required for mapping d-website hash (CID) hosted on IPFS to human-readable names. In contrast to traditional domain naming services (DNS), which are prone to downtime and single-point control, decentralized DNS stores their domain registries on the blockchain, making it resilient.
For the purposes of this tutorial, you will purchase your blockchain domain from Unstoppable Domains.
Now that you know what decentralized websites are, let's get started building one!
Prerequisites
- Must be familiar with Command Line
- Basic Knowledge of HTML, CSS, and Javascript(JS)
Building your Static Webpage
This section demonstrates how I uploaded my simple portfolio website to IPFS.
To host your simple one-page on IPFS, you must have created a index.html file in your project folder and added your CSS and any other assets. To understand the structure, read this guide.
You can host a multipage website in addition to a single-page website. To accomplish this, refer to this guide.
You can find the full implementation of my static website on Github
Deploying to IPFS
After you've successfully created your website project, the next step is to host it on IPFS. In this section, you'll learn how to use IPFS CLI to host your content on IPFS.
Installing IPFS
This section shows how to install IPFS using Javascript. To install IPFS, execute the command below:
npm install -g ipfs
To confirm its download, run the command below:
jsipfs —version
Click this link to see other ways to install IPFS.
Uploading your website to IPFS
After successfully installing IPFS, we need to initialize IPFS. To do this, run the command below:
jsipfs init
The next step is to connect and interact with the IPFS network, by starting the daemon. To do this, run the command below:
jsipfs daemon
Output
Your terminal logs an output, as displayed in the image below. Click on the link to navigate to the IPFS Web UI.
Now that we have IPFS up and running, let's upload our website to IPFS. To do this, open up a new terminal in your project folder and run the command below:
jsipfs add -r .
The -r flag adds recursively, and the “.” indicates we are running the command from the webpage directory.
Output
It returns the hash/CID of the folder uploaded on IPFS
Now you can visualize this content via a gateway. To interact with the IPFS node in your browser, make sure to install the IPFS Companion extension.
https://ipfs.io/ipfs/CID
https://ipfs.io/ipfs/QmSSGVRShvLiVcYVRJMwd56CQ1BnD3jTEcSrkWYyPTspr5
Alternatively, you can make use of IPFS Desktop to host your content. To understand more, you can check out this guide.
Pinning website on Pinata
To ensure that your website content is retained and persistent across the IPFS network, you must pin it. You used the jsipfs add -r. command in the previous step to recursively pin your website to your local node. However, it is best practice to pin important content like this to more than one IPFS node to ensure that the data is always accessible and not removed during garbage collection.
For the purposes of this tutorial, you will pin your dWebsite using Pinata. To begin, you must go to the Pinata website, sign up, and pin your website using the CID that was previously generated.
After successfully signing in, you can now pin your content using the Add File button, as seen in the dashboard below:
Note
The steps for uploading and pinning your website content must be repeated every time you make changes to your files, which is inconvenient. All of the processes listed above can be automated with tools like Fleek. An article about fleek and how to handle automated deployments will be written in the future. Keep an eye out for updates.
What happens now that you have successfully hosted your website content on IPFS and pinned it on Pinata? Take a wild guess.
You got it! You need to buy a blockchain domain.
Purchasing Domain on Unstoppable Domain
Blockchain domains are an important layer in the development of a decentralized website. They ensure that dWebsites are completely censorship-resistant, and that content hosted on dStorage is mapped to human-readable names. You will buy domains from Unstoppable Domains in this guide.
To begin, go to the UD website, sign up, and then purchase your desired domain.
In my case, I used the "Pay with Crypto" option to purchase oxpampam.blockchain. You may select any option that appears to be suitable to you.
After successfully purchasing your domain, you can verify your purchase on viewblock.io.
In the image above, you will see the URL, IPFS hash, owner profile, OpenSea NFT, and the blockchain (Polygon) it was minted on.
Connecting IPFS hash on UD
The next step is to map your IPFS hash to the newly purchased domain. In the following steps, you will connect your IPFS hash to UD.
Step 1: Navigate to your Domain Dashboard
- Login to your UD account
- Select the Account
- Select My Domains
Step 2: Manage Domains
- Select Manage
- On successful page load, click website
Step 3: Manage the Website
To attach the IPFS hash to the domain, let us go through the following process:
- Select Link Website under Custom website linking
- Paste the IPFS hash in the input field provided
- Select Launch Website
- Sign the transactions to update the website hash
The image below represents what your dashboard will look like after uploading the IPFS hash.
Resolving dWebsites in a browser
To confirm that the blockchain domain navigates to your hosted content, you have to paste the blockchain domain into a web browser.
It’s important to note that, by default, the browser cannot resolve the content in the blockchain domain. Thus the need for a tool such as Unstoppable Extension, developed by Unstoppable Domain Team. This extension is used to access blockchain domains. You can download this extension on both Chrome and Firefox.
Having installed this extension, you can now access the website by adding http:// as a prefix to the domain name.
An example is http://oxpampam.blockchain
Brave browser (for desktop and Android) automatically resolves unstoppable domains, and as such, you don’t need to download any extensions.
Websites hosted using IPFS + UD(dWebsite)
The following are examples of websites hosted in a decentralized manner using IPFS and Unstoppable Domains.
- MyEtherWallet: myetherwallet.crypto
- Kyber Network: kyber.crypto
- Ivan On Tech: ivanontech.crypto
- Huddle01: Huddle01.crypto
- Dtube: Dtube.crypto
Here is a list of some of the dWebsites on unstoppable domains
unstoppable.nft@unstoppableweb
/5 Here's some inspiration for your Web3 site:
- Build a personal blog (TimDraper.crypto)
- Launch your NFT (DeadHeads.NFT)
- Inspire the future of gaming (bizesports.x)
- Build educational content (Hashoshi.crypto)
Visit changetheweb.x on Brave to get started!16:02 PM - 07 Sep 2022
Conclusion
In this article, you learned how to host a simple static website in a decentralized manner using IPFS and Unstoppable domains. Additionally, we looked at the downsides of traditional web hosting as opposed to decentralized web hosting. By hosting your website in a decentralized manner, your website becomes more resilient, transparent, and censorship-resistant.
You can take this further by building a multi-page dwebsite. Do share your build.
For more additional guides on building dWebsites using Unstoppable Domains and IPFS, you can check out these guides:
Top comments (2)
Very insightful...How can I contact you?
Hi Din. Thanks for the feedback.
You can reach me on X (Formerly Twitter)