How I hosted a website on IPFS

May 16, 2018 · 4 min read

So, the last few weeks I was working on my dissertation and I had the chance to study in-depth the Inter-Planetary File System protocol. I’m sure most of you know about it, but for those who don’t, IPFS is a peer-to-peer hypermedia protocol aimed to replace the good old HTTP and make web faster, safer and more open. It is decentralised, uses a similar peer-to-peer protocol to BitTorrent and versioning system to Git. (I will not cover the inner workings of IPFS here, maybe I`ll do that in another post).
However, after finishing my dissertation I wanted to explore IPFS further and built myself a static porfolio website, uploaded on IPFS and voila! Free decentralized hosting.

Discover and review best Blockchain development tools

You can check out my IPFS hosted website here

Now, I know what you think:
— What sort of sorcery is this? —
Fear not, below I will go with you through the steps you need in order to host your website on IPFS.

Step 1: Install IPFS

Download IPFS for your platform, and install it as instructed on official IPFS docs
I use Ubuntu Linux, so after downloading, I will unzip it and install using the following commands:

$ tar xvfz go-ipfs.tar.gz
$ cd go-ipfs
$ ./install.sh

Step 2: Prepare your files

I will asume that you have at available the files you want to upload on IPFS.
Don’t worry if you don’t have them. Below is a quick html annd css examples that you can use, which I copied from w3schools.com. Nothing fancy.

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

body {
    background-color: #ccc;
}

Save these as index.html file and style.css

Step 3: Start IPFS

You can easily start your IPFS node with the command:

$ ipfs daemon

Step 4: Upload to IPFS

My files are stored on the desktop in a folder called 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>. So the example site can be found here:
https://gateway.ipfs.io/ipfs/QmaEBknbGT4bTQiQoe2VNgBJbRfygQGktnaW5TbuKixjYL

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 own node and host it there (and contribute to IPFS network).
Use an IPFS gateway to host your website.

Personally I have used the latter and chosed Infura.io to permanently host my 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/QmaEBknbGT4bTQiQoe2VNgBJbRfygQGktnaW5TbuKixjYL/
Notice that we only changed gateway.ipfs.io to ipfs.infura.io in our link.
This will access the content requested through the infura node and by doing so will permanently create a copy of the files.

Future implementations

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

Website address is ugly and no one will ever remember it. We need a way to make it prettier like something.com or anything.org.
Anytime you make a change to your website and upload it again on IPFS the hash of your content will change, meaning the address of the website will change too.

Currenlty, there is no easy fix for these issues. It is important to remember that IPFS technology is in it’s early days and there is room for it to grow.
These issues are explored by different means of trying to solve them in this article on Hackernoon by Mark Pors.