向 IPFS 部署您的第一个静态网站的完整初学者指南 Hello, World! 来自 SUPER-GRAND-AD

2025-06-08

将你的第一个静态网站部署到 IPFS 的完整初学者指南

你好，世界！来自SUPER-GRAND-AD

这将会是史上最快的教程。几乎让人失望。

您不需要了解任何有关 IPFS 或分布式的知识，甚至不需要了解静态站点生成器。

静态<br>火

准备好了吗？好的，第一步是打开终端并输入以下内容：

mkdir -p dwebsite/public
cd dwebsite
echo '<h1>Hello, worlds!</h1>' >> public/index.html

yarn global add @agentofuser/ipfs-deploy
# or: npm install -g @agentofuser/ipfs-deploy
ipd
Enter fullscreen mode Exit fullscreen mode

明白了吗？好的，我打了那个字。还有什么？没什么。

什么？是的。你在这里完成了。

现在你坐下来观看胜利游行队伍经过😎

ℹ 🤔 No path argument specified. Looking for common ones…
✔ 📂 Found local public directory. Deploying that.
✔ 🚚 public weighs 24 B.
✔ 📌 It's pinned to Infura now with hash:
ℹ 🔗 QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
✔ 📋 Copied HTTP gateway URL to clipboard:
ℹ 🔗 https://ipfs.infura.io/ipfs/QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
✔ 🏄 Opened web browser (call with -O to disable.)
Enter fullscreen mode Exit fullscreen mode

就这样，你的 l33t #dwebsite就上线了，它已在哈希链接的 Merkleverse 上线。快来体验吧！分享给你的朋友们。

很甜蜜吧？🍬

慢着，刚才到底发生了什么？

好吧，一下子想明白这些有点儿难。让我们稍微倒回去，用慢动作回顾一下，再看看幕后解说：

1. 东西在哪儿？

说实话，我可以调用ipd ./public，并明确传递要部署的目录（public）。

但是，当ipfs-deploy智能地探测静态站点生成器常用的众多（通常未记录的）构建目的地之一时，您就不会看到“苦苦思考”表情符号。

ℹ 🤔 No path argument specified. Looking for common ones…
✔ 📂 Found local public directory. Deploying that.
Enter fullscreen mode Exit fullscreen mode

是的，我确实仔细研究了staticgen.com，安装了一堆静态网站生成器，还建了一些测试网站，就为了能冠上“零配置”的名头。你懂的，就是这些小细节。

当我们懒得输入时，ipfs-deploy 会寻找以下内容：

const guesses = [
  '_site',         // jekyll, hakyll, eleventy
  'site',          // forgot which
  'public',        // gatsby, hugo
  'dist',          // nuxt
  'output',        // pelican
  'out',           // hexo
  'build',         // metalsmith, middleman
  'website/build', // docusaurus
  'docs',          // many others
]
Enter fullscreen mode Exit fullscreen mode

从这个博客的域名就可以看出，我是 Gatsby 的粉丝，但ipfs-deploy可以满足所有需要的人的需求。带上你自己的 SSG，我们帮你装上星际喷气背包，让它飞起来。🚀

2. 上传

这就是我们在这里的目的，即将网站送入太空（目前只是比喻）。几秒钟后，ipfs-deploy 交付了：

✔ 📌 It's pinned to Infura now with hash:
ℹ 🔗 QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
Enter fullscreen mode Exit fullscreen mode

中奖啦！这可是万幸啊。

那一小段杂乱无章的哈希，正是整个 dweb 柔道的核心所在。它如同魔法般，能从连接地牢的深渊中，通过名字召唤你的网站，它不在乎它位于何处，只在乎它是什么。

内部寻址，不受位置或路线的约束。

欢迎<严肃的停顿>来到分布式的未来。

等一下，我好像听到你说“分布式”🧐

噢，你这位敏锐的读者。

你说得对：如果 IPFS 应该是一个点对点协议，那我们干嘛还要上传呢？上传到服务器！？🤢

我们难道不应该向网络宣布我们拥有哈希值，然后等待其他同行提出请求时再将其提供给他们吗？

是的，你可以这么做。然后你关上笔记本电脑，WiFi断了，💩 发生了，然后噗 ✨ 你的网站就没了。

这就像种子一样：你需要至少一个种子服务器才能访问内容。如果你的网站有大量运行自己 IPFS 节点的用户访问，并将内容重新提供给其他人，那么平均而言，你的网站正常运行时间会相当高。

但目前这样的访客还不多（希望Brave能帮我们解决这个问题），而且这还是个新网站！🐣 可怜的家伙，生来就没那么出名。再等等吧。

如果浏览器具有不错的#asyncUX，并且访问者可以轻松地告诉它们在对等方可用时排队下载，然后在准备好时通知（就像无缝的“稍后阅读”流程），那么情况就会有所不同。

但就目前情况而言，如果发出请求时无人在线，系统就会卡住，然后超时。这显然不符合太空标准。

因此，我们需要一个高正常运行时间的播种机。或者，用 IPFS 的术语来说，一个“钉盘机”。

使用 Infura.io 进行零配置固定

ipfs-deploy的一个重要设计目标是让您尽快拥有在 IPFS 上看到自己编写的内容的快乐体验。

一种方法是运行本地 IPFS 守护进程并让您自己提供内容。

但正如我们上面看到的，这有点儿花哨，因为它并不代表你可以与朋友分享的实际部署是什么样子。必须有一个稳定的 Pinner。

不过，固定内容并保持良好的正常运行时间需要花钱，因此大多数固定服务都要求您至少注册一个免费套餐，然后他们才会同意托管您的网站。

但不是Infura.io！

他们通过精心限制流量、巧妙预防滥用、增加资本，或者肆无忌惮地放纵自己，让你毫无顾忌地上传未经身份验证的内容，然后无限期地为你提供服务。（这似乎违背了你的意愿，因为目前还没有明确的方法来取消固定内容。）

因此，我们要感谢他们的慷慨：感谢 Infura 的所有人，请继续努力！

此外，如果您自己拥有固定服务并希望成为零配置欢迎包的一部分，请考虑添加不需要注册的“更免费”层。

新创建的静态网站不占用太多空间，流量很少，是进一步使用 IPFS 的绝佳门户。

你做到了！🏁

如果你读到这里，恭喜你！你太棒了！🗿

您不仅部署了您的第一个 IPFS 网站，现在您还可以挥挥手说“哦，它很像 git + bittorrent，非常简单！”来夸耀您真正了解它的工作原理。

如果您认真遵循了说明，但最终却出了问题，那责任在我，与您无关。我承诺：您的第一次体验一定要愉快，否则就是 bug！

所以请告诉我哪里出了问题，我会帮你解决。

我们致力于消除这里的摩擦🧹🥌

如果您还没有获得足够的奖励，请继续关注以获取额外奖励。

如果您对我们目前的成果感到满意，请通过广泛传播和支持本指南与他人分享您的感受：）谢谢！

奖励章节

Pinata.cloud 提供免费冗余

拥有一个稳定的 Pinner 固然很酷，但这与普通的网站托管并无太大区别。（不过，就“分布式”而言，区别在于“内容可寻址性”，两者简直天壤之别。）

体验 IPFS 分布式特性的一种方法是添加第二个 pinner，而ipfs-deploy使这变得更容易。

我们将把两者都部署到Infura.io和Pinata.cloud，以便访问者可以同时从两者下载，或者在另一个出现故障时从其中一个下载。

韧性！🤹

Pinata.cloud是一种专用的 IPFS 固定服务，可让您更好地控制托管的内容。

它允许您删除图钉并添加元数据，以便以后用于过滤和管理您的部署。

有1GB 的免费套餐，足够用于开发博客、落地页、文档和#YangGang粉丝专页。虽然需要注册，但操作非常简单，不需要信用卡或个人信息。

注册并获取API 密钥后，转到您的网站目录并将密钥复制到.env如下文件中：

# dwebsite/.env
IPFS_DEPLOY__PINATA__API_KEY=paste-the-api-key-here
IPFS_DEPLOY__PINATA__SECRET_API_KEY=and-the-secret-api-key-here
Enter fullscreen mode Exit fullscreen mode

⚠ 您不想公开该信息 ⚠，因此当您在要公开托管的存储库中执行此操作时，请确保将.env文件添加到您的.gitignore：

echo .env >> .gitignore
Enter fullscreen mode Exit fullscreen mode

最后一个配置：要部署到 Pinata，您需要将路由器上的端口 4002转发到您的机器。

为什么？因为部署到 Pinata 的工作方式如下：

  1. 我们首先启动一个临时的本地 IPFS 节点，
  2. 将网站固定在本地，
  3. 并将哈希发送给 Pinata。
  4. 然后，Pinata作为对等节点连接到我们的本地节点，
  5. 请求我们发送的哈希值，
  6. 然后自行下载并托管。

由于步骤 4，我们需要能够监听外部连接。

我知道，手动转发端口很麻烦，但本季度 js-ipfs 将支持 NAT 遍历，所以我们很快就能少走一步弯路了🤞

相比之下，Infura 公开了其 IPFS 节点的 HTTP API，因此我们可以作为 HTTP 客户端直接上传到它，而无需运行本地节点或监听连接。

Pinata 的自定义 API 在灵活性-零可配置性范围内占据了不同的位置。

值得庆幸的是，通过ipfs-deploy，我们可以同时拥有两者✌️

现在 Pinata 已经设置好了，让我们回到正题。以下是部署到两个固定服务所需的步骤：

ipd -p infura -p pinata
Enter fullscreen mode Exit fullscreen mode

这就是你所得到的：

ℹ 🤔 No path argument specified. Looking for common ones…
✔ 📂 Found local public directory. Deploying that.
✔ 🚚 public weighs 24 B.
✔ 📌 It's pinned to Infura now with hash:
ℹ 🔗 QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
Enter fullscreen mode Exit fullscreen mode

目前为止没什么新东西。现在来看看 Pinata（有新表情符号！）：

✔ ☎️ Connected to temporary local IPFS node.
✔ 📶 Port 4002 is externally reachable.
✔ 📌 Pinned to temporary local IPFS node with hash:
ℹ 🔗 QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
✔ 📌 It's pinned to Pinata now with hash:
ℹ 🔗 QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
✔ ✋️ Stopped temporary local IPFS node.
Enter fullscreen mode Exit fullscreen mode

这就是：相同的哈希，不同的位置。

✔ 📋 Copied HTTP gateway URL to clipboard:
ℹ 🔗 https://ipfs.infura.io/ipfs/QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
✔ 🏄 Opened web browser (call with -O to disable.)
Enter fullscreen mode Exit fullscreen mode

通过将“ipfs.infura.io”替换为以下内容，您可以在任何网关上看到相同的内容：

或者这里列出的任何一个：https://ipfs.github.io/public-gateway-checker

我以前说过，但我觉得这太酷了，值得重复一遍：

内部寻址，不受位置或路线的约束。

或者：根据数据本身来调用数据，而不是根据数据所在位置来调用数据。

这就是加密哈希💪

告诉你的朋友部分🗣

好了，我们搞定了，对吧？感觉棒极了，心绪也平静下来了。现在去打电话跟朋友们说说吧📞

— 嘿，杰西，你猜怎么着？

— 什么？

— 我把我的网站放到 dwebs 上了！！

— 耶朋友，太酷了！我敢打赌那一定非常难。—

不，有这个 npm 包，你知道……

— 是啊，是啊，让我看看网站，它在哪里？

— 哦，它在 ipfs-dot-io-slash-ipfs-slash……呃……

— 斜线什么？

— 呃……你有笔吗？呃……大写 Q，小写 m，大写 Q，
大写 T……呃……我把网址发短信给你怎么样？

— 好的，没问题，但如果我只是一个在广告牌上看到你网址的随机人士呢？那你就不能给我发短信了，对吧？

— 嗯，我想不能。—

你知道吗，当你有可以让我记住的东西可以在浏览器中输入时打电话给我怎么样？

— 哇，真狠毒。

好吧，那段非常逼真的对话很快就结束了。

事实证明，内容寻址本身并不能很好地适应人类有限的记忆缓冲区。

此外，朋友有时也会很坚强。

那我们该怎么办？

漂亮的 URL

IPFS 网站的人类可读命名绝对是一个需要完善的领域。

但是如果（这是一个很大的如果）您暂时受限于使用免费的 Cloudflare IPFS 网关，ipfs-deploy 会以一种非常巧妙的方式将所有内容包装在一起。

这是我部署 interplanetarygatsby.com 的实际镜头：

ipd -p infura -p pinata -d cloudflare
Enter fullscreen mode Exit fullscreen mode

上传结束后我看到的是：

✔ 🙌 SUCCESS!
ℹ 🔄 Updated DNS TXT interplanetarygatsby.com to:
ℹ 🔗 dnslink=/ipfs/QmSNf4sScZUmpNqBWAAs9S5tC4XkQRNepA3KbF4aipGGeq
Enter fullscreen mode Exit fullscreen mode

每次看到它如此轻松，我都会微笑😌

不过，为了达到这个目的，你需要采取一些一次性的步骤：

  1. 购买域名
  2. 注册 Cloudflare 帐户
  3. 将您域名的 DNS 区域移动到 Cloudflare
  4. 将您的域名连接到他们的 IPFS 网关
  5. 获取您的API 密钥

从实际执行这些配置步骤到等待 DNS 信息传播，整个过程可能需要几个小时。

这就是为什么我把这部分放在了这个奖励章节里，并且保留了基本说明的零配置。随着时间的推移，我们会消除越来越多的摩擦，让最初的快乐体验更加快乐😃⬅️🧹🥌

因此，完成步骤 1-5 后，您需要做的最后一件事是将您的域名和 Cloudflare API 凭据添加到您网站的.env文件中：

# dwebsite/.env
IPFS_DEPLOY_SITE_DOMAIN=example.com
IPFS_DEPLOY_CLOUDFLARE__API_KEY=paste-your-cloudflare-api-key-here
IPFS_DEPLOY_CLOUDFLARE__API_EMAIL=the-email-you-used-to-sign-up
Enter fullscreen mode Exit fullscreen mode

现在继续吧，尽情发挥ipd -d cloudflare，把这个消息传遍所有广告牌！📣📣📣

៚

后记：呼吁冰壶爱好者🧹🥌

在撰写本指南时，我偶然发现了“冰壶”表情符号并立即产生了一种联系。

野外扫荡

说实话，我一直觉得冰壶运动有点……奇怪。但一项全员参与的运动，为了能让这件奇特的艺术品优雅而轻松地滑向终点，竟然如此……感人。

这就是我希望ipfs-deploy给用户带来的感受。一种丝般顺滑的体验，让他们毫不费力地直接登陆分布式网络，并有一群狂热的观众为他们欢呼。

如果这听起来像你喜欢的运动，请在问题中打个招呼，让我们一起完善一些东西！

鏂囩珷鏉ユ簮锛�https://dev.to/agentofuser/the-complete-beginner-s-guide-to-deploying-your-first-static-website-to-ipfs-33po
Devto 翻译
PREV
在 GitHub 上伪造提交。任何人都可以。让我们看看一些著名的伪造案例……匿名伪造提交 itsafeature 😁
NEXT
开发人员面临时间压力？更快工作，效果更佳