Open in app

Sign in

Write

Sign in

How to add site to IPFS and IPNS

Jonybang
Coinmonks
4 min readMay 11, 2018

--

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.

Discover and review best Blockchain softwares

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.jpegadded QmQtJm6VcLdyMa6RqWESPgXsqmiaJ48RXrLFXojPPtHkni my-site/index.htmladded QmZL2UBTwnhcLv66fARL9UV8W8a9ZA4iwTLcaUCsB1u1yW my-site/style.cssadded QmNUhKfcGJyQJnZu3AKn8NoiomDwDCRBicgqPt1YRqJBCz my-site

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’m using 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

Join Coinmonks Telegram Channel and Youtube Channel get daily Crypto News

Also, Read

Ipfs
Blockchain
Web Development
How To
Cats

--

--

Jonybang
Coinmonks

Written by Jonybang

41 Followers
Writer for

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams