How to leverage Cloudflare and IPFS distributed web to host a free high-availability site

The IPFS distributed web makes it easy to share files across the web from a home computer. Cloudflare can extend IPFS by allowing you to use a custom domain at no cost.

IPFS

The distributed web is a peer-to-peer (P2P) network that copies data across a network of computers and serves them in a decentralized way. Computers that participate in the P2P network are both clients and servers (nodes), and the network is considered resilient because content can remain available even if some nodes go offline.

The most popular distributed web solution is IPFS. IPFS is a P2P hypermedia protocol designed to make the web faster, safer, and more open. Content added via IPFS gets a distinct content identifier (CID) based on the file’s cryptographic hash. When people access the CID via a gateway or the IPFS protocol, it’s delivered by a node on the network instead of getting the content from a dedicated server. For example, this image is being served from the IPFS distributed web, and this is its unique hash: QmaTxgco6wsqv3eHKqg1gzyHNaSjDMQwqwHpDUuipF1nPM

Shortlife Clock
Image being served from IPFS distributed web and pinned at Pinata

Becoming an IPFS node is relatively easy. It can be run using a command-line interface (CLI) or as an app with a graphic user interface (GUI) on Windows, Mac, and Linux.

With the same Mac mini I use at my home to self-host WordPress with Cloudflare’s Automatic Platform Automation, I installed the macOS IPFS app. Once installed, the IPFS node runs in the background and adds an icon to the menu bar. Clicking on the icon displays a list of controls and options for managing the node.

IPFS macOS app menu
IPFS macOS app menu

The Status, Files, and Peers options will open the app’s window. From there, you can check the status of your node, add files, and change settings.

IPFS macOS app
File manager for IPFS macOS app

Adding a file is a simple process. Once it’s added, you can get a publicly accessible URL that uses the ipfs.io gateway, and it will be distributed and served from other nodes in the background.

IPFS presents an excellent way to share files. It’s reminiscent of the basic file sharing feature of Droplr and CloudApp. You can add a file and then share the URL or CID for people to access it. The only thing missing feature is a built-in URL shortener.

Using IPFS to host a site with Cloudflare

IPFS restores the spirit and democratization of the internet by making it easy for anyone to share content online. Its existence is driven by certain ideals, with one of those being the desire for data permanence. Data permanence aims to fight censorship and keep a historical record of content for reference.

IPFS’ data permanence makes it impossible to edit content and virtually impossible to delete it. That means if you want to update your content, a new version of it will have to be added to IPFS, and it will be assigned a new CID. Data permanence creates a dilemma for someone who wants to use IPFS to host a site because each time they make a change, it creates a new CID.

Fortunately, there’s a workaround that enables you to use a domain name for the site and update the content without changing the URL.

Adding a site to IPFS

A site on IPFS can be a single page or have multiple pages. The main caveats are the site must be static, and its internal links and assets need to be relative to the top-level folder containing the site.

In most cases, sites, including single-page sites, will have assets like images. Therefore, I recommend putting everything in a folder. The single-page site I added to IPFS had four files.

Site folder
Files used for single-page site on IPFS

Using the IPFS app, add the folder.

Import folder
Import folder into IPFS

Next, pin the folder to specify that it’s important and shouldn’t be removed from your node.

Pin folder
Pinning folder in IPFS

To view the site, click on the Share link option.

Share link
Getting the share link URL in IPFS

Copy and paste the link into a browser. It should bring up the site that is now being served from your node and soon be propagated across the IPFS distributed web.

Share files URL
Gateway URL for sharing files in IPFS

Configure Cloudflare DNS to point to IPFS CID

This step assumes the domain you want to use has already been added to Cloudflare. Also, Cloudflare has a document on how to connect your IPFS site if you need more details.

Similar to ipfs.io, Cloudflare has an IPFS gateway at cloudflare-ipfs.com. Cloudflare’s gateway makes it possible to configure your DNS to associate an IPFS CID with a custom domain.

Before you create the DNS records, you will need the CID for the folder. In the IPFS app, click on Copy CID and then paste and save it in a text editor for later use.

Copy CID
Copying the CID in IPFS

In the DNS management tool on Cloudflare, add the following records:

  1. CNAME for your.website pointing to cloudflare-ipfs.com
  2. TXT record for _dnslink.your.website with the value dnslink=/ipfs/<your_CID_here> (use the CID you copied earlier)
Cloudflare DNS Manager
Adding CNAME records in Cloudflare for IPFS

The site will now be available using your domain name. Keep in mind, it can take a few minutes before the site appears in a browser. You may also get a “CNAME Cross-User Banned” message, but it should be temporary.

Updating a site on IPFS and Cloudflare

Updating a site, even with minor updates, requires adding a completely new version of it to IPFS. Follow these steps to update it:

  1. Repeat the previous steps in “Adding a site to IPFS” and don’t unpin or delete the folder for the older version of the site (yet).
  2. Click on the Share link and view the updated site in a browser. Wait until everything displays correctly, including all assets like images, before proceeding to step 3.
  3. Copy the CID of the new folder.
  4. In Cloudflare’s DNS Management tool, change the CID for the TXT record to the new CID.
  5. View the site in a browser using your custom domain, and occasionally refresh until you can verify the new version of the site is appearing.
  6. Unpin and delete the older site folder from the IPFS app.

What kind of sites should you put on IPFS?

Because of the data permanence nature of IPFS and its limited capabilities, webmasters should carefully consider what they add to it. Here are some things to consider:

  1. Are there any concerns about your content being publicly accessible forever? If the answer is yes, you may want to avoid distributing it on IPFS.
  2. Is the site large, or does it require frequent editing? If either is true, using IPFS will create numerous permanent iterations of the site.
  3. Is the site dynamic? Sorry, only static sites will work on IPFS.
  4. Do you have content that you think could go viral, but you don’t have the budget to afford the server costs if it does? If item 1 isn’t a concern, then IPFS with Cloudflare may be the ideal solution.

I moved a site from a traditional hosting provider to IPFS and Cloudflare as part of my research for this article. The site I moved was etiquette.fyi, which I created in 2019 to respond to electric vehicle (EV) drivers that would park in charging spots but not charge. The site has an EV etiquette list and a PDF flyer that visitors can download, print, and put on EVs that shouldn’t be parked in a charging spot.

This is not a VIP parking spot flyer
PDF flyer available from etiquette.fyi

It was a perfect site to put on IPFS because I haven’t changed it since 2019, and I’m fine if it stays out there forever. And now that it’s on IPFS and using the Cloudflare Free plan, I don’t have to pay anything to keep it online. All I need to worry about is making sure I keep the domain name registered.

Related Articles