Hosting a Website on IPFS like a PRO
By: Segun Joshua
Tags: Ipfs Tutorial, Ipfs, Website, Blockchain, Node

Before we take a big dive into this subject, let us first ask ourselves what is IPFS?

IPFS is a peer-to-peer (p2p) filesharing system that aims to fundamentally change the way information is distributed across & beyond the globe. IPFS consists of several innovations in communication protocols and distributed systems that have been combined to produce a file system like no other. So to understand the full breadth and depth of what IPFS is trying to achieve, it’s important to understand the tech breakthroughs that make it possible.

IPFS aimed to replace the good old HTTP and make the web faster, safer and more open. It is decentralised, uses a similar peer-to-peer protocol to BitTorrent and versioning system to Git.

You can visit this link to have a beginner understanding of this innovative technology:

How do we get started by hosting a website on this network?

Step 1: Install IPFS

Download IPFS, and install it as instructed on the official IPFS documentation web page. I recommend you to use Ubuntu, so after downloading, unzip it and install using the following commands:

$ tar xvfz go-ipfs.tar.gz

$ cd go-ipfs

$ ./install.sh

Step 2: Prepare your files

Let’s assume that you have the available files you want to upload on IPFS.

You can create a quick HTML and CSS document by the example given below. Use w3schools.com as your guide.

HTML

<!DOCTYPE html>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html> CSS

body {

background-color: #ccc;

} Save these files in a folder as **index.html** file and the second code as **style.css**.

Step 3: Start IPFS

Start your IPFS node with the command:

$ ipfs daemon

Step 4: Upload to IPFS

Create a file folder and save it in your preferred location you can name it test-ipfs.

Running the following command from your terminal will add the whole folder to the IPFS and generate an address for each of your files:

$ ipfs add -r test-ipfs

Output:

added QmX6Q9HfSNwDZuXvQRMNewmPUGp8uS5Ef6dPbF2AYw792M test-ipfs/index.html

added QmXBuwyFQvGy5Zq5MUW5FxcFfxw1YFnbsPuHLYpZUZ82Rd test-ipfs/styles.css

added QmaEBknbGT4bTQiQoe2VNgBJbRfygQGktnaW5TbuKixjYL test-ipfs

The hash generated on the last line is the root of your site. You can access it by opening:

https://gateway.ipfs.io/ipfs/<your hash here>. Check site example [here]



Step 5: Access your website through a gateway

IPFS will host your website as long as it is accessed by other peers as it propagates to other nodes when it is accessed. Considering this, there are a few ways to make sure your website is accessible anytime as follows: Run your node and host it there **(by doing this you are contributing to the IPFS network).**



Use an IPFS gateway to host your website.

Running your node to host your website might be a bit costly. I recommend you use Infura.io so you can permanently host your website.

You can simply do the same by accessing the hash generated for your content through their gateway as follows: **https://ipfs.infura.io/ipfs/<your hash here>.**

Notice the change in gateway address, the only difference is, it was changed from **https://ipfs.io** to **https://ipfs.infura.io.** So you can access the content requested through the infura node and by doing so, it will permanently create a copy of your files.



Future implementations

Hosting your content on IPFS using infura is a great way to start with. However, there are a couple of issues with the whole IPFS approach:

* Website addresses are ugly and no one will ever remember it. We need a way to make it prettier like example.com or anything.org.

* Anytime you make a change to your website files and upload it again on IPFS the hash of your content will change, meaning the address of the website will change too.



Currently, there is no easy fix for these issues. It is important to remember that IPFS technology is in its early days and there is room for it to grow.