Summary

This context provides a comprehensive guide on how to add a website to the InterPlanetary File System (IPFS) and IPNS, detailing the steps to host a static site on a peer-to-peer network, ensuring content persistence and accessibility through decentralized distribution.

Abstract

The article "How to add site to IPFS and IPNS" explains the process of hosting a static website on the IPFS network, which allows for peer-to-peer content sharing and distribution. It outlines the necessary steps, including setting up an IPFS node, adding content to the IPFS network, and using IPNS to update and serve the latest version of the site. The guide emphasizes the benefits of IPFS, such as content persistence even if the original node goes offline, and the advantages of IPNS for updating content. It also provides instructions on how to bind an IPNS link to a domain name for easier access and discusses methods to improve content loading speed by encouraging more peers to share the content. Additionally, the article touches on advanced topics like managing multiple sites with named peerIDs and invites readers to follow the author on social media for further updates.

Opinions

The author believes that IPFS's peer-to-peer content hosting is superior to traditional web hosting because it ensures that content remains available as long as someone with an IPFS node is hosting it.
The article suggests that using IPNS is crucial for serving the most recent version of a site, as IPFS links point to specific versions of files.
The author expresses that IPFS content loading speed can be improved by having more peers share the content, indicating a community-driven approach to content distribution.
There is an opinion that IPNS links, while functional, are too long and not user-friendly, which is why binding IPNS to a domain is recommended.
The author seems to be an advocate for decentralized technologies, encouraging the use of IPFS and sharing of content within the community to support the InterPlanetary File System ecosystem.
The inclusion of social media links suggests that the author values community engagement and ongoing communication with readers interested in blockchain and decentralized technologies.

How to add site to IPFS and IPNS

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:

Run your own IPFS node
Add content to IPFS by simple commands
Use the result content hash(output of command) to get files by link: https://ipfs.io/ipfs/<your hash here>
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

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

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

added QmQtJm6VcLdyMa6RqWESPgXsqmiaJ48RXrLFXojPPtHkni my-site/index.html

added QmZL2UBTwnhcLv66fARL9UV8W8a9ZA4iwTLcaUCsB1u1yW my-site/style.css

added 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/. 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/

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/”, 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

Copy Trading | Crypto Tax Software
Grid Trading | Crypto Hardware Wallet
Crypto Telegram Signals | Crypto Trading Bot
Best Crypto Exchange | Best Crypto Exchange in India
Bitget Review | Gemini vs BlockFi | OKEx Futures Trading
Best Crypto Trading Bots in the US | Changelly Review
Earn Passive Income Using Crypto Arbitrage In India
Huobi Review | OKEx Margin Trading | Futures Trading
Best Crypto APIs for Developers
Best Crypto Lending Platform
An ultimate guide to Leveraged Token