New Tutorial: Web Hosting on IPFS (IPNS, DNS Link, etc.)

[terichadbourne]

How to host websites on IPFS (and what type can be hosted this way - static v dynamic, SPA, etc.) continues to be a common question among our users. Gathering up a few disparate threads on this topic so we can explore how to best cover it in ProtoSchool.

The awesome @nukemandan previously proposed (#139) a hands-on tutorial that would walk through the full process of hosting a static website on IPFS, but the original suggestion was for a format not supported by ProtoSchool (doing things outside the browser where we can't provide feedback). I believe our new multiple-choice format could now offer a way for us to teach the underlying concepts around IPNS and IPFS web hosting. (Here's an example of a multiple-choice tutorial.)

Recently @daviddias resurfaced this issue, flagging that even for experienced networking folks, IPNS (InterPlanetary Naming System) is still a puzzle box and could be a tutorial subject. @autonome seconded that and suggested that covering the Dweb's World of Naming would be really useful. (See https://stackoverflow.com/questions/61291728/how-are-name-clashes-avoided-for-ipfs-dnslink)

In my own experience with Vue and VuePress, I keep bumping into issues around SPAs that use hash-based routing and how that creates challenges with IPFS hosting. I don't know a lot about DNS Link but it also comes up whenever I engage in these conversations around IPNS and hosting.

The team at Fleek (a Netlify-ish hosting service built on IPFS, formerly known as Terminal) has a lot of experience answering community questions on web hosting on IPFS, and @Blockchainbrett has suggested that they may have time to build a vendor-agnostic ProtoSchool tutorial on this topic. (We'd include a passing mention of how hosting services like Fleek are an option, but nothing salesy.)

Some questions for us to address before creating a content outline:

• What topics/concepts should be included in this multiple-choice tutorial?
• What questions are you most frequently asked (or do you have yourself) about hosting websites on IPFS?
• What common misconceptions should we address, either in the text of lessons or in the wrong answers to our multiple-choice questions?
• What are the best existing resources we're aware of on these topics, either to reference while creating the tutorial or to link to from its resources page for further learning?

Look forward to your thoughts!

[lidel]

(quick brain dump to kick this off)

Existing docs:

• https://docs-beta.ipfs.io/how-to/host-single-page-site/ covers adding directory with index.html to IPFS, loading it from gateway, setting up DNSLink/IPNS
• Gateway.PublicGateway section in go-ipfs config docs has some DNSLink related recipes for people who want to self-host

Popular topics / questions:

• If IPFS is immutable by default, how to update the website without changing its address? (intro to → IPNS / DNSLink)
• "Ways to get human-readable name" (buy DNS domain and set up DNSLink OR buy ENS name and use https://eth.link → DNSLink)
• Secure Context (some Web APIs are not available unless page is loaded from localhost or HTTPS → how to set up TLS? how services like Cloudflare or Fleek can set up TLS for you?)
• Origin separation, and how DNSLink and subdomain gateways solve it
  • usual example is an app that asks for access to webcam or location, and user wants to grant permissions only to that one app
• Relative paths, and how DNSLink and subdomain gateways solve it
  • / (URL root) becomes the same as content root, removing the problem

[terichadbourne]

@Blockchainbrett I know your team has a ton going on. Are you still game to draft this content? Any sense of timeline given your other commitments?

Johnny just mentioned that there's an upcoming section in docs.ipfs.io that we can pull some tidbits from. See it in the branch here: https://github.com/ipfs/ipfs-docs/tree/feat/ipfs-for-webdevs/docs/how-to/websites-on-ipfs

[nuke-web3]

So excited to see this get added to proto.school !

What topics/concepts should be included in this multiple-choice tutorial?

• Persisting IPFS content - Locally / Via a provider / Via Filecoin
• IPNS for dynamic content (could be a whole set of lessons on this, I would expect)
• After the above, introduction to https://cluster.ipfs.io/ concepts
• DNSlink - what is its, and how to use it with IPFS and IPNS
• IPFS is static only sites - How do I operate a full-stack website on IPFS? (JAM stack / API calls to services.)

What questions are you most frequently asked (or do you have yourself) about hosting websites on IPFS?

• How do I know if other IPFS nodes are also hosting my content?
  • How do I ask others to pin my content?
• How can I host IPFS content locally that everyone can access quickly and reliably (This may be another whole can of worms, but a very important issue!)
  • How do I let others find my content if my machine is behind a restrictive network & firewall?
  • How about on the cloud? (https://pinata.cloud , https://temporal.cloud/ , https://fleek.co, ect.)
  • What about Filecoin?
  • What about a https://cluster.ipfs.io/ that I run for myself or with others?

What common misconceptions should we address, either in the text of lessons or in the wrong answers to our multiple-choice questions?

• IPFS vs IPNS on DNSlink
• IPFS for sites that need a backend (APIs to services in your static page site build) - IPFS is for data not for computation... it is just a file system 😉
• The content you publish on IPFS must be hosted by nodes that are online and sharing it for that content to be found.
• IPFS from a personal machine behind a firewall may not be able to share with peers outside your network! Even if it can, discovery is very likely slow. (Some content on why this is the case would be good 🙏🏼 )

---

That is a lot 😅 Hope it helps a bit 🙏🏼