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

By [Licrazy](https://paragraph.com/@doger) · 2022-10-06

---

我的推特：[LiCrazy](https://xn--https-ni33a://twitter.com/0xFeng)

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

任务需求：创建一个nft合约以及mint的前端网页。【[官方文档](https://speedrunethereum.com/challenge/simple-nft-example)】

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

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

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

![](https://storage.googleapis.com/papyrus_images/68721e3ea52cb7aab9604be489baf52f49173e8f3b9e0d53ea833d804b666ce9.png)

![](https://storage.googleapis.com/papyrus_images/81d241c5b9d0316a9589d367a1e2a2526e69c20ce59e7f4d09cc00c4984068ce.png)

![](https://storage.googleapis.com/papyrus_images/c9a221cee5211621f385bc7f5ad7fb79cafa5afea0cbc670a499ca2fc49e15fd.jpg)

![图四：最终打开界面](https://storage.googleapis.com/papyrus_images/23e6b91bfb510208d7ef311d5c4133c423b3baeb67748ca8b41cb0bc4fb708dc.png)

图四：最终打开界面

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

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

![](https://storage.googleapis.com/papyrus_images/5f6d1f370924ac173ea5c9065345aabb89f4892360d53729f274509cd0baeb2c.png)

![](https://storage.googleapis.com/papyrus_images/50b458d942f39fc9d11df34a6a6dcd26fddbdd3e0ea0abea9a40c0991b2051ab.png)

![](https://storage.googleapis.com/papyrus_images/4bf4450430d0b48575a1bf688dbc1a86ad66421ecc32911432dca2aa987ce04e.png)

### 三、在goerli上部署nft合约

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

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

![](https://storage.googleapis.com/papyrus_images/050a2444b76f00be15756b266c8d8e4f319c2f3791d7439ab3f185701e425c60.png)

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

![](https://storage.googleapis.com/papyrus_images/960c9671bfe048ee329803eb7b24cdfbc591b94fe58f4a945bdf93ff49b6f324.png)

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

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

![](https://storage.googleapis.com/papyrus_images/8b23da63d7d51aadc51d85a911f00772525edd6ce913f4d59999b02462476a80.png)

### 四、创建mint前端网页

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

![](https://storage.googleapis.com/papyrus_images/2c5165452f842bf6a6850e468c35af3e41c3db0db7348a5f65db2e505eeb4d91.png)

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

![](https://storage.googleapis.com/papyrus_images/d566230e9307f1429a38c16039719d2f81e4154f536ad8a22bc728eb4766c8b4.png)

![](https://storage.googleapis.com/papyrus_images/49332ca51a3d8a039de1ec06e69c08d3cc6ea14c6ce08102a2c51d0d0e3e691a.png)

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

![](https://storage.googleapis.com/papyrus_images/e256d57d76cfc86d59456df421d9402d0da43ebaf298b90c7826d7c57c765db1.png)

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

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

![](https://storage.googleapis.com/papyrus_images/c10bab2d106db40bb46798c0a363d9c2618826a7fc1ec628b2e16e61b1d806ef.png)

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

![](https://storage.googleapis.com/papyrus_images/07287d9d9b10a1a99285f61c93ef57360ebcd014b6c420cb959fad04d1076a10.png)

### 五、任务确认以及提交

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

![](https://storage.googleapis.com/papyrus_images/7844adf865a7942d225c8b077283b68968c7909562321010f2240a0da9295a04.png)

![](https://storage.googleapis.com/papyrus_images/40448b3301c88882d7a1f2acf4ba70765cf1cc01e29db67b429bfafb9f9ea8aa.png)

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

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

2、在discord递交任务

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

speedrun地址见下方红框。

![](https://storage.googleapis.com/papyrus_images/a06fbac5b5fc3afab02c8dc108e93ea31fe24aa557773850d53fdbc2d653f798.png)

---

*Originally published on [Licrazy](https://paragraph.com/@doger/condor-systems-3-mint-nft)*