[高能]部署静态站到区块链上

本文涉及一些互联网和区块链的知识，阅读一点点门槛。

 

最近一个多月进入区块链行业，学到了非常多的知识，开阔了视野，看到了新的世界，今天给大家分享一个基于区块链的新玩法。

 

过去我们要开发-部署-运营一个网站，你需要写代码、买域名、域名备案、买服务器（租云服务器）、配服务器环境、买服务器带宽、买CDN服务、部署运维。这其中最主要的是，你得有自己的服务器，并为此花费各种成本。然后你还要管理你的服务器，保证服务器一直稳定运行。

 

先说我现在用区块链做到的事情，流程是这样的：

1、在阿里云注册一个域名，只要实名认证（1分钟），不需要备案。

2、配置一下DNS和域名解析（添加一条cname记录和一条txt记录）。

3、github配置workflows。

4、github提交代码（稍等一会，就上线了。以后更新网站就重复这一步）。

 

是不是特别简单，首次创建网站时，需要注册域名、解析域名、配置workflows，以后就只需要提交代码。除了注册域名没有任何收费成本，不需要关注服务器运维，因为我们代码是部署到区块链上的。

 

这是我部署的一个小站点，上面就只有两个给我孩子定制的学习工具（做这两个小工具是因为周未和学校老师沟通后，根据老师反馈的教学计划和孩子自己的学习情况，针对她的弱点定制的，不一定适合其它孩子。如果你的孩子也有类似的需求，也可能试试这两个工具）。

链接（微信不能加外部链接，可以复制到浏览器打开）：https://c01.link

或者长按二维码打开

    

 

废话说完了，下面开始详情说一下从头到尾怎么做。

 

第一步：Github新建项目

Github链接：https://github.com

Github是世界上最大的开源代码托管平台，如果你是开发者，一定对它很熟悉。现在登录你的Github（确实没用过的话，那先注册一个账号），然后创建一个新项目。

接下来把项目clone到本地，开发功能（注意项目必须是纯静态的，不能有后端代码，如果确实需要后端服务，可以另起一个api项目部署到传统的服务器上，跨域调用）。现在我们通常会使用React或vue框架来开发一个纯静态的网站。功能在本地测试完毕后，push到github远端仓库。

 

第二步：注册域名

阿里云域名注册链接：https://wanwang.aliyun.com

在阿里云选一个自己喜欢的域名，然后注册支付（当然你要提前注册登录阿里云系统）。

如果你的阿里云账号是新注册的，或者之前没有实名认证，那么现在你要做实名认证（不用找链接，注册域名后阿里云会主动提醒你实名认证的）。实名认证只需要上传身份证电子版照片，网站上说的是1天左右完成实名认证，实际上我等了半小时左右就实名认证通过了。如果不做实名认证，是不能解析域名的，这个是国家政策，不是阿里云政策。

阿里云实名认证通过后，还需要等待认证结果同步到注册局，按网站上说的也需要2天左右，我自己等了两天后查询确实已经通过了，有没有提前完成我也不知道。

要查询域名实名认证是否已经同步到注册局，可以查询域名的whois，比如下面这个阿里云的链接（把最后的域名换成你自己的）

https://whois.aliyun.com/whois/domain/c01.link

 

每次查询记得点“获取最新信息”，不然看到的可能是缓存，不是最新的数据。

只要这里看到域名状态是“正常状态（ok）”，就说明域名通过了注册局的实名认证，现在可以解析了。

 

在阿里云注册域名后，默认给域名配置的DNS是阿里云的两个dns服务，现在我们要修改它，把DNS换成cloudflare的。为什么这么做呢？因为用阿里云的DNS，如果你的域名要想在国内访问，就需要备案（备案还是挺麻烦的）。而cloudflare是美国的CDN服务商，也是全球最大的，我们用它的DNS，然后也在它这里配置域名的解析。

 

下面换DNS：

打开阿里云的域名列表页面 https://dc.console.aliyun.com/next/index

 

 

点域名右侧的“管理”，进入管理页面，然后点DNS修改。

 

 

然后点右上角的“修改DNS服务器”，新添加两个DNS域名，分别为：

 

felipe.ns.cloudflare.com

arushi.ns.cloudflare.com

 

然后把原有的阿里云的删除掉，保存、同步。

等几分钟，再去whois上查看一下最下面的dns服务器信息，如果DNS1和DNS2都变成了cloudflare的这两个，就说明dns修改生效了。

到此阿里云的操作就全部完成了。

 

第三步：注册Pinata

用Pinata干什么？需要先说一下IPFS。

 

 

IPFS是一个去中心化的文件存储系统，也是一个P2P的网络，我们可以通过IPFS节点上传文件到IPFS网络，每个文件在IPFS上都用一个唯一的Hash标识，这个Hash是根据文件的内容计算出来的，文件内容变更后，再次上传，Hash就变了，就算是一个新文件了。简单点说，就是文件只能上传，不能修改，如果内容有变动，需要重新上传一个新的文件。

那传到IPFS网络上的文件应该怎么访问呢？原始的方法是通过IPFS客户端节点，也就是你在自己电脑上安装一个IFPS的软件，通过在这个软件中，输入Hash来查看对应的文件。

另一种方法是，通过IPFS网关。一个IPFS的网关就是一个http的服务，是在中心化的服务器上部署IPFS节点，然后再通过http的方式对外提供文件访问服务。

任何人都可以自己部署IFPS的网关，所以互联网上有很多IPFS的网关，比如官方的网关地址：

https://ipfs.io/ipfs/QmV7EhhF5am18Yg8Gao1RruLLSb6cuo6LbJCYJ4J7BR8Wi/

Pinata的IPFS网关地址：

https://gateway.pinata.cloud/ipfs/QmV7EhhF5am18Yg8Gao1RruLLSb6cuo6LbJCYJ4J7BR8Wi/

上面这两个地址后面的Hash字符串，就是要查看文件的Hash。

 

那为什么要用Pinata呢？因为IPFS的网络是去中心化的，整个网络的节点是不受控的，所以你的文件上传到网络后，有可能只同步到很少的活节点，或者同步时间很慢，访问速度很慢。Pinata就是解决这个性能问题的。

Pinata是一个商业公司的产品，它自己维护一个可控的IPFS子网络，所以你通过它上传的文件，可以很快同步它自己的子网络节点，并且保证节点一直在线。所以用Pinata可以保证文件同步的速度和访问速度，还有高可用性。

Pinta这么做对它有什么好处？因为它对大客户是收费的，如果你的文件总量在1Gb以内，就是免费的，否则就需要付费。

当然除了Pinata，还有其它和它类似的商业产品，都大同小异。

 

介绍完Pinata，正式说一下怎么用。

网站地址：https://pinata.cloud/

因为这个网站是国外的，所以注册时尽量用国外主流的邮箱地址，我是QQ邮箱地址注册是不行的，用Gmail可以，建议大家直接用Gmail或Hotmail注册。

注册完登录上后，可以在顶部导航中找Pinata Upload试试手动上传文件或文件夹，然后在Pinata Explorer在查看文件。

接下来做正经事，创建API Key

 

 

如上图，点右上角的头像 -> API Keys。

然后点“New API Key”，创建一个API Key。

 

如上图，把Admin Key的开关打开，代表给这个key授予所有权限。下面的key name 随便填。

创建完后，下面的列表中就有一条记录了，把key记下，一会要用。

到此，Pinata的操作全部完成了。

 

第四步：注册cloudflare

cloudflare是一家美国的CDN运营商，是全球最大的CDN，在全球各地都有很多节点，包括国内。这可以让我们的用户更快的访问我们的网站。

并且最重要的是另外两个问题：

1、用网关访问我们的文件时，URL地址总是带着文件的Hash，首先文件内容更新后，地址就变了，其次太长不好看。

2、不管用哪个网关，域名都是别人的，怎么使用我们自己的域名。

 

cloudflare可以解决这两个问题，实际上cloudflare也提供了IPFS的网关。对于第一个问题，cloudflare支持一种叫DnsLink的功能，可以把一个域名绑定到一个指定的IPFS地址上，这样就能做到用户访问我们的域名，看到指定的文件，url上不需要带Hash了。当文件更新后，我们只需要重新配置DnsLink指向的Hash值，用户访问域名就能看到更新后的内容。

这里特别说明一下，IPFS上传一个目录，这个目录就会对应一个Hash，通过这个Hash加相对路径和文件名，可以访问到目录里相应的文件。

对于第二个问题，cloudflare可以配置域名解析，我们可以配置cname记录把自己的域名映射到cloudflare的IPFS网关。

 

cloudflare域名：https://cloudflare.com

下面说一下具体怎么做：

首先注册登录cloudflare，也是尽量用gmail或hotmail。

然后在cloudflare添加站点，链接https://dash.cloudflare.com/

添加完站点是这样的

点击进去，配置DNS

 

在DNS这里我们添加4条记录，2个CNAME，2个TXT。
 

上面第2行CNAME是把c01.link这个域名映射到www.cloudflare-ipfs.com。

第3行CNAME是把www.c01.link这个域名映射到www.cloudflare-ipfs.com。

这里的名称，如果要设置主域名，就直接写主域名，例如c01.link。如果要设置二级域名，例如www.c01.link，就只写www。

 

第4行TXT是添加一个dnslink映射，把主域名c01.link的访问映射到内容dnslink=后面的IPFS路径上。
第1行TXT也是添加一个dnslink映射，把二级域名www.c01.llink的访问映射到内容dnslink=后面的IPFS路径上。

这里的名称，如果要设置主域名，就直接写_dnslink。如果要设置二级域名，例如www.c01.link，就写_dnslink.www。

 

注意：TTL选择2分钟，就是保存完2分钟左右能生效，这是最快的了。

 

现在cloudflare的操作也都完成了，你可以访问你的域名，应该可以看到对应的文件了。

 

第五步：配置Github的workflows

经过前面的几步操作，功能我们已经可以实现了，但是Pinata上传文件和cloudflare域名映射都需要手动操作，还是挺麻烦的。这一步我们通过Github的workflows，来做自动化部署。

第一步的时候，我们已经在Github上创建了自己的项目，并提交了功能完备的代码。现在打开本地项目代码，在/.github目录中创建一个workflows目录，在这个目录下创建一个release.yaml。workflows目录是Github专门存放自动化任务的目录，这个目录里的所有*.yaml文件都会被Github自动扫描并执行。注意文件名随便写，但扩展名必须是.yaml。关于yaml的语法规则请自行google，这里就不专门介绍了。

 

我这里配置的yaml主要流程是，当push代码时，执行这个workflow。具体的任务流是：

1、给代码仓库创建一个新的tag。

2、在一个ubuntu的docker环境中checkout刚才新创建的tag。

3、安装项目的npm依赖，build项目。

4、把build生成的制品通过Pinata上传到IPFS网络。

5、更新cloudflare的dnslink记录，把我们的域名映射到最新在IPFS上生成的Hash。

 

有了上面这个自动化任务流，当我们提交完代码后，Github就开始自动执行命令，稍等片刻，你访问自己的域名，就能看到最新的代码了，并且这还有CDN的加速，速度很快的。

 

上面yaml配置中，最后两步需要一些参数，这里重点说一下。

第4步上传Pinata的任务，代码如下：

•  
•  
•  
•  
•  
•  
•  
•  

- name: Pin to IPFS  id: upload  uses: anantaramdas/ipfs-pinata-deploy-action@39bbda1ce1fe24c69c6f57861b8038278d53688d  with:    pin-name: demo ${{ needs.bump_version.outputs.new_tag }}    path: './dist'    pinata-api-key: ${{ secrets.PINATA_API_KEY }}    pinata-secret-api-key: ${{ secrets.PINATA_API_SECRET_KEY }}

 

with这里是4个参数：

pin-name是指你上传到Pinata的这次提交，给它一个名字，可以随便写。

实际上它会出现在Pinata的这里（表格的Name列），如下图

path是你要把哪个目录上传到Pinata，相对目录是你的项目根目录

pinata-api-key和pinata-secret-api-key是你在Pinata创建的API Key，如下图。在这里创建https://pinata.cloud/keys

 

 

 

由于这些key代表你Pinata账号的授权，所以最好不要明文写到yaml里，我们把它们配置到github的Actions secrets里，然后在yaml里引用系统常量，如下图：

 

 

然后第5步cloudflare的配置同理，代码如下：

 

•  
•  
•  
•  
•  
•  
•  
•  
•  

- name: Update DNS with new IPFS hash  env:    CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}    RECORD_DOMAIN: 'c01.link'    RECORD_NAME: '_dnslink'    CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_TOKEN_ZONE_ID }}  uses: textileio/cloudflare-update-dnslink@master  with:    cid: ${{ steps.upload.outputs.hash }}

 

env这里需要4个参数

RECORD_DOMAIN是你要更新的域名，对应cloudflare添加的CNAME记录

RECORD_NAME是域名对应的dnslink名称，对应cloudflare添加的TXT记录

CLOUDFLARE_TOKEN在cloudflare创建的API令牌，在这里创建：

https://dash.cloudflare.com/profile/api-tokens

如下图

 

“创建令牌” -> 选择“编辑区域DNS”

 

最后一个图里的内容一定要记下来，页面关了就再也看不到了。

上面那个字符串就是CLOUDFLARE_TOKEN的值。

CLOUDFLARE_ZONE_ID是cloudflare的区域ID，其实也就是cloudflare中你这个域名对应的ID，在域名管理页面右下侧可以查看。

链接：https://dash.cloudflare.com/

进去找到域名，点击进去就是域名管理页面。

 

这里的CLOUDFLARE_TOKEN和CLOUDFLARE_ZONE_ID也是非常重要的私密信息，不要明文写到yaml里，和Pinata的api key一样，也配置到github的Actions secrets里。

 

 

Github Workflows配置到此全部完成。

我示例项目的github地址：https://github.com/cuidingfeng/dapp-demo

欢迎Star。

 

第六步：提交代码

现在你可以在本地修改你的代码，然后push到github远端仓库。

如果你想看看现在github是如何自动部署的，可以打开Github的Actions，点击最上面的那条result，就能看到它正在按yaml定义的流程，依次执行命令，完成部署。

当你看到部署成功的状态时，访问你的域名，就看到最新的代码效果了。

 

感谢你耐心看完了这么长的一篇文章

 

恭喜你，现在可以在区块链上部署自己的静态站点了。