我的推特：LiCrazy

TL;DR:遵照官方文档提示，在gitpod上面创建一个mint前端网页，在gitpod编译可以避免环境问题以及无需下载本地软件。

任务需求：创建一个nft合约以及mint的前端网页。【官方文档】

步骤：在gitpod打开代码/部署nft/部署前端/提交任务，主要内容是三、四步。

一、用GitHub账户打开官方源码

1、在gitpod打开官方源码:直接点击官方文档中的下方按钮，然后在弹出的对话框选择“continue with GitHub”登陆上你的github账号就行，再选择“new workspace”，等待一会最终如图四。这里可能根据每个人的账号设置略有差异，反正自己摸索一下：主旨就是用GitHub打开官方的这部分代码。

二、试用官方本地钱包（这部分其实做不做无所谓就是在钱包界面随意试用下）

如下所示，先领水——>再转账——>再mint几次，随意点点吧。

三、在goerli上部署nft合约

1、刚才我们都是在本地钱包试用，接下来我们把它部署在goerli测试网上。

打开packages/hardhat/hardhat.config.js文件，将defaultNetwork更改为“goerli”。

2、在下方TERMINAL控制台输入yarn generate创建一个地址。第二个红框内的地址即为创建新钱包地址，将此地址复制保存⚠️⚠️⚠️。

3、去 https://faucet.paradigm.xyz/ 给上一步创建的新地址领取一点点goerli网络上的eth作为gas（⚠️⚠️⚠️仔细看这句话的意思），需要发推验证。当然不一定非得去这里领，只要你能搞到GoerliETH就行。

4、在Terminal控制台输入yarn deploy部署一个nft合约。红框2即为创建的nft合约地址，保存下来后面提交任务要用到。

四、创建mint前端网页

1、打开packages/react-app/src文件夹下的App.jsx，将targetNetwork修改成NETWORKS.goerli。

2、点击右上角重新打开一个网页，会发现已经切换到goerli网。点击“connect”连接小狐狸钱包（注意将钱包切换到goerli，且有eth），然后点击“mint nft”交互一次。（这一步只是验证，其实不做也无所谓）

3、在Terminal控制台输入yarn build,创建前端，需要等待较长的时间，如下图显示即为成功。

4、在Terminal控制台输入yarn surge，期间让会让你输入邮箱/密码创建surge账号，输入后每次回车即可。当出现domaim网址后再次回车，等待上传完成100%。

（⚠️注意：这一步可能会多次失败，不用怕重复运行yarn surge即可！！！）

5、复制上图红框内的网址在浏览器打开，可以随意连接一个钱包在goerli测试网上mint，能成功mint则代表所有部署完成。

五、任务确认以及提交

1.还记得文首的官方文档不？打开官方文档，连接钱包，点击submit，在任务平台确认任务。

红框1填入：http://polite-wine.surge.sh/ 见教程第四大步第4小步。

红框2填入：https://goerli.etherscan.io/address/0x2Cc170B6d9916c0ed2b28f24B7954f11d81F73ab 见教程第三大步第4小步。

2、在discord递交任务

将上一步红框1、2内的链接以及你的speedrun etheruem个人地址提交到相应的任务频道即可。

speedrun地址见下方红框。