🌐 网页制作·极速工坊：从「空白文件夹」到「上线可访问」30 分钟速通！① 项目骨架（3 文件 = 1 套页） ② i

无需 WebPack、无需脚手架，
一张 index.html + 一根 style.css + 一行 script.js = 一套可部署的响应式官网。
跟着节奏复制→改字→拖图片→git push，立刻拥有 **https://你的名.github.io` 在线网址🚀

① 项目骨架（3 文件 = 1 套页）

my-site/
├─ index.html      ← 结构 + 内容
├─ style.css       ← 颜值 + 动效
├─ script.js       ← 交互（可选）
└─ assets/
    └─ avatar.png  ← 你的 Logo/头图

② index.html（5 秒复制）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>盛小夏的个人官网</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="hero">
    <img src="assets/avatar.png" alt="avatar" class="avatar" />
    <h1>Hi, I'm 盛小夏 👋</h1>
    <p>Java · Scala · 全栈 | 写代码，也写生活</p>
    <div class="social">
      <a href="https://github.com/xxx" target="_blank">GitHub</a>
      <a href="https://juejin.cn/user/xxx" target="_blank">掘金</a>
    </div>
  </header>

  <section class="section">
    <h2>🎯 Skill Stack</h2>
    <ul class="tags">
      <li>Java</li><li>Scala</li><li>Spring</li><li>Play Framework</li>
      <li>Pandas</li><li>Streamlit</li>
    </ul>
  </section>

  <section class="section">
    <h2>📚 Recent Posts</h2>
    <ol>
      <li><a href="https://juejin.cn/post/7xxxx">Java 细节怪面试题 12 连</a></li>
      <li><a href="https://juejin.cn/post/8xxxx">Scala 集合速通</a></li>
    </ol>
  </section>

  <footer>© 2024 盛小夏 | Built with ❤️ and CSS</footer>

  <script src="script.js"></script>
</body>
</html>

③ style.css（颜值即正义）

/* reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #00c896;   /* 骑行绿 */
  --bg: #f5f7fa;
  --text: #333;
  --radius: 12px;
  --maxWidth: 800px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.hero {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.hero h1 { font-size: 3rem; margin: 20px 0; }
.avatar {
  width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff;
}
.social a {
  margin: 0 10px; color: #fff; text-decoration: none; font-weight: bold;
}

.section {
  max-width: var(--maxWidth);
  margin: 40px auto; padding: 0 20px;
}
.tags {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
}
.tags li {
  background: var(--primary); color: #fff; padding: 6px 14px; border-radius: var(--radius);
}

footer {
  text-align: center; padding: 30px 0; font-size: 0.9rem; color: #777;
}

/* 移动端适配 */
@media (max-width: 600px) {
  .hero h1 { font-size: 2rem; }
}

④ script.js（轻量级交互）

// 平滑滚动 + 打字机效果（可选）
document.addEventListener('DOMContentLoaded', () => {
  const h1 = document.querySelector('.hero h1');
  const txt = h1.textContent;
  h1.textContent = '';
  let i = 0;
  const type = () => {
    if (i < txt.length) { h1.textContent += txt.charAt(i++); setTimeout(type, 100); }
  };
  type();
});

⑤ 本地预览 & 调试

把文件夹拖进 VS Code 安装 Live Server 插件 → 点击右下角 Go Live
或命令行：

cd my-site
python -m http.server 8000
# 浏览器打开 http://localhost:8000

⑥ 上线：GitHub Pages 30 秒部署🚀

# 1. 新建仓库 my-site → 推代码
git init
git add .
git commit -m "first blood"
git remote add origin https://github.com/你的名/my-site.git
git push -u origin master

# 2. 进入仓库 Settings → Pages → Source 选 master / (root) → Save
# 3. 立刻拥有：https://你的名.github.io/my-site

⑦ 进阶玩法（可选）

功能	一句话提示
暗黑模式	按钮 + `@media (prefers-color-scheme: dark)`
多语言	`data-i18n` + JS 切换
评论系统	引入 Giscus
访问统计	埋点 Google Analytics 或 umami