Beginners Guide To Building A Static Decentralized Website(dWebsite) Using IPFS + Unstoppable Domains
Tags: web3, blockchain, decentralizedwebsites, ipfswebsitetutorial
Published: 2023-03-14 14:38:38

## 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](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/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](#Introduction)
* [What are decentralized websites](#Decentralized Websites(dWebsites))
* [Prerequisite](#Prerequisite)
* [Building your Static Webpage](#Building your Static Webpage)
    * [Deploying to IPFS](#Deploying to IPFS)
    * [Pinning website on Piñata](#Pinning website on Piñata)
* [Purchasing Domain on Unstoppable domain](#Purchasing Domain on Unstoppable domain)
* [Connecting IPFS hash on UD](#Connecting IPFS hash on UD)
* [Resolving dWebsites in a browser](#Resolving dWebsites in a browser)
* [Websites hosted using IPFS + UD(dWebsite)](#Websites hosted using IPFS + UD(dWebsite))
* [Conclusion](#Conclusion)
	
## Decentralized Websites(dWebsites)

![dweb-illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zryy0ja5ct5o7djw4nuc.png)

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](https://www.computerlanguage.com/results.php?definition=location-based+addressing#:~:text=Identifying%20data%20by%20its%20physical,ppsx.), 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](https://unstoppabledomains.com/).

Now that you know what decentralized websites are, let's get started building one!

## Prerequisites
* Must be familiar with [Command Line](https://www.codecademy.com/learn/learn-the-command-line)
* Basic Knowledge of [HTML](https://www.w3schools.com/html/), [CSS](https://www.w3schools.com/css/), and [Javascript(JS)](https://www.w3schools.com/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](https://docs.ipfs.tech/how-to/websites-on-ipfs/single-page-website/#add-your-site).

You can host a multipage website in addition to a single-page website. To accomplish this, refer to this [guide](https://docs.ipfs.tech/how-to/websites-on-ipfs/multipage-website/).

You can find the full implementation of my static website on [Github](https://gist.github.com/AyDeveloper/eda999a4109d4fc6c558a68a2726b8c3) 

### 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](https://docs.ipfs.tech/install/command-line/) to host your content on IPFS.

**Installing IPFS**

This section shows how to install IPFS using Javascript. To install IPFS, execute the command below:

```bash
npm install -g ipfs
```
To confirm its download, run the command below:

```bash
jsipfs —version
```
Click this link to see other ways to install [IPFS](https://ipfs.tech/#install).

### Uploading your website to IPFS

After successfully installing IPFS, we need to initialize IPFS. To do this, run the command below:

```bash
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:

```bash
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.

![dweb-ipfs-web-ui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dbqu73sas1z1ludun2q.jpeg)

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:
	
```bash
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

![dweb-content-identifier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce0i3wr5egq65t6jrqq1.jpeg)

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](https://docs.ipfs.tech/install/ipfs-companion/#prerequisites) extension.

```bash
https://ipfs.io/ipfs/CID
https://ipfs.io/ipfs/QmSSGVRShvLiVcYVRJMwd56CQ1BnD3jTEcSrkWYyPTspr5
```
	
Alternatively, you can make use of [IPFS Desktop](https://docs.ipfs.tech/install/ipfs-desktop/) to host your content. To understand more, you can check out this [guide](https://docs.ipfs.tech/how-to/websites-on-ipfs/single-page-website/#install-ipfs-desktop).
	
### Pinning website on Pinata
To ensure that your website content is retained and persistent across the IPFS network, you must [pin](https://docs.ipfs.tech/how-to/pin-files/) 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](https://docs.ipfs.io/concepts/persistence/#garbage-collection).

For the purposes of this tutorial, you will pin your dWebsite using Pinata. To begin, you must go to the [Pinata website](https://www.pinata.cloud/), 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:

![dweb-to-pinata](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88j7g217ndhfv3q2m4hm.jpeg)

![dweb-pinned-pinata](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h28hhi7eybomgfa1tkyv.jpeg)

> **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](https://fleek.co/). 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](https://unstoppabledomains.com/), sign up, and then purchase your desired domain.

In my case, I used the **"Pay with Crypto"** option to purchase [oxpampam.blockchain](http://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](https://viewblock.io/unstoppable).

![dweb-viewblock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0yr4qya781foxmhiki0.jpeg)

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** 

![dweb-UD-My-Account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt1elcobpiqbzvmll6np.png)


![dweb-UD-Domain-name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d47pirgomtr670a5isfk.png)

**Step 2: Manage Domains**
* Select **Manage**
* On successful page load, click **website**


![dweb-UD-website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf7duzjfairvdqazgz4p.png)

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

![dweb-final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kijgk8vjx583p77owd3f.png)

## 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](https://chrome.google.com/webstore/detail/unstoppable-extension-vie/beelkklmblgdljamcmoffgfbdddfpnnl?hl=en-US&authuser=0) and [Firefox](https://addons.mozilla.org/addon/unstoppable-extension/). 

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. 

1. MyEtherWallet: _myetherwallet.crypto_
2. Kyber Network: _kyber.crypto_
3. Ivan On Tech: _ivanontech.crypto_
4. Huddle01: _Huddle01.crypto_
5. Dtube: _Dtube.crypto_

Here is a list of some of the dWebsites on unstoppable domains

{% embed https://twitter.com/unstoppableweb/status/1567543948805120000?s=20 %}


## 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:
* [Unstoppable Domains](https://github.com/unstoppabledomains/decentralized-websites)
* [DApps Delivery Guide](https://dapps-delivery-guide.readthedocs.io/en/latest/index.html)
* [IPFS](https://docs.ipfs.tech/how-to/websites-on-ipfs/multipage-website/#prerequisites)