How to add site to IPFS and IPNS

Jonybang
Jonybang
May 11, 2018 · 4 min read

IPFS allows to place p2p content inside web applications and simple web pages. Also you can hosting whole static site in peer to peer(p2p) IPFS network. So other people, who owns IPFS nodes can share your site and be a peer of your content and distribute HTML, CSS, JS and Images from their nodes. After that — if you node stops, the site will live, while someone with an IPFS node will keep a site on his node.

How to get started with your first site in IPFS network:

  1. Run your own IPFS node
  2. Add content to IPFS by simple commands
  3. Use the result content hash(output of command) to get files by link: https://ipfs.io/ipfs/<your hash here>
  4. You can place this link right in img tag by example: <img src=”https://ipfs.io/ipfs/<your hash here>”/>
    Or you can publish sites to IPNS and viewable at the link:
    https://ipfs.io/ipns/my-site.url
Картинки по запросу ipfs

Now let’s describe these 4 points in details:

1. Download and run IPFS node:

https://dist.ipfs.io/#go-ipfs
let’s take a linux amd64 distribution for example:

cd ~/
wget https://dist.ipfs.io/go-ipfs/v0.4.14/go-ipfs_v0.4.14_linux-amd64.tar.gz

Then install it following the instructions here:
https://ipfs.io/docs/install/
In my example:

tar xvfz go-ipfs_v0.4.14_linux-amd64.tar.gz
cd go-ipfs
./install.sh

Now you can init and run the node:

ipfs init
ipfs daemon > ipfs.log &

2. Add content to IPFS node:

Let’s create your IPFS site directory:

cd ~/
mkdir my-site; cd my-site

Now, for example you can download some cat image:

wget -O cat.jpeg https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=350
cat.jpeg

And create index.html and style.css with this content:

Finally add the whole site directory to your node:

cd ../
ipfs add -r my-site/

You should see something like this:

added QmQiuSt4dKVFvi1zkYbrBWgX8CpasLmzux6dWrdfoDq1Qc my-site/cat.jpeg

3. Visit your site by IPFS hash

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

You can get any file by link which you add to IPFS.

4. Publish to IPNS

Despite the fact that you can get a link to the site — when you make changes to it — the link will still point to the previous version of the site. This is because the IPFS is using git-like system for files hashes(hash point to specific version of the file like commit hash). So using this IPFS link you will not be able to get new version of the site.

That’s why we need IPNS — to bind your directory or file to your node peerID. After that — we can get the newest version of site at any time, when using the IPNS link.

Now we want to publish current version of site to IPNS:

ipfs name publish QmNUhKfcGJyQJnZu3AKn8NoiomDwDCRBicgqPt1YRqJBCz

You should see something like this:

Published to QmYmmfn68vkcFDeZz1NTZyEXTixjjUnUS6UaPdMSsUBWxs: /ipfs/QmNUhKfcGJyQJnZu3AKn8NoiomDwDCRBicgqPt1YRqJBCz

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

ipfs name resolve <peerID>

After that — you can visit published version of site by link: https://ipfs.io/ipns/<peerID>

In my example: https://ipfs.io/ipns/QmYmmfn68vkcFDeZz1NTZyEXTixjjUnUS6UaPdMSsUBWxs

In future, when you need to change site content — you can do it, then add new site version to ipfs and publish it again:

ipfs add -r my-site/
ipfs name publish <new site hash>

New site hash will become attached to your peerId, and when user visit the IPNS link — he will get newest version of site.

But this IPNS link is still too long, and not human-friendly. And that’s why I added bonus point:

5. Bind IPNS to domain

To do that — you need to buy a domain, and then change the domain DNS settings.

You can bind IPNS to domain by adding a DNS TXT record of the form

“dnslink=/ipfs/<peerID>”, so you can have paths like /ipns/example.com/2015/09/15/hosting-a-website-on-ipfs/.
For example, I added my-site to the DNS, and now is available through the url https://ipfs.io/ipns/cat.jonybang.ru/

P.S.

Please don’t worry if your or my content is loading too slow. An advantage of IPFS is that the more popular the content, the faster it loads. Because more peers shares you content and the client get more sources and your content become faster.

To improve loading speed of your content — ask friends to share your content, i use this steps to do so:

cd ~/ && mkdir ipfs-files # Create folder to download ipfs content
cd ipfs-files
ipfs get /ipns/cat.jonybang.ru
ipfs add ./cat.jonybang.ru

If you add my example site and other IPFS sites to your ipfs node — you will help me and all InterPlanetary File System(IPFS) community!

P.P.S.

To create multiple sites on your IPFS node — you can generate several named peerId. For example to add new dog site:

ipfs key gen --type=rsa --size=2048 dog-site
ipfs add ./my-dog-site
ipfs name publish --key=dog-site <hash of dog folder>

Follow me on twitter: https://twitter.com/jony_bang

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Jonybang

Written by

Jonybang

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade