Decentralizing your Website. IPFS + ENS | by Lucas Kohorst | Towards Data Science

When hosting a website usually you use a dedicated VPS like Digital Ocean, Linode, Google, or Amazon. After setting up your server you can register a domain at Google Domains or NameCheap. The last step is editing your DNS records to point your domain at your server. Now you can access your website by navigating to your domain name. However, there is a problem with this. Your VPS controls the hosting of your site and the domain name service you went with maintains control of your domain. What happens if your VPS goes down or the company you are using is suddenly blacklisted in your country? What if ICANN takes your domain from you? Or your domain name service shuts down?
While these are very unlikely they are important and get you thinking about what would you do if you couldn’t host your website anymore or your domain was taken away.
Using IPFS (InterPlanetary File System) and ENS (Ethereum Name Service) you can host and serve your website in a completely decentralized way.
IPFS is described as
A peer-to-peer hypermedia protocoldesigned to make the web faster, safer, and more open
You can think of IPFS as HTTP or like a CDN (Content Delivery Network). It is a way of querying resources, except rather than the resources being hosted at a few large data centers controlled by Google, Amazon, etc. the files are decentralized and hosted across various nodes run by anyone across the world.
HTTP looks up resources based on the URL, but IPFS uses hashes to look up resources on its network.
An example of an IPFS hash is QmS4ustL54uo8FzR9455qaxZwuMiUhyvMcX9Ba8nUH4uVv and can be accessed through a gateway like Cloudfare such as cloudflare-ipfs.com/ipfs/QmS4ustL54uo8FzR9455qaxZwuMiUhyvMcX9Ba8nUH4uVv.
This hash points to the starting files for hosting your own IPFS Node and as you can see it only shows links to other files.
But an IPFS hash can also point to a website such as tornado.cash (a crypto mixer) which just recently was deployed to IPFS.
You can access it through the ipfs.io gateway ipfs.io/ipfs/QmRvFZwyoJeMDCcdSiK15m7Vn2n1BFnz14WNwVxrhizzX5/.
In summary, IPFS provides a few major benefits
✅ Decentralized Content Network
✅ Immutable
✅ Censorship Resistant
You can deploy your website to IPFS by starting your own node. First download the IPFS go implementation then open a terminal and run
ipfs daemon 
You should then see the following output
Initializing daemon...go-ipfs version: 0.4.22-Repo version: 7System version: amd64/darwinGolang version: go1.12.7Swarm listening on /ip4/127.0.0.1/tcp/4001Swarm listening on /ip4/192.168.1.7/tcp/4001Swarm listening on /ip6/::1/tcp/4001Swarm listening on /p2p-circuitSwarm announcing /ip4/127.0.0.1/tcp/4001Swarm announcing /ip4/192.168.1.7/tcp/4001Swarm announcing /ip6/::1/tcp/4001API server listening on /ip4/127.0.0.1/tcp/5001WebUI: http://127.0.0.1:5001/webuiGateway (readonly) server listening on /ip4/127.0.0.1/tcp/8080Daemon is ready
Now you are ready to pin your site
ipfs add index.htmladded QmY9cxiHqTFoWamkQVkpmmqzBrY3hCBEL2XNu3NtX74Fuu index.html6 B / 6 B [=========================================================] 100.00%
In order to ensure that your site stays on the network, you can pin it to your local node
ipfs pin add QmY9cxiHqTFoWamkQVkpmmqzBrY3hCBEL2XNu3NtX74Fuupinned QmY9cxiHqTFoWamkQVkpmmqzBrY3hCBEL2XNu3NtX74Fuu recursively
You can now navigate to the outputted hash through your gateway and see your site ipfs.io/ipfs/QmY9cxiHqTFoWamkQVkpmmqzBrY3hCBEL2XNu3NtX74Fuu
Pinning to your own node is great, however, what happens if your node goes down or the file(s) you are hosting are deleted and your file(s) are not yet propagated through the network.
A good rule of thumb is to add and pin your site to three IPFS nodes. You could do this by creating your own IPFS cluster or by using a popular pinning service that already has nodes set up. Such as Pintra or Temporal.
For this example, we will be using Pintra. First, navigate to pintra.cloud, sign up and navigate to the upload tab
Upload your single file or a directory for multiple files. You could also pin the hash from when you added and pinned your file to your local node to ensure that it propagates throughout the network.
If you are creating a web app with a framework such as React or Gatsby you can upload your build or public folder to Pintra. Or you can check out IPFS-Deploy to deploy your sites to IPFS in one line.
Now our site is hosted on the decentralized censorship-resistant IPFS network but navigating to ipfs.io/ipfs/QmY9cxiHqTFoWamkQVkpmmqzBrY3hCBEL2XNu3NtX74Fuu is very hard to remember, we need a domain name.
The Etheruem Name Service (ENS) offers
a secure & decentralised way to address resources both on and off the blockchain using simple, human-readable names.
Rather than registering a domain name on a site like Google Domains, ENS is a non-profit organization that offers .eth domains that are immutable and registered on the Ethereum blockchain.
The primary goal of .eth domains was to make cryptocurrency address human readable. However, ENS added support for linking your domain to an IPFS hash so when a .eth domain is entered into your browser it will resolve to your website on IPFS.
For example, my .eth domain is kohorst.eth if you type that domain into your crypto wallet (if it has an ENS resolver) it will resolve to my ETH address. More importantly, if you type kohorst.eth/ into your browser (if it has an ENS resolver like Brave, if not you can type kohorst.eth.link and it will resolve) my personal website (hosted on IPFS) will resolve!
The first step is to purchase your ENS domain. Navigate to app.ens.domains and search for your domain name.
Note: you will need Ether and a Web3 compatible browser/extension in order to purchase an ENS domain. I personally use Metamask and recommend this tutorial on getting started.
Select how many years you would like to purchase the domain for and follow the purchasing steps.
After your sign and verify your transaction you will have to wait while the transaction is verified on the Etheruem blockchain. After the transaction completes you can click on your domain to manage it.
It will look something like this
There is a lot that you can add to your ENS domain your ETH address along with other cryptocurrencies like BTC or LTC, your email, Github or even Twitter user names. Most importantly you can add your IPFS hash.
Click on the add button and under Content add the IPFS hash of your website
You will have to pay a gas fee for the content to be written to the blockchain and after the transaction is verified you should be able to navigate to yourdomain.eth.link and view your IPFS website!
Don’t have any Ether or don’t want your domain to end in .eth? You can point your traditional DNS to your IPFS hash so that you can keep your .com domain. You can read more about it here.
On Google Domains in your DNS you will need to register an A and AAAA record that points to the IP address of a IPFS gateway. You can look up the IPv4 and IPv6 records for an IPFS gateway (a good list of functioning gateways is available here) using nslookup.
I use the ipfs.io gateway its records are
A    209.94.90.1AAAA 2602:fea2:2::1
Register these on your DNS and then create a TXT record with a dns link value like
"dnslink=/ipfs/<HASH>"
That's it! Now your domain will point to your IPFS website.