将静态网站上传到IPFS网络

879
web3, 有用的工具
文章目录

很早就想将自己的网站上传到IPFS上了，但是将网站上传到IPFS网络容易，让它一直存在却不容易，因为IPFS网络并不会永远保存上传的数据，只有热点数据才有可能一直被IPFS网络保存，最近搞了一个便宜的服务器可以运行IPFS服务，所以才有了这篇文章。

一些必备知识

IPFS是一项很酷的技术，它与当前的web技术最大的区别在于寻址的不同，即通过CID来定位资源，而当前web通过URL定位资源。

比如说https://youtube.com/a.mp4, 这个这个链接, 这个链接地址是由该网站决定, 整个URL我们可以分为两个部分, https://youtube.com和/a.mp4前者代表了网站的地址，我们可以理解为资源的拥有者，后者代表了资源在该网站的所在位置，这个位置由所有者定义。

那么IPFS是怎么重新定义呢? IPFS解决的办法有点暴力, 我们首先通过一个算法将文件或者目录计算出一个CID(Content Identifier, 即内容标识), 后面我们只需要知道这个CID就可以访问该资源了，比如通过ipfs://{cid}地址访问。 这里的ipfs://和https://其实差不多，不过后者被现在所有的浏览器支持，而前者只有IPFS浏览器才支持，所以想借助当前的浏览器访问，我们需要一个网关，比如https://ipfs.io/ipfs/{cid}。

CID能保证同样的文件内容生成的CID绝对一致。

个人认为IPFS并不是为了取代当前的web技术而是补充，至于更具体的解释大家可以参考官网链接: https://docs.ipfs.tech/concepts/what-is-ipfs/

生成静态网站

由于我的网站本身就是静态网站工具hugo生成的，所以生成静态网站是顺道的事情，不过还是有一些事情需要做。

修改config.toml

我们需要在config.toml里面设置以下变量

relativeURLs=true

默认情况下hugo生成的路径是绝对路径, 比如/css/style.css，但是ipfs的地址一般是https://ipfs.io/ipfs/{CID}, 如果是绝对路径，那么/css/style.css的请求路径就变成https://ipfs.io/css/style.css,所以需要设置成相对路径。

修改完成之后我们就可以再次生成自己的网站了，hugo生成的目录是public。

上传文件

首先我们需要一个客户端。

客户端安装

IPFS常用的客户端一般是IPFS Desktop和IPFS Kubo，前者是一个桌面应用，有UI界面可以操作这对于小白比较友好，后者是一个命令行工具，这个适合熟悉命令行的用户，本文主要使用后者。

具体的安装教程参考: https://docs.ipfs.tech/install/command-line/#install-official-binary-distributions

这里仅展示Linux的安装步骤。

# 下载安装包
wget https://dist.ipfs.tech/kubo/v0.22.0/kubo_v0.22.0_linux-amd64.tar.gz

# 解压文件
tar -xvzf kubo_v0.22.0_linux-amd64.tar.gz

# 进入解压后的文件夹
cd kubo

# 运行安装脚本
sudo bash install.sh

当上面的步骤完成之后，你应该能执行以下命令并看到下面命令的输出

ipfs --version

# 输出如下
ipfs version 0.22.0

当我们安装完成以后，首先需要将IPFS节点运行起来

ipfs daemon

如果不想让这个服务占用太多资源，可以使用以下命令将配置初始化为低功率的配置。

ipfs init --profile=lowpower

当我们将节点运行起来之后就可以添加文件了。

我们可以通过以下命令添加我们生成的静态网站目录

ipfs add -r public

输出如下:

... ...
added QmYtyacu4srb59AqQvMrwggb2G3qmBVaBeDFw84PmZFonv public/tags
added QmZN8pYLY9fCZC731cGi65bTbqBiouS4Cqo3yqAju7ayzL public

根据文件多少的不同，会输出不同长度的一段信息，最后一个CID是添加的目录的CID, 当我们得到CID就可以访问我们上传的网站了。比如访问地址https://ipfs.io/ipfs/QmZN8pYLY9fCZC731cGi65bTbqBiouS4Cqo3yqAju7ayzL

如果想在ipfs.io等公共ipfs网关中看到结果可能需要等待一段时间，可能很久很久。

使用域名访问

很显然CID并不好记忆，我们可以借鉴当初解决IP地址不好记的解决方案，使用域名来解决这个问题，我们可以为我们的网站设置一个特殊的DNS记录，比如_dnslink.youerning.top这样的TXT记录, 我们可以通过下面命令来查看域名的TXT记录，下面是我的网站设置的域名记录。

_dnslink.youerning.top. 300     IN      TXT     "dnslink=/ipfs/QmZN8pYLY9fCZC731cGi65bTbqBiouS4Cqo3yqAju7ayzL"

可以看到，它的值是我们上传网站时生成的CID。

下面是我在cloudflare的设置

cloudflare-dns-settings

这样我们就可以通过域名来访问我们在IPFS网络上的网站了, 比如https://ipfs.io/ipns/youerning.top/

Pinning服务

自己托管自己网站并不是一个最优解，比如我们可以将网站通过免费的IPFS Pinning服务来永久保存，比如一下服务。

  • Spheron
  • 4EVERLAND Bucket
  • Estuary
  • Filebase
  • Infura
  • NFT.Storage
  • Pinata
  • Web3.Storage
  • Kriptonio

具体的链接参考: https://docs.ipfs.tech/concepts/persistence/#pinning-services

命令行工具

相较于操作web页面，我更喜欢命令工具，下面是两个命令行工具

可能是我的网站太大了，文件太多了，所以使用这两个工具都失败了，可能是有文件数量的限制。

IPFS GATEWAY

可通过这个地址找到公开的ipfs网关。

https://ipfs.github.io/public-gateway-checker/

总结

IPFS很酷，但是由于比较新所以使用范围不是那么大，所以还不是那么易用，截止到我写完这篇文章，我的网站还不能通过ipfs.io访问，可能是因为我的节点在国内的原因。

虽然IPFS还不是那么易用，但是在一些web3领域发挥了自己的独特的优势，比如作为NFT的存储解决方案，CID跟NFT的理念不谋而合。

参考链接

  1. https://docs.ipfs.tech/how-to/websites-on-ipfs/static-site-generators/#hugo
  2. https://docs.ipfs.tech/concepts/dnslink