从零开始,自己动手搭一个Web3网站,新手友好指南

import './App.css';  
function App() {  
  return (  
    <div className="App">  
      <header className="App-header">  
        <h1>我的Web3 NFT展示站</h1>  
        <div className="nft-card">  
          <img src="https://via.placeholder.com/300" alt="NFT图片" />  
          <h2>数字艺术品 #001</h2>  
          <p>这是一件基于以太坊链的NFT作品，由我创作并铸造。</p>  
          <button>查看详情（连接钱包后）</button>  
        </div>  
      </header>  
    </div>  
  );  
}  
export default App;  

用 src/App.css 添加简单样式（略），刷新页面即可看到效果。

步骤2：集成Web3功能（连接钱包、读取链上数据）

前端页面需要与区块链交互，比如连接用户钱包、读取NFT信息等，这里使用 ethers.js（以太坊最流行的JavaScript库）来实现：

1. 安装ethers.js：
   终端中输入：

   npm install ethers  

2. 添加“连接钱包”按钮：
   修改 src/App.js，集成MetaMask连接功能：

   import { useState } from 'react';  
   import { ethers } from 'ethers';  
   function App() {  
     const [account, setAccount] = useState(null); // 存储用户钱包地址  
     const [provider, setProvider] = useState(null); // 存储区块链连接提供者  
     const connectWallet = async () => {  
       if (window.ethereum) {  
         try {  
           const accounts = await window.ethereum.request({  
             method: 'eth_requestAccounts'  
           });  
           const provider = new ethers.providers.Web3Provider(window.ethereum);  
           setAccount(accounts[0]);  
           setProvider(provider);  
         } catch (error) {  
           console.error('连接钱包失败:', error);  
         }  
       } else {  
         alert('请安装MetaMask钱包！');  
       }  
     };  
     return (  
       <div className="App">  
         <header className="App-header">  
           <h1>我的Web3 NFT展示站</h1>  
           {!account ? (  
             <button onClick={connectWallet}>连接MetaMask钱包</button>  
           ) : (  
             <p>已连接钱包: {account.slice(0, 6)}...{account.slice(-4)}</p>  
           )}  
           {/* 其他前端内容 */}  
         </header>  
       </div>  
     );  
   }  

   刷新页面，点击“连接MetaMask钱包”，授权后即可看到你的钱包地址。

步骤3：去中心化存储（用IPFS托管前端文件）

传统网站托管在服务器（如GitHub Pages、Vercel），而Web3网站需要用去中心化存储（IPFS、Arweave）确保抗审查，这里以IPFS为例：

1. 安装IPFS Desktop：
   从官网（ipfs.tech）下载对应系统的IPFS Desktop，安装并启动（首次启动会初始化节点）。

2. 上传前端文件到IPFS：

   • 将React项目构建成静态文件（终端输入 npm run build，生成 build 文件夹）；
   • 打开IPFS Desktop，点击“Files”→“Add files”，选择 build 文件夹，上传成功后会得到一个“CID”（Content Identifier，类似文件的“哈希地址”）；
   • 在IPFS Desktop的“Gateway”中，可通过 https://ipfs.io/ipfs/<CID> 访问你的网站（https://ipfs.io/ipfs/bafybeiemxf5ab...）。

至此，你的前端网站已“上链”，任何人都能通过IPFS网络访问，且不会因服务器宕机而消失。

步骤4：智能合约（可选，实现链上逻辑）

如果你的网站需要“铸造NFT”“投票”等链上功能，就需要编写智能合约（用Solidity语言），这里以“简单NFT铸造合约”为例：

1. 安装开发框架：
   终端输入：

   npm install -g hardhat  

2. 创建Hardhat项目：

   mkdir nft-contract && cd nft-contract  
   npx hardhat init  

   选择“Create a JavaScript project”，默认配置即可。

3. 编写合约代码：
   在 contracts/ 目录下创建 MyNFT.sol：

   // SPDX-License-Identifier: MIT  
   pragma solidity ^0.8.9;  
   import "@openzeppelin/contracts/token/ERC721/ERC721.sol";  
   import "@openzeppelin/contracts/utils/Counters.sol";  
   contract MyNFT is ERC721 {  
     using Counters for Counters.Counter;  
     Counters.Counter private _tokenIdCounter;  
     constructor() ERC721("MyNFT", "MNFT") {}  
     function mintNFT(address to, string memory tokenURI) public {  
         uint256 tokenId = _tokenIdCounter.current();  
         _safeMint(to, tokenId);  
         _setTokenURI(tokenId, tokenURI); // 设置NFT的元数据（图片、描述等）  
         _tokenIdCounter.increment();  
     }