在IPFS上发布静态网站

- 6 minutes read - 2680 words

2023.07.27 更新。IPFS访问还是太慢了，现本站已切换到 Cloudflare Pages(真香 ^-^)。 不过本文所述方法依然有效

前文提到我们用Hugo生成了一个静态网站， 并将它发布了IPFS之上。 本文将详细说明托管和发布过程。希望可以对你有些帮助。

什么是IPFS

引用官网的一句话：“A peer-to-peer hypermedia protocol, designed to make the web faster, safer, and more open.“

乍一看比较抽象，不过重申一下它的目标应该有助于理解这组协议。 它的目标是取代HTTP协议，构建分布式的、更好的Web。 它分别定义了在分布式Web环境中文件资源的存储、定位、传输等各个方面的协议， 使得分布式Web成为可能。

本文暂时不详细分析IPFS本身， 让我们先聚焦在主题之上： 如何在IPFS上发布静态网站。

文件托管

对于传统的静态网站，网站内容必须要上传到某个服务器之上。 默认情况下， 所有对此网站的访问请求都会落到这台服务器上。 当访问量大的时候， 这台服务器面临的运算和带宽压力都会很大。（虽然CDN等边缘计算技术会在某种程度上缓解此问题， 但并没有改变其中心化的本质）

与此相对， 在IPFS网络中一份内容可以有多个副本，可以自动分流不同地域的访客。 内容越流行副本就会越多。 这从根本上避免了“单点压力”。 不过对于非流行内容， 最初上传内容的节点可能成为全网唯一一个存有完整内容的节点。 如果此节点下线， 那么内容将无法访问。

基于以上原理，我们明白，简单地用 IPFS Desktop 把内容上传到网络中并不能保证内容的随时可用。

我们需要一种服务，将内容放入其中之后，它可以保证内容一直在线， 供他人访问或复制。 这种服务并不需要承担所有访问流量， 但它需要承诺持续在线。 在IPFS世界中， 这种将文件“钉”在网络中的服务被称为"pin"。

虽然也可以自己搭建IPFS节点来完成上述任务，但对于个人网站这种简单场景， 更好的选择是使用现成的"pin"服务。

Pinata 就是这样一个服务。 使用简便， 而且1G以下的存储容量是完全免费的。

注册Pinata之后， 访问 (https://pinata.cloud/pinataupload) 即可执行上传操作。 选择 “Upload Directory”后，可将Hugo生成的 ./public 文件夹整体上传。

上传到Pinata

上传成功以后将得到CID (即此文件夹在IPFS中的内容ID)。也可以在 (https://pinata.cloud/pinexplorer) 管理已上传的文件或文件夹

管理Pinata

这样，网站内容就算进入了IPFS网络，并且由Pinata保证在任意时刻都有至少一个在线复本可供访问和复制， 保证网站不下线。

访问网站

使用 IPFS Desktop 访问

上传成功以后， 就可以访问网站内容了。 最直接的方式是在 IPFS Desktop 中输入CID， 便可以直接看到文件夹的内容。

浏览IPFS

点击其中的HTML文件， 可以看到HTML源码。

通过公开IPFS Gateway 访问

对于一个网站来说，上述访问方式并不理想。我们希望在浏览器上访问网站内容，并且可以直接完成网页的渲染和呈现。 不过IPFS对此提供了一个优雅的解决办法： IPFS Gateway。IPFS Gateway 相当于传统web世界与IPFS世界的中介，通过它，用户可以用普通浏览器访问IPFS网络上的内容，只需知道文件的CID即可

目前网络上有很多正在运行的IPFS Gateway，可以在 ipfs.io 查看公开的Gateway及其状态。除了IPFS官方维护的 Gateway， 目前最流行、最易用的是 Cloudflare IPFS Gateway。

IPFS Gateway 虽然在技术上完成了打通， 但还是不够理想。 我们希望网站跑在自己的域名之下。这需要用到另外一项与IPFS有关的技术：DNSLink。 这项技术可以用DNS TXT记录把域名和IPFS 地址关联到一起。

我们知道IPFS中每一份内容都拥一个独立无二的CID，再结合DNSLink，IPFS内容与传统Web之间的桥梁就建立起来了。

在此， 我们以使用 Cloudflare IPFS Gateway为例说明如何配置DNS， 以便利用DNSLink技术让普通浏览器也可以访问网站内容。

要达成这个目标， 有两个步骤：

  1. 修改dns，建立一个CNAME指向地址 cloudflare-ipfs.com 。以网站 chedan.io 为例，我将 www.chedan.io 设置为通过cloudflare 解析地址
  2. 增加一条TXT类型的记录， _dnslink.www 指向地址为 dnslink=/ipfs/{CID}。 注意其中的{CID} 就是我们上传文件夹至IPFS时所得到的CID

完成这两步以后，DNS的配置如下图：

DNS配置

至此，个人网站就可以用常规浏览器来访问了: http://www.chedan.io

注：当网站内容发生改变时， 相关内容的CID已将发生变化。 这就需要更新相应的DNS记录。 不同的DNS服务商会提供不同API，虽然细节有差异但整体思路相同。本文不作展开说明

自动HTTPS保护

虽然可以访问， 但美中不足是此网站并没有HTTPS的保护。

说到这里就不得不赞一下Cloudflare, 它可以免费为它所服务的网站提供HTTPS保护。有了上述DNS配置以后， 生成和配置HTTPS证书都是自动的。 你需要作的只是访问 Cloudflare IPFS Gateway，在页面最底部文本框中输入想要保护的域名(在本例中即 www.chedan.io)， 等待最多90秒， 就会提示 “Certificate is live”。 这时再访问 https://www.chedan.io ， 会发现证书已经生效了

HTTPS配置

至此， 我们完成了将内容托管至IPFS， 并经由IPFS Gateway开放给传统浏览器的全部工作。

在浏览器中直接访问IPFS内容

虽然 IPFS Gateway 降低了普通用户访问IPFS难度，对推广分布式Web是有帮助的。 但是， 它经由集中Gateway中转的作法与分布式Web是目标是相违悖的。理想状况下， 我们希望浏览器可以原生支持IPFS协议， 使得用户可以浏览器直接访问IPFS网络，无需借助任何中心化的节点。

事实上很多人正在这个方向作着努力， 在拥有浏览器原生支持之前， 我们可以先通过浏览器扩展来体验真正的分布式Web。 目前 Firefox & Firefox Android / Chrome / Brave 都已经有了IPFS扩展。他们拥有几个核心功能：

  1. 识别IPFS地址，一旦发现是IPFS地址， 则重定向到本地gateway进行服务
  2. 识别由 DNSLink 支持的URL， 自动完成重定向
  3. 提供全局或站点级别的重定向开关，用于控制是否使用本地IPFS进行服务

其使用示例如下：

IPFS Companion示例

注：要正常使用这些扩展，需要先安装并在本地运行IPFS节点(IPFS Desktop 或 IPFS 命令行工具 均可)。

安装扩展后再访问 https://www.chedan.io, 浏览器将自动重定向到 http://www.chedan.io.ipns.localhost:8080 ，并显示完全相同的内容。

虽然看起来没有差别，但其底层支撑结构已经完全不同。 此网址展现的内容是通过IPFS协议直接从IPFS网络中获取的， 绕过了集中化分布的节点， 真正实现了分布式Web。

随着IPFS和浏览器的发展，相信在不久的将来，浏览器将内置对IPFS的原生支持。

结论

IPFS 离我们并不遥远。 我们甚至现在就可以把自己的个人网站发布到IPFS之上。 通过 IPFS Gateway / DNSLink / IPFS Companion 等技术， 普通用户也可以方便地体验IPFS的独特魅力、感受分布式Web的乐趣。

参考