ProjectBrief本文主要记录作为一个非Web开发者（本人），如何快速将我的第一个SPA应用部署到星际文件系统IPFS作为入门web3.0的第一次练习，以我自己为例，前后端知识基本为0，我的基本流程如下：选择合适的应用类型（SPA）选择一个简单的模板并应用（H5+Bootstarp+nativejavascript）代码托管平台（Github）白嫖免费部署服务：传统方法：GithubpagesPAAS（平台即服务）选项1：fleek（我的选择）PAAS（平台即服务）选项2：4everlandthird-party表单服务提供者formspree通过github实现消息功能绑定fleek部署下载IPFS客户端，连接到fleek部署的节点测试html音视频链接是否替换为IPFS地址，是否有足够的备份，是否P2P加载更快更新网页内容：只需gitclassic三步，add、commit、push即可，因为fleekCI/CD已经绑定：没有优化：没有框架，html页面有重复部分。我个人是用md自动转成html的，也能满足日常需求。最终效果Githubpage：https://yaozeliang.github.io/resume/IPFS:https://ipfs.fleek.co/ipfs/QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBUCID(ContentIdentifier):QmddHLkhzHixGpTAGopDNJ8dF3i6UrdrsEiMwsDt2x52服务模板中选择添加这个并修改模板链接：点我预览，这个模板是2017年推出的，没有使用框架，ajax配合原生javascript，不过正好符合我的目的。考虑到目前react、django等项目的PaaS平台部署还不成熟，我选择最简单的单页面应用，本着免嫖的原则，我们可以使用github提供的免费网页部署服务。但它只适用于单页应用，任何前端模板都行。首先，简单修改模板。本地运行无误后，通过三个经典步骤推送到github：gitaddgitcommit-m"Firstcommit"gitpushoriginmaster然后就可以快速在文件所在的仓库中找到相应的选项，勾选即可成为一个githubpage项目后，会自动搜索目录的index.html。一般大家都用部署文档。因为个人需要，想做的漂亮一点：这时候我们点击提示的url就可以看到部署完成了。每次在本地修改推送后，相当于重新部署。等待几分钟后即可看到变化。有一些延迟，但是免费的东西不能要求太多。别忘了提前使用remoteaddorigin挂载到相关仓库。比如这里把resume放到github上的优势很明显，方便对接很多其他的服务。比如留言的部分可以直接使用免费的留言服务Commercialformfree：它的作用是自动生成一个表格和地址，所以我们只需要发到这个地址即可：之后留言功能就没有问题了测试，可以进行下一步。选择PaaS平台部署，下载IPFS客户端或者通过CLI查看媒体文件这里可以看到github很方便。使用fleek不需要注册，只需要选择用github登录，然后选择你要部署的仓库，后端选择IPFS即可。目前，fleek也支持一些主流框架。还没试过，不过看过gatsby,hugo,react,nodejs:接下来可以看到我们的结果：https://ipfs.fleek.co/ipfs/QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU如果我们点击媒体路径https://ipfs.fleek.co/ipfs/QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU/images可以看到已经在IPFS上了：下载IPFS的客户端打开后，链接节点，使用生成的哈希值QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU可以直接访问topzF节点seeit当前连接到我们的其他节点：现在我看了媒体文件的视频，不知道什么时候开始分成很多部分。这是否意味着其他节点已经备份了我文件的缓存？你可以做更多的研究。做个实验，我原来html中的路径是指本地的video/xxx.mp4，如果我把路径换成ipfs，加载会不会更快？点对点？原代码：尝试换成IPFS链接，这样如果通过githubpage,load视频被IPFS地址引用在F12中查看Network的加载速度，我先简单的跑了10次，加载速度也差不了多少。但是第二天跑起来发现还是稍微快了点，不过我可能是有其他局部因素影响了。MerkleDAGMerkle树结构，简单看了一下，IPFS采用的是merkleDAGMerkle树结构，其中一部分使用了有向图无环拓扑排序，这个是巧合，我最近刚用拓扑排序解决了工作中的一个实际问题：Howto在不使用企业版的情况下实现Dremio的环境备份。用过Dremio的朋友一定知道：后面会详细记录Dremio的付费功能，但是简化的问题是，当我们从preprod上线到prod的时候，我们需要从数据源、pds、vds、reflection，生成sequence和preprod相同的dataset，但是你的sql查询会有相互依赖，比如selectafromb,c当你通过api拿到所有的dataset时，你需要先对它们进行排序。否则，可能会出现a先于b和c生成的情况。这种关系不是传统二叉树的层遍历，因为每个vds可能有多个parents。解决方案是对拓扑有向图进行排序，这样可以确保父节点总是先生成。以python为例，参考别人的实现方法：fromcollectionsimportdefaultdict####我发现上面的代码有问题（不知道是不是我的问题），于是自己写了一个，也加深了我对拓扑类Graph的理解：#Constructordef__init__(self,vertices):#创建一个dict{v:[u,i]}(v,u,i都是点，代表边,)来存储图中点之间的关系：Edgesetself.graph=defaultdict(list)#存储图中点的个数self.V=vertices#添加边defadd_edge(self,u,v):#addedgeself.graph[u].append(v)#获取存储图中所有点的状态：dict{key:Boolean}#最初都是Falsedefset_keys_station(self):keyStation={}key=list(self.graph.keys())#因为有些点没有边，所以在key中找不到，需要遍历图找到没有边的点如果len(key)很明显，cid的最后可以传一个参数filename，这个是可选的，如果你去掉，没有问题，但是带上会更明显，可以知道引用了哪个js，而且由于https://ipfs.io/ipfs/重复了，你也可以考虑在head使用base标签,这样引用会更简单ENS域名和个人优化,Valine评论插件交互其实就是部署后对css和js的引用IPFS通过fleek不用担心，我的工作流程是用markdown写文章，转成html，更新git，然后fleek会自动更新，因为绑定了对应的仓库。至于优化，我个人以展示为目的，希望结合自己的一些技巧。所以肯定不会集成到Gatasby或者Hugo这样的博客框架中。对我来说，django是一个不错的选择。至于域名，目前是git自动给定的。我选择尝试以太坊的ENS域名，这样可以在fleek的部署选项中添加ens域名。Fleek会在你每次更新时自动更新你的ens，你无需承担gas费用。ENS域名官网：https://app.ens.domains/我的ENS域名：yaozelinag.eth因为我选择的是ENS的域名，大家可以在etherscan以太坊主网上轻松找到我的公钥https://etherscan.io/enslooku...:一个优势就是ENS和你的以太坊地址Binding，所以现在有人想奖励我一杯咖啡，与其给他一个冗长的地址，还不如换个更有辨识度的名称：yaozeliang.eth（比较适合WEB3.0的人，我还是喜欢微信！）至于和访客交互，我用的是纯前端插件valine，挺好的，个人体验很好.我推荐最终效果：当前域名：https://yaozeliang.eth.link/主页（随机背景图）简历页介绍页项目展示文章分享个人收藏互动评论（Valine和form）简要总结githubpage必须公开仓库，如果有朋友也需要类似的模板，欢迎0元购买。..个人感觉IPFS的短板还是集中在性能和数据优化，接口问题上。个人网络需要NAT配置IPFS支持go语言。
