1. 首页
  2. 实战操作

新手入门 | 如何将静态网站部署到IPFS上

区块链对于大家来说,可能是一个比较陌生的领域,最熟悉的大概就是比特币了。考虑到这一点,我们点对点以后将会发布一些针对于小白们的教程~

新手入门 | 如何将静态网站部署到IPFS上

这个教程可以说是有史以来最快的教程,就算你不知道IPFS,不了解分布式网络,甚至也不知晓静态站点生成器,没有关系,学了下面这个教程,就能快速掌握如何将静态网络部署到IPFS上。

新手入门 | 如何将静态网站部署到IPFS上

首先,打开终端,输入:

mkdir -p dwebsite/public
cd dwebsite
echo '<h1>Hello, worlds!</h1>' >> public/index.html
yarn global add @agentofuser/ipfs-deploy
ipd

现在你就可以坐下来静待成功了。😎

ℹ 🤔 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.)

慢下来,到底发生了什么?

这样一气呵成可能大家比较难接受,下面我们一起分步来看下吧~

Where’s the stuff?

我本可以调用 ipd ./public,public 明确地传递要部署(public)的目录。

但是,你不会看到“苦思”的表情符号,因为ipfs-deploy智能地探测静态站点生成器常用的许多(通常是未记录的)构建目的地之一。

如何构建静态节点生成器常用目标

https://github.com/agentofuser/ipfs-deploy/blob/8023d82b5df68076ca79bc684f45ea64e5e67c06/index.js#L75

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

我仔细搜索了https://www.staticgen.com/(JAMstack站点的静态站点生成器列表),安装了许多静态站点生成器,并构建了一些测试站点,这样我就可以宣称“零配置”标题了。

新手入门 | 如何将静态网站部署到IPFS上

这是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
]

ipfs-deploy可以满足所有求需,准备好行动起来吧。🚀

The upload

这就是我们在这里的目的,也就是说,把网站放到太空中(形象地说,现在)。因此几秒钟后,ipfs-deploy提供了:

✔ 📌 It’s pinned to Infura now with hash:
ℹ 🔗 QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY

一点点的散漫分布哈希是整个分布式网络的关键所在。

内部寻址,不受位置或路线限制。

欢迎<grave pause>到分布式的未来。

如果IPFS应该是点对点协议,为什么我们甚至都要上传到服务器!?

我们不应该只是向网络宣布我们有这个哈希值,然后当其他对等点请求时,等待他们自己为其服

是的,你可以这样做。然后你关闭你的笔记本电脑和wifi.

这就像torrents:你需要至少一个播放器才能使内容可以访问。如果您的网站有很多人运行他们自己的IPFS节点的人访问它并将其重新提供给其他人,那么平均而言,您的正常运行时间将非常高。

但是还没有那么多这样的访客(希望Brave会为我们解决这个问题)而且,这是一个全新的网站!🐣可怜的东西并非天生出名。给它一些时间。

新手入门 | 如何将静态网站部署到IPFS上

详情:https://brave.com/

如果有一个像 #asyncUX 的浏览器,访问者可以很容易地告诉他们在对等体可用时将排队下载,然后在它准备就绪时通知(如无缝的“稍后阅读”流程),情况就完全不同了。

新手入门 | 如何将静态网站部署到IPFS上

详情:https://twitter.com/search?q=%23asyncUX

但就目前而言,如果没有人在请求的那一刻在线,事情只会挂起然后超时。

所以我们需要一个高正常运行时间的播放器。即IPFS术语的“pinner”.

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

IPFS -deploy的一个重要设计目标是让您拥有第一次在IPFS上创建东西的愉悦感。

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

但正如我们在上面看到的,这可能有点噱头,因为它并不代表您可以与朋友共享的实际部署。一定要有一个稳定的pinner。

不过,用正常运行时间来固定东西是要花钱的,所以大多数固定服务都要求你至少注册一个免费的套餐,然后他们才会同意托管你的网站。

不Infura.io,但!

通过谨慎限制速度,明智的滥用预防,增长资本或不计后果地放弃,他们让你在未经认证的情况下,就可以随意上传东西,而且他们会无限期地为你提供服务。(甚至违背自己的意愿,目前也没有明确的方法来解开这些东西。)

因此,我们应该为他们的慷慨表示感谢:感谢Infura的所有人,请继续保持!

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

新创建的静态网站占用的空间不大,流量很少,是进一步使用IPFS的一个很好的途径。

你做到了

到这一步,那就congratulations!🗿

你不仅部署了你的第一个IPFS网站,你可以炫耀你真的了解它是如何工作的。

新手入门 | 如何将静态网站部署到IPFS上

奖金章节

Pinata.cloud与免费冗余

拥有一个稳定的pinner很酷,但是和普通的web主机没什么不同。(这是在“分配”的意义上。而在“内容寻址性”的意义上,它是不分昼夜的。)

了解IPFS的分布式特性的一种方法是添加第二个pinner,ipfs-deploy使这更容易。

我们将同时部署到Infura.io和Pinata.cloud,以便访问者可以同时从两者下载。

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

它允许您删除引脚并添加以后可用于过滤和管理部署的元数据。

有一个1 GB的免费套餐,足以支持开发博客,登陆页面,文档和#YangGang fanpage.它确实需要注册,但它非常简单,不需要信用卡或个人信息。

经过注册并获得你的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

⚠您不希望公开该信息,所以当您在要公开托管的存储库中执行此操作时,请确保将该 .env 文件添加到您的  .gitignore:

echo .env >> .gitignore

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

为什么?因为部署到Pinata的工作原理如下:

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

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

我知道,手动转发端口是一件很痛苦的事情,但在本季度将支持NAT遍历到js-ipfs,所以这是少了一个环,我们需要尽快跳转。

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

Pinata的自定义API在灵活性 – 可配置性范围内发挥了不同的作用。

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

现在Pinata已经成立,让我们回到文中。以下是运行部署后这两个固定服务的代码:

ipd -p infura -p pinata

你得到的是:

ℹ 🤔 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

到目前为止没有什么新东西。(以新的表情符号为特色!)

✔ ☎️ 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.

这就是:相同的哈希,不同的位置。

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

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

  • https://gateway.pinata.cloud/ipfs/QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
  • https://ipfs.io/ipfs/QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY
  • https://cloudflare-ipfs.com/ipfs/QmQzKWGdjjQeTXrruYL2vLkCqRP8TyXnG1a9QEJjDM8WTY

或者列出的任何一个:

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

我之前说过我觉得这句话很酷,以至于又重复一遍:

内在寻址,不受位置或路线限制。

或:根据数据的内容调用数据,而不是根据数据的位置调用数据。

这就是哈希加密

事实证明,内容寻址本身并不能与有限的人类内存缓冲区很好地融合在一起。

https://en.wikipedia.org/wiki/Zooko%27s_triangl

一个漂亮的URL

IIPFS网站的可读命名显然是一个需要平滑处理的人性化领域。

但是,如果(并且这是一个很大的问题)你现在仍然在使用免费的Cloudflare IPFS网关的约束下,ipfs-deploy以一种非常简洁的方式将它们整合在一起。

这是我部署 https://interplanetarygatsby.com/ 的实际镜头:

ipd -p infura -p pinata -d cloudflare

这是上传结束后我看到的内容:

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

这让我每次都毫不费力地微笑😌

尽管如此,您需要采取一些一次性步骤:

  1. 购买域名
  2. 注册Cloudflare帐户
  3. 将您域名的DNS区域移至Cloudflare
  4. 将您的域到他们的IPFS网关
  5. https://www.cloudflare.com/distributed-web-gateway/#connectingyourwebsite
  6. 获取您的API密钥
  7. https://support.cloudflare.com/hc/en-us/articles/200167836-Where-do-I-find-my-CloudFlare-API-key-

在实际执行这些配置步骤和等待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

现在开始吧,继续使用 ipd -d cloudflare,并告诉大家所有关于它的广告!📣📣📣

感谢您的阅读!☺️

此文来自IPFS官方博客,由IPFS点滴资讯翻译整理

新手入门 | 如何将静态网站部署到IPFS上

万众瞩目的VDS已经如期开源

VID 是 VDS 生态中的身份标识

开启 VID 后便可以使用隐秘聊天功能

群 OTC 交易功能

信任钢印裂变功能、以及创建主节点等

而且,每一个 VID 可以作为 VDS 分布式匿名网络的域名使用

甚至作为其他网站的身份资格登录验证使用

如下为点对点科技的信任钢印

大家可以通过我们的钢印创建VID

新手入门 | 如何将静态网站部署到IPFS上

想要了解VDS项目或者创建VID

或者有其他什么需要咨询的朋友

可以加工作人员微信(CavsJr)或

扫描下方二维码,免费赠与资料

顺便拉群入伙(OTC群、矿工群、玩家交流群)

新手入门 | 如何将静态网站部署到IPFS上

当然,你也可以加入我们的QQ群点对点VDS社区(群号:443031826)

新手入门 | 如何将静态网站部署到IPFS上

新手入门 | 如何将静态网站部署到IPFS上新手入门 | 如何将静态网站部署到IPFS上

新手入门 | 如何将静态网站部署到IPFS上

– End –

原创文章,作者:Kiko,如若转载,请注明出处:https://ipfsdrop.com/tech/xinshourumen-ruhejiangjingtaiwangzhanbushudaoipfsshang/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

(+86)18301922335

在线咨询:点击这里给我发消息

邮件:haskell@freechains.cn

工作时间:7×24小时

QR code