Web3 实战项目项目部署到 GitHub 和上线预览的完整指南

目录

🚀 一、部署到 GitHub

✅ 前置准备

🧱 部署步骤：

1. 创建一个 GitHub 仓库

2. 上传项目文件

方法一：使用 Git 命令行

方法二：直接上传

🌐 二、通过 GitHub Pages 免费上线 DApp（前端）

✅ 设置步骤：

🧪 补充建议

🚀 一、部署到 GitHub

✅ 前置准备

• 注册 GitHub 账号（如果你还没有）

• 安装 Git 工具（或使用 GitHub Desktop）

🧱 部署步骤：

1. 创建一个 GitHub 仓库

• 访问 GitHub.com

• 点击右上角 + → New repository

• 仓库命名建议：message-board-dapp

• 设置为 Public（公开），勾选 Add a README 可选

2. 上传项目文件

你可以通过以下两种方式上传：

方法一：使用 Git 命令行

# 解压 ZIP 包
unzip MessageBoard_DApp.zip
cd MessageBoard_DApp

# 初始化 Git 项目
git init
git remote add origin https://github.com/你的用户名/message-board-dapp.git
git add .
git commit -m "init: first commit"
git push -u origin master

方法二：直接上传

• 打开仓库页面

• 点击 “Add file” → “Upload files”

• 拖拽所有文件上传 → Commit changes

🌐 二、通过 GitHub Pages 免费上线 DApp（前端）

✅ 设置步骤：

1. 打开你仓库的页面

2. 点击 Settings → 选择左侧栏 Pages

3. 找到 “Source” 一栏，选择：

   Branch: master（或 main）
   /root（表示根目录）
   

4. 点击保存，页面会生成一个可公开访问的链接，形如：

https://你的用户名.github.io/message-board-dapp/

1. 打开这个链接，就可以访问你的留言上链 DApp！

🧪 补充建议

• 别忘了在 script.js 中把合约地址改成 Remix 部署后的地址；

• 页面加载需要用户授权 Metamask；

• GitHub Pages 仅适合静态前端（它不托管 Solidity 合约）；