Gio d'Amelio

The Ramblings of a Random Programmer

Blog
History

  

Hosting a Website on IPFS

Sep 15, 2015 · 2 minute read · 0 Comments
IPFS IPNS tutorial for-future-me

This is a quick tutorial that will teach you how to host a simple static website on IPFS, and use IPNS to keep a single id when you change the sites content

Step 1. Install IPFS

Install IPFS as described at https://ipfs.io/docs/install/

Step 2. Create a simple static site

All you need is a simple static html page, as long as ALL the links are relative. For the purposes of this tutorial I have put a simple hello world on gist (direct download, view).

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Hello IPFS!</title>

  <link rel="stylesheet" href="./style.css" />

</head>

<body>

  <h1>Hello IPFS!</h1>

</body>

</html>

view raw
index.html
hosted with ❤ by GitHub

h1 {

  color: green;

}

view raw
style.css
hosted with ❤ by GitHub

Step 3. Add to IPFS

Next you need to add the site to IPFS.

$ ipfs add -r site/

You should see something like this

added QmTVJ4XtUhqb6KMW8kxDwArVweACcy7VXAfinEks9Fd8cJ site/index.html
added QmZL2UBTwnhcLv66fARL9UV8W8a9ZA4iwTLcaUCsB1u1yW site/style.css
added QmeYxwj4CwCeGVhwi3xLrmBZUUFQdftshSiGLrTdTnWEVV site

The hash on the last line is the root of your site, you can visit is by opening https://gateway.ipfs.io/ipfs/<your hash here>. So the example site is at https://gateway.ipfs.io/ipfs/QmeYxwj4CwCeGVhwi3xLrmBZUUFQdftshSiGLrTdTnWEVV

Step 4. Publish to IPNS

Now you have a simple static site hosted on IPFS. The problem is, whenever you update your site, the hash will change, and any links you have shared will continue pointing to the old version. You need a way to always share the latest hash. That’s where IPNS comes in. It allows you to store a reference to an IPFS hash under the namespace of your peerID (hash of your public key).

$ ipfs name publish <your site hash>

That will return your peerID and the hash you are publishing to it. You can confirm by running

$ ipfs name resolve <peerId>

or by viewing https://gateway.ipfs.io/ipns/<peerID> (notice the directory is ipns not ipfs).

Step 5. Done

That’s it. You’re done. Whenever you update your site, just do step 4 again, and IPNS will make sure anyone asking for your peedID gets the hash of your latest site.

 Recommend Recommended
- Discussion Recommended!
  
  Recommending means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!
  Find More Discussions
⤤ Share
- Share this discussion on
  - Twitter
  - Facebook
Sort by Best

Be the first to comment.

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Hosting a Website on IPFS · Gio d'Amelio

Gio d'Amelio

Hosting a Website on IPFS

Step 1. Install IPFS

Step 2. Create a simple static site

Step 3. Add to IPFS

Step 4. Publish to IPNS

Step 5. Done

Discussion Recommended!

in this conversation

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Hello IPFS!</title>
	<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
	<h1>Hello IPFS!</h1>
	</body>
	</html>