利用 Vercel 打造个人静态网站

第 1 步：把 React 代码推送到 GitHub

1.1 准备工作

·确保已安装 Git：https://git-scm.com/downloads

·注册 GitHub 账号：https://github.com/

1.2 在 GitHub 创建新仓库

1. 登录 GitHub, 点击右上角"+" -> "New repository"

2. 填写仓库信息：

·Repository name: my-react-blog (给你的项目起个名字)

·Description: My personal blog built with React (可选)

·选择 Public(这样可以使用 Vercel 免费服务)

·Add a README file (建议勾选)

3. 点击 "Create repository"

1.3 配置本地 Git 并推送代码

· 打开终端/命令行，进入 React 项目目录:

# 进入你的项目文件cd path/to/your/react-project# 初始化 Gitgit init# 添加所有文件到暂存区git add .# 提交更改git commit -m "Initial commit: My React blog"# 连接到 GitHub 仓库（替换成你的仓库地址）git remote add origin https://github.com/你的用户名/my-react-blog.git# 推送到 GitHubgit push -u origin main

第 2 步：用 Vercel 导入并部署

2.1 注册和登录 Vercel

1. 访问 vercel.com

2. 点击 "Sign Up"，选择 "Continue with GitHub"

3. 授权 Vercel 访问你的 GitHub 账号

2.2 部署项目

1. 在 Vercel 控制台点击 "Add New..." -> "Project"

2. 你会看到你的 GitHub 仓库列表，找到 my-react-blog 点击 "Import"

3. 配置项目设置

·Project Name: my-react-blog (自动填充)

·Framework Preset: Vercel 通常会自动检测为 Create React App

·Build Command: npm run build (默认)

·Output Directory: build (默认)

·其他设置保持默认

2.3 等待部署完成

·Vercel 会自动开始构建过程，你可以在屏幕上看到实时日志

·通常 1-2 分钟就能完成部署

·看到 "Congratulations! Your project is live." 表示成功

第 3 步：获得临时域名测试

第 4 步：购买自己喜欢的域名

推荐域名注册商：

·Namecheap (国际，价格透明)

·GoDaddy(国际，最大注册商)

·阿里云/腾讯云 (国内，中文界面)

购买步骤 (以腾讯云为例):

1. 访问 https://cloud.tencent.com/product/domain?Is=sdk-topnav

2. 在搜索框输入你想要的域名，如 my-awesome-blog.com

3. 查看可用选项，选择你喜欢的域名加入购物车

4. 完成注册和支付流程

5. 在控制台找到你购买的域名

第 5 步：在 Vercel 中绑定自定义域名

5.1 在 Vercel 添加域名

1. 回到 Vercel 控制台，点击你的项目 my-react-blog

2. 点击顶部的 "Domains"

3. 在输入框中输入你购买的域名，如 www.my-awsome-blog.com

4. 点击 "Add"，在"DNS Records找到记录"

5.2 配置 DNS 记录

1. 在控制台找到我的域名，选择在你需要的域名右侧菜单栏点击解析

2. 添加 Vercel中的 DNS Records记录

3. 保存更改

5.3 等待 DNS 生效

·记录添加后很快就能生效

·Vercel 会自动检测并显示状态

·当状态变为 "Vaild" 时，表示配置成功

5.4 测试自定义域名

在浏览器访问你的新域名：

·www.my-awsome-blog.com 应该显示你的 React 网站

·Vercel 会自动提供 免费的 SSL 证书，域名会是 https:// 开头