Host a website using IPFS, IPNS, and DNSLink
This is a quick tutorial that will teach you how to:
- Host a simple static website on IPFS.
- Use IPNS to keep a single id(address) when you change the content of the site
- Use DNSLink to substitute the IPNS id with human-readable address
Install, Initialize, and Connect IPFS to Public Network
You can follow these instructions to install, initialize, and connect IPFS to public network.
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).
Save these files in a folder named site.
index.html
<!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>
<span>Hosting on IPFS is SimpleAsWater</span>
</body>
</html>
style.css
h1 {
color: #3f51b5;
}
Add to IPFS
Next, you need to add the site to IPFS.
$ ipfs add -r site/
You should see something like this:
added QmaL9R8Mxpgn7gxiqYytccM3BWX1FZfSRNGPJChu62Xe2B site/index.html
added QmazEzEvcnQ6QRdMCMYPMFphen85G93x7qKpxgeCH2FFmu site/style.css
added QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T site
The hash on the last line is the root of your site, you can visit is by opening http://localhost:8080/ipfs/<your hash here>.
You can also view the website from the public IPFS gateway, but the website may take minutes to hours to be available on the public gateway.
https://gateway.ipfs.io/ipfs/QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T
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).
If you want to know more about IPNS and How it Works, head here.
$ ipfs name publish <your site hash>
This may take a few minutes. We will see how to do this faster using DNSLink below.
You will see something link this after your website has been published using IPNS.
Published to QmdZZgjYoh9sQUonNyefkMyXhEMXFC2rGvhXsJAbAPsF55: /ipfs/QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T
That will return your peerID(the bold text above) and the hash you are publishing to it. You can confirm by running:
$ ipfs name resolve <peerId>
This will also a few minutes. After this is executed, you will see something like this:
/ipfs/QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T
or you can view https://gateway.ipfs.io/ipns/<peerID> (notice the directory is ipns not ipfs). This will also a few minutes.
After a few minutes, you will be able to see your website:
https://gateway.ipfs.io/ipns/QmdZZgjYoh9sQUonNyefkMyXhEMXFC2rGvhXsJAbAPsF55
IPNS forgets(Time to Live System) published names after about 12 hours. You might want to run a cron job to republish within 12 hours.
Using DNSLink
You have to host your website on a hosting service like AWS, GoDaddy to do the rest of the tutorial. Otherwise, you can end your tutorial here :)
IPNS is not the only way to create mutable addresses on IPFS. You can also use DNSLink which is currently much faster than IPNS and also uses more readable names.
A DNSLink address looks like an IPNS address, but it uses a domain name in place of a hashed public key:
/ipns/simpleaswater.com
Pretty, right? Let's see how it's done.
I'm using GoDaddy to host our static website. You can use any other hosting service too.
You have to add a DNS TXT record, like the one below.
If you don't know how to add a TXT record, just search for "add DNS txt record to <your hosting service name>".
| Name | Record Type | Value |
|---|---|---|
| simpleaswater.com | TXT | "dnslink=/ipns/[peerID]" |
Now, wait for a few minutes for the changes to take effect.
And, Voila! Now we can access our cute little website using a pretty link.
https://gateway.ipfs.io/ipns/simpleaswater.com