项目简述
本文主要记录作为非web开发人员(本人),如何实现迅速部署自己的第一个SPA应用至星际文件系统 IPFS 作为入门web3.0 的第一个练习,拿我自身来说,前后端知识基本为0,我的基本流程如下:
-
选择合适的应用类型(SPA)
-
挑选简单模板并套用(H5+Bootstarp+原生javascript)
-
代码托管平台(Github)
-
白嫖免费部署服务:
- 传统方式:Githubpages
- PAAS(platform as a service)选择1: fleek (我的选择)
- PAAS(platform as a service)选择2: 4everland
-
第三方表单服务提供商formspree实现留言功能
-
通过github绑定fleek部署
-
下载IPFS客户端, 连接至fleek部署的节点
-
测试如果替换掉html的音频视频链接为IPFS的地址,在备份足够多的情况下,是否P2P加载更快
-
更新网页内容:只需git经典三步,add,commit,push即可,因为已经绑定fleek
-
CI/CD:无
-
优化:没有框架,html页面有重复的部分,我个人目前用md自动转换为html,也符合日常需求
最终效果
- Githubpage: https://yaozeliang.github.io/resume/
- IPFS:https://ipfs.fleek.co/ipfs/QmUzk9oyUCzaXsf8jedVqLzRFi1rBxTRdKfExA2pzFJeBU
- CID(Content Identifier):QmddHLkhzHixGpTAGopDNJ8dF3i6UrdrsEiMwsDt2x52G5
挑选模板,修改,增加留言服务,push到github上
这是我挑选的模板链接: 点我预览,这款模板2017年上线,没有使用框架,ajax配合原生javascript,但是恰好符合我的目标,考虑到当前PAAS平台部署react,django等项目还不太成熟,我选择最简单的单页面应用
本着白嫖的原则,我们可以使用github提供的免费网页部署服务。但是只适合单页面应用,套任意的前端模板就行。首先简单修改模板,本地运行没问题后,经典三步推到github:
git add
git commit -m "First commit"
git push origin master
接着可以迅速在文件所在的仓库中找到对应选项勾上,成为githubpage的项目后会自动寻找目录的index.html, 一般大家都是拿部署文档用,我这里因为有个人需求,想做的稍微美观些:
这时我们点击提示的url已经能看到部署成了,每次本地修改push后相当于重新部署了下,等待几分钟就可以看到变化,有一些延迟,不过对于免费的东西不能要求太多。不要忘了提前用remote add origin 挂载到相关的仓库就行,比如我这里的话就是resume
放在github上有个明显的好处,方便对接很多其他服务,比如关于留言的部分可以直接用免费的留言服务商formfree:
它的功能就是自动生成一个表单和地址,这样我们只要post到这个地址就行:
测试后留言功能没有问题,可以进行下一步了
选择PAAS平台部署,下载IPFS客户端或者通过CLI查看媒体文件的ID和哈希
这里就可以看出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可以直接查看到
接入节点后可以看到当前和我们连接的其他节点:
现在我看了下媒体文件的视频,已经不知道什么时候开始被分成很多份了,这是说其他
节点已经备份了我这个文件的缓存吗?可以多研究下。
做个实验,我原来的html里路径引用的是本地video/xxx.mp4,如果我把路径替换为ipfs的,加载会更快吗?P2P?
原来的代码:
<a class="lightbox mfp-iframe" href="video/powerapps.mp4"title="Stock Management">