Web3搭建网站全教程,从零开始构建你的去中心化应用

第三步：编写智能合约（以以太坊为例）

1. 安装Hardhat：npm install hardhat --save-dev，初始化项目npx hardhat。
2. 编写合约：在contracts/目录下创建Website.sol，实现简单的所有权验证或数据存储功能：

   SPDX-License-Identifier: MIT
   pragma solidity ^0.8.0;
   contract Website {
       string public websiteUrl;
       constructor(string memory _url) {
           websiteUrl = _url;
       }
       function updateUrl(string memory _newUrl) public {
           websiteUrl = _newUrl;
       }
   }

3. 编译部署：配置hardhat.config.js，连接测试网（如Goerli），通过npx hardhat run scripts/deploy.js --network goerli部署合约，记录合约地址。

第四步：前端集成区块链与IPFS

1. 安装钱包SDK：npm install ethers（以太坊交互）、npm install ipfs-http-client（IPFS文件上传）。
2. 连接钱包：在React组件中，使用ethers连接MetaMask，获取用户地址：

   import { ethers } from 'ethers';
   const connectWallet = async () => {
       if (window.ethereum) {
           await window.ethereum.request({ method: 'eth_requestAccounts' });
           const provider = new ethers.BrowserProvider(window.ethereum);
           const signer = await provider.getSigner();
           return signer.getAddress();
       }
   };

3. 上传IPFS：将网站静态文件（如build目录）通过IPFS Desktop上传，获取CID（内容标识符），例如bafybeigdyrzt5...。

第五步：部署与访问

1. 组合域名：使用ENS（以太坊域名服务）或传统DNS，将IPFS CID解析为可访问的域名（如myweb3.eth或通过ipfs.io网关访问：https://ipfs.io/ipfs/{CID}）。
2. 测试交互：在前端调用智能合约方法（如updateUrl），通过MetaMask签名交易，实现网站内容的链上更新。

注意事项

• 安全：智能合约需通过审计，避免重入攻击等漏洞；
• 成本：部署合约需支付Gas费，测试网可用测试代币（如Goerli ETH）；
• 优化：IPFS文件可结合Pinata等服务长期存储，避免节点下线导致内容丢失。

通过以上步骤,你已拥有一个去中心化、抗审查的Web3网站，未来可集成DAO治理、NFT门票等更多Web3特性，让网站真正属于用户。