Yancy Lab 练手网站

这是一个从 0 开始练习的静态网站项目，适合学习网页搭建的完整流程：

• index.html：页面内容结构。
• styles.css：视觉样式和响应式布局。
• script.js：表单模拟提交等交互。
• assets/hero-workspace.png：首页主图资源。

本地预览

进入项目目录：

cd "/Users/yancychan/codex project/starter-website"

启动一个本地静态服务器：

python3 -m http.server 4173

浏览器打开：

http://localhost:4173

目录结构

starter-website/
├── assets/
│   └── hero-workspace.png
├── index.html
├── styles.css
├── script.js
└── README.md

部署路线 1：GitHub Pages

适合练习 Git 和免费静态站部署。

1. 在 GitHub 新建一个仓库，例如 starter-website。
2. 在本地初始化并提交：

git init
git add .
git commit -m "创建练手网站"
git branch -M main
git remote add origin https://github.com/你的用户名/starter-website.git
git push -u origin main

3. 打开 GitHub 仓库的 Settings -> Pages。
4. Build and deployment 选择 Deploy from a branch。
5. 分支选择 main，目录选择 /root，保存。
6. 等待部署完成，访问 GitHub 给出的 Pages 地址。

部署路线 2：Netlify

适合最快上线静态网站。

1. 登录 Netlify。
2. 选择 Add new site -> Deploy manually。
3. 把整个 starter-website 文件夹拖进去。
4. 等待部署完成，Netlify 会给一个临时域名。

部署路线 3：Vercel

适合以后继续学习前端框架。

1. 登录 Vercel。
2. 选择 Add New -> Project。
3. 导入 GitHub 上的 starter-website 仓库。
4. Framework Preset 选择 Other。
5. Build Command 留空，Output Directory 留空或填 .。
6. 点击部署。

下一步练习

• 把项目卡片改成自己的真实项目。
• 给联系表单接入真实后端或第三方表单服务。
• 加一个文章列表页面，练习多页面网站结构。
• 学会用 Git 提交版本，再部署到 GitHub Pages。