第一个网站先做好一页就够了
第一版不需要框架、动画库和数据库。它需要说清楚三件事：这个网站是谁做的、准备分享什么、读者下一步可以做什么。先在自己的电脑新建目录，这样写错和删除都不会影响公网服务器。
mkdir -p my-first-site
cd my-first-site
touch index.html styles.css
Windows 可以在资源管理器新建同名文件夹和文件，也可以用 VS Code 打开目录。注意系统不要偷偷把文件保存成 index.html.txt。
写入完整 HTML
用文本编辑器打开 index.html，把示例名字、邮箱和文字改成自己的。下面使用 header、main、footer 等语义标签，浏览器和搜索系统更容易理解页面基本结构。中文网站要把 html 的 lang 改为 zh-CN。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>林一的网站｜建站与 SEO 实践记录</title>
<meta name="description" content="记录一个网站从服务器、域名、内容发布到自然流量增长的真实过程。">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header><a class="brand" href="/">林一的网站</a></header>
<main>
<p class="eyebrow">从 0 开始公开建站</p>
<h1>我正在亲手做一个真正有用的网站。</h1>
<p class="intro">这里记录服务器、域名、内容运营和搜索增长中真正验证过的方法。</p>
<a class="button" href="mailto:hello@example.com">和我联系</a>
</main>
<footer>© 2026 林一，随着项目持续更新。</footer>
</body>
</html>
用少量 CSS 做出清楚层级
第一版只设一个正文色、一个强调色、合适的阅读宽度和充足留白。把下面内容写进 styles.css。
:root { color-scheme: light; --ink: #191815; --muted: #6f6b63; --paper: #f6f3ed; --accent: #7b5b38; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.8 system-ui, sans-serif; }
header, main, footer { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
header { padding: 32px 0; border-bottom: 1px solid #d8d1c6; }
.brand { color: inherit; font-weight: 700; text-decoration: none; }
main { min-height: 70vh; padding: 96px 0; }
.eyebrow { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .16em; }
h1 { max-width: 680px; margin: 16px 0 24px; font-family: Georgia, serif; font-size: clamp(42px, 8vw, 76px); line-height: 1.08; }
.intro { max-width: 580px; color: var(--muted); }
.button { display: inline-block; margin-top: 24px; padding: 11px 18px; border: 1px solid var(--ink); color: inherit; text-decoration: none; }
footer { padding: 28px 0 48px; border-top: 1px solid #d8d1c6; color: var(--muted); font-size: 14px; }
在自己的电脑预览
双击 HTML 可以快速看一眼，但本地 HTTP 服务更接近正式环境。macOS 和不少 Linux 电脑已经自带 Python，可以在网站目录执行：
python3 -m http.server 8000
浏览器打开 http://127.0.0.1:8000。这个服务只用于本地预览，不能当作正式 Web 服务器暴露到公网。看完回到终端按 Ctrl+C 停止。Windows 也可以使用 VS Code 的本地预览扩展，但不要把开发预览端口直接对外开放。
上线前自己做一次编辑检查
把每一句话读出声，点击全部链接，把浏览器缩窄到手机宽度，再打开开发者控制台检查有没有 styles.css 404。全目录搜索 example.com，确认示例邮箱和域名已经替换。title 要具体，description 要如实概括当前页面，不要承诺页面里根本没有的内容。
再问自己：陌生人三秒内能看懂网站主题吗？页面里是否只有一个明确 H1？联系方式是否真的能收到邮件？这三个答案比再加一个渐变背景重要。
我的心得
我做第一批页面时，每加一个效果，发布就晚一天。真正的转折是先上线一个很朴素的页面，清楚写明“我为谁记录、接下来写什么”。有真实方向的简单页面，比堆满通用口号的精美模板更像一个人在认真做事。
完成标准
本地地址能打开、手机宽度可读、没有示例邮箱和域名、页面只有一个清晰 H1，就可以准备上线。先把目录纳入版本管理或另存一份备份，然后跟下一篇 使用 Caddy 部署第一个网站。