# Condor Systems 任务3:部署Mint NFT的前端网页 

**Published by:** [Licrazy](https://paragraph.com/@doger/)
**Published on:** 2022-10-06
**URL:** https://paragraph.com/@doger/condor-systems-3-mint-nft

## Content

我的推特：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地址见下方红框。

## Publication Information

- [Licrazy](https://paragraph.com/@doger/): Publication homepage
- [All Posts](https://paragraph.com/@doger/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@doger): Subscribe to updates
- [Twitter](https://twitter.com/Licrazy01): Follow on Twitter