How to Easily Host a Website on IPFS

A step by step guide to easily host Angular, ReactJS, or VueJS apps on IPFS using Cloudflare and Pinata

Matt Ober
Matt Ober
Jun 14 · 9 min read

How Does Hosting a Website on IPFS Work?

Hosting a website on IPFS requires two things:

  • A retrieval node for you to retrieve the website from IPFS. For most people, this often takes the form of an IPFS gateway.

Source Nodes

A source node is where content is initially added to and made available to the rest of the IPFS network. As other nodes begin requesting the desired content, the source node is where they will initially retrieve it from.

Gateway Nodes

In order to retrieve desired content from the IPFS network, you need to have access to an IPFS node. This node will provide the IPFS network with the cryptographic hash of the content it wants and the IPFS network will find a node with a copy of the content to provide back to the retrieval node.

How to Prepare Your Website for IPFS

Hosting a website on IPFS is slightly different than hosting it on a web server out in the cloud. Your website may require a little bit of tweaking in order to properly be served on the IPFS network.

  • All links within your files should be relative links.

Angular:

For the purposes of this tutorial, it’s assumed that you have a working Angular app. If you do not, check out the Angular Quick Start Guide for more info.

<script>
document.write('<base href="'+window.location.pathname+'"/>');
</script>
ng build --prod --aot

ReactJS:

For the purposes of this tutorial, it’s assumed that you already have a working React app. If you don’t, you can easily create one with Create-React-App.

"homepage": "./",
npm run build

VueJS:

For the purposes of this tutorial, it’s assumed that you already have a working Vue app. If you don’t, you can easily create one with Vue CLI.

module.exports = {
publicPath: './'
};
npm run build

Adding the Website to IPFS

Now that you have our website prepared, you can move to the fun part. Hosting the website on IPFS.

The Easy Way

For those of you who aren’t looking to maintain your own dedicated server to run an IPFS node, Pinata provides an easy alternative. If you haven’t signed up for an account, you can do so for free at: https://pinata.cloud/signup.

The Hard Way

Self-hosting a node on a cloud provider is a good option if you are looking to do everything yourself. If you are looking to go down this path, you can read our guide for the full setup process: How to Deploy an IPFS Node on Digital Ocean.

scp -r yourBuildFolder username@remoteAddress:pathOnRemoteMachine
ipfs add -r /path/to/directory-with-your-website

Double-Check That Your Website Works on IPFS

Before you do anything else, double-check that your website works correctly on IPFS. To do so, visit: https://gateway.pinata.cloud/ipfs/yourWebsiteHash to confirm the website loads correctly.

Improve Your Website with a Domain and Cloudflare

At this point in the guide, you should be able to reach your website by visiting a gateway like so:

Cloudflare as a Gateway Provider

To put a website hosted on IPFS behind a domain name, you need an IPFS gateway. For this guide we’re going to use Cloudflare as a service provider to put our website behind a domain name.

Setting Up Your DNS Records to Point to Cloudflare

To hook your domain name up to Cloudflare and point it to your IPFS website, the following steps need to be taken:

  1. Edit the records so that you have two entries:
  • A TXT record for _dnslink.your.domain with a value of dnslink=/ipfs/yourWebsiteHash

Securing Your Website with Cloudflare

Now that your DNS records are pointing to Cloudflare’s gateway, you should be able to view your website by going to your.domain . But there’s one more step you should take before finishing up and that’s applying a free SSL certificate to your website.

Troubleshooting

Here’s a few common issues you may run into and how to solve them

Gateway Fails to Find Your Website on IPFS

The IPFS network is getting bigger and bigger every day. Sometimes, it can take awhile to find content. If a particular gateway is unable to retrieve your website, there’s a good chance it’s being overloaded from too many people requesting content at once. Try waiting awhile before attempting to retrieve your content on that gateway again.

You Received “Error: Failed to build request to hostname.” When Submitting Your Domain to Cloudflare for the SSL Cert.

If you receive this message after you submit your domain name to Cloudflare, double check and make sure that you’re only submitting your.domain into the text field. Inputs such as http://your.domain or your.domain/ won’t work. For example our example website, https://deploypinata.com/, needed to be entered in as deploypinata.com .

You Received “Certificate is live” but the HTTPS Version of Your Website Isn’t Working

Sometimes these things can take a little bit of time to propagate. Give it about an hour before contacting Cloudflare.

Pinata

The Easiest Way to Use IPFS

Matt Ober

Written by

Matt Ober

Building with IPFS & Ethereum

Pinata

Pinata

The Easiest Way to Use IPFS