Upload static site to IPFS

Published by bolmaster2
  • http
  • distributed
  • note

This site is available under the awesome IPFS. See it in action here: https://ipfs.io/ipns/QmRvJG5dovQb4iPRL1f3KuUFbWj3w2roaFvFfDX99LsvDD/ or here: https://ipfs.io/ipns/QmSG5tFghJZsDDvBqCu5YN5TvhTqrVcVQuLRNxFfLf4NvJ.

UPDATE: The IPNS system can be really slow, so those links often time out. Or my peer hosting them is down 😓…

IPFS?

What is that? Except the cool name InterPlanetary File System, I think this technique is the way to go for the web. It’s a implementation of a distributed web. AKA Dweb. Mozilla explains IPFS here.

IMO it will solve a lot of the web’s dependencies on central authorities. The “content first” instead of “host first” strategy is by itself worth so much. IPFS call it the “permanent web”. Just imagine no more broken links 🤯. I don’t know if that will ever be achieved. But it will be easier to achieve it this way.

Steps to add your site to IPFS

  1. Upload content: ipfs add
  2. Link it with name ipfs name publish

The add command (with the recursive option) uploads all files under _site/ directory to IPFS:

$ ipfs add -r _site
added QmUxXMiPJuxkY9XcyhGSHUSHioFqgqJjuWq1HL9pjkRQqv _site/css/syntax.css
added Qme6D71jDBVHSM3q4V2PdbnnGB3cmPkBLuDGwwg8XV4EPP _site/favicon.ico
added QmQ5HqByhfrxKe5Wocrbzrmy71ygCrYV7o96pCPVSpk9RG _site/feed.xml
added QmTGPBcecCXmKk9x4GU2FoFJ5PZPyCevosnAa53tTcVU7i _site/index.html
added QmXrW8sCPqQYvmAyWNsChtan3tYZ9hwG1EJ2znbHXEnr8y _site/posts/destructing-parameters.html
...
added QmbNM3xnhD9gCcajFJ3WzttHCS18Q24Me9pRZQNScjEmDv _site/posts/upload-static-website-to-ipfs.html
added QmdC3MGhQX8gjH3oKUZgve3BiGp5rYjY4pJsTbUEt8hhi5 _site/posts/watch-processes.html
added QmaPfK2cZCNWKdrPkxh4LwBfDCrB6myBvxMKmJgmZV47DM _site/css
added QmbYdvvcgQdLixhxipD1k2vKSphkuSduFBArX1Mc567rUq _site/posts
added QmR5W9EsB5JFAdtQHqFHnZYj6rh7CeLKZzsiESfZDq6gQd _site
 289.22 KiB / 289.22 KiB [==========================================================================================================] 100.00%

Copy the last hash (QmR5W9EsB5JFAdtQHqFHnZYj6rh7CeLKZzsiESfZDq6gQd) and run the name publish command with it. Here I’m explicitly setting the key to self, which is the default:

$ ipfs name publish --key=self QmR5W9EsB5JFAdtQHqFHnZYj6rh7CeLKZzsiESfZDq6gQd
Published to QmRvJG5dovQb4iPRL1f3KuUFbWj3w2roaFvFfDX99LsvDD: /ipfs/QmR5W9EsB5JFAdtQHqFHnZYj6rh7CeLKZzsiESfZDq6gQd

Boom 💥

Now it’s published to my self public key address: QmRvJG5dovQb4iPRL1f3KuUFbWj3w2roaFvFfDX99LsvDD. The complete http url through the gateway is https://ipfs.io/ipns/QmRvJG5dovQb4iPRL1f3KuUFbWj3w2roaFvFfDX99LsvDD/. Notice the ipns prefix instead of ipfs.

How long will this data live?

Do I need to host those files forever for them to be available? Or are they persisted forever? No, they are not persisted forever. Files are only persisted as long as peers host them. So if other peers “pin” content they will host them. So basically if you want to host content and make sure it’s available you need a node that’s online 24/7.

An example of a shell deploy script

Deploy script for this jekyll site looks something like this:

#!/bin/bash

# Status prefix
spx="---"

# Build static site to `_site` directory with `jekyll`
echo "$spx Building site..."
bundle exec jekyll build --config _config.yml,_config.ipfs.yml

# Add site to ipfs and save the hash
echo "$spx Adding files to ipfs..."
hash=$(ipfs add --recursive --quieter _site)

echo "$spx Done!"
echo "IPFS cid to root is: $hash"

echo "$spx Link $hash to ipns, key=self"
ipfs name publish --key=self "$hash"

echo "$spx All done ✅"