0到1上线你的个人/公司网站（国内友好）

建站公司的报价从 ¥5000 到 ¥50000 不等，但做出来的站 2026 年还用 PHP + MySQL，打开要 5 秒，改个 banner 要提工单。这套教程教你自己搞定，全年成本 ¥85（就是一个域名的钱）。流程全部走一遍，含国内用户的支付宝支付、访问优化和备案替代方案。

这套方案适合谁

✅ 个人作品集 / 公司官网 / 产品落地页 / 博客 / SaaS 主站 / 文档站

❌ 需要工信部 ICP 备案的业务（文末给了替代方案）

❌ 需要大文件上传 / 实时视频转码 / WebSocket 长连接的应用

📦 最终架构（全图）

整套方案只有 4 个服务，其中 3 个对中小企业流量完全免费：

层级	服务	年费	作用
域名	NameSilo	¥70-90	支付宝付款，免费 WHOIS 隐私
DNS + 边缘安全	Cloudflare Free	¥0	免费 SSL、WAF、CDN
代码托管	GitHub Free	¥0	无限公开仓库
构建 + 部署	Vercel Hobby	¥0	100 GB/月带宽，全球边缘
合计		≈ ¥85

工作原理一句话：Git push 代码 → GitHub 通知 Vercel → 自动构建部署到全球边缘网络 → 用户通过 Cloudflare DNS 拿到最近节点的 IP。你永远不需要 SSH 进任何一台服务器。

⚙ 前置准备（10 分钟）

Gmail / Outlook / ProtonMail 邮箱（国内企业邮箱收不到海外验证邮件，会卡在注册那步）
TOTP 二次验证 App：推荐 1Password / Authy / Ente Auth（域名账号被撞库 = 整个站被劫持）
Node.js ≥ 18, Git ≥ 2.30（Mac 用 brew，Windows 用 nodejs.org 官网安装包）
支付宝或银联卡（买域名用；其他服务免费阶段不用付款）
科学上网（NameSilo / Vercel / Cloudflare 部分功能在国内需要代理）

🌐 第 1 步：NameSilo 注册域名（10 分钟，¥80 左右）

为什么不选别家：

❌ GoDaddy：首年便宜，续费 3-5 倍价格 + WHOIS 隐私收费
❌ 阿里云国际：续费贵，账号体系割裂
❌ Cloudflare Registrar：成本最低（批发价），但不支持支付宝 + 需要已有 Cloudflare 站点
✅ NameSilo：首年和续费同价、WHOIS 隐私免费、支付宝直接付款

操作步骤

打开 namesilo.com → Sign Up
注册完立刻 My Account → Two-Factor Auth 开启 2FA
首页搜 yourcompany.com（建议 .com < 15 字符，不要连字符/数字）
Available 就加购物车 → Checkout

🚨 购物车必须改的 5 个配置

配置项	改成什么	为什么
Privacy	WHOIS Privacy (免费)	不然邮箱电话会被爬到 WHOIS，天天骚扰电话
Auto-Renew	No	手动续费更安全，到期前邮件提醒够用
Domain Defender	No	免费账号已含 Domain Lock，这是多余付费
NameServers	保持默认	下一步换到 Cloudflare 再改
Promo Code	有就用	中文社区常有 $1 减免码

Checkout 选 Alipay / UnionPay，扫码付款 ¥80 左右搞定。

验证拿到域名

进 Domain Manager 确认 4 项：Active 状态 / Locked=Yes / Privacy=Enabled / 到期日期是明年今天。

🛡 第 2 步：Cloudflare 接管 DNS（15 分钟）

为什么用 Cloudflare 而不是 NameSilo 自带 DNS：

Cloudflare 200+ 边缘节点，响应快 3-10 倍
免费 WAF + Bot 防护 + Rate Limit
免费 Universal SSL 证书（和 Vercel 证书叠加）
可选橙云代理 = DDoS 防护 + CDN 缓存

操作步骤

注册 dash.cloudflare.com → 开 2FA
右上角 Add a Site → 输入 yourcompany.com（不带 www，不带 https）
选 Free 套餐（卡片在页面最下方白色背景，别误点 Pro）
Cloudflare 显示 2 条 NS，类似 amy.ns.cloudflare.com，复制到记事本

回 NameSilo 改 Nameservers

NameSilo → Domain Manager → 勾选域名
顶部找 "三根蓝色垂直柱" 图标（Change Nameservers）
删除默认的 ns1.dnsowl.com / ns2 / ns3
填入 Cloudflare 给的 2 条 NS → Submit

验证 NS 生效（通常 5-30 分钟）

# Mac / Linux

dig NS yourcompany.com +short

# Windows

nslookup -type=ns yourcompany.com

# 预期输出（返回 Cloudflare 的 NS 就算生效）

# amy.ns.cloudflare.com.

# tom.ns.cloudflare.com.

返回 Cloudflare 点 Check Nameservers → 状态变 Active。

🚨 SSL 模式必须选 Full (Strict)

这是 90% 的人翻车的地方。Cloudflare → SSL/TLS → Overview：

模式	能用吗	结果
Off	❌	HTTP 裸奔，不安全
Flexible	❌❌❌	和 Vercel 配合会无限重定向 (TOO_MANY_REDIRECTS)
Full	⚠️ 可用	证书不校验，有中间人风险
Full (Strict)	✅ 推荐	端到端 HTTPS + 证书校验

其他必开的 5 个开关

SSL/TLS → Edge Certificates → Always Use HTTPS：ON
Automatic HTTPS Rewrites：ON（自动修复混合内容）
Speed → Brotli：ON（压缩提速）
Speed → Auto Minify：JS/CSS/HTML 全勾
Security → Bot Fight Mode：ON（免费反爬）

⚠️ HSTS 暂时别开：一旦开启 6 个月内无法回退，等站稳定一个月再开。

📦 第 3 步：GitHub 选模板 + Fork（15 分钟）

不要自己从 0 写。从开源模板 Fork，改文案、改主题色、改 Logo 就完事了。选模板看 4 个指标：

License 必须是 MIT / Apache-2.0 / BSD（见到 Creative Commons NC 跳过）
Star ≥ 1000 + 近一年有 commit
你熟悉的技术栈（只会 React 选 Next.js，不懂代码选 Astro）
移动端响应式 + 无障碍 (a11y)

2026 年仍在活跃维护的推荐模板

模板	技术栈	适用场景	仓库
AstroWind	Astro 5 + Tailwind	通用官网/博客/SaaS（首选）	onwidget/astrowind
Astro Landing Page	Astro + Preline	产品落地页	ACruzDiaz/astro_landing_page
Next.js Commerce	Next.js 15	电商官网	vercel/commerce
Starter Blog	Next.js + MDX	技术博客	timlrx/tailwind-nextjs-starter-blog
Nextra	Next.js + MDX	文档站	shuding/nextra

首次建议 AstroWind：构建最快、SEO 默认优、上手门槛最低。进阶上 Next.js。

操作步骤

# 1. 去 github.com 注册 + 开 2FA

# 2. 配 SSH Key

ssh-keygen -t ed25519 -C "your-email@example.com"

cat ~/.ssh/id_ed25519.pub

# 把输出粘到 GitHub → Settings → SSH and GPG keys

# 3. 在模板仓库点 "Use this template" 按钮（不要 Fork）

# Use template 创建的仓库更干净，适合长期演化

# 4. Clone 本地验证

git clone git@github.com:YOUR_USERNAME/YOUR_REPO.git

cd YOUR_REPO

npm install

npm run dev

# 打开 http://localhost:4321 能看到页面 = OK

改哪些文件最先见效

src/config.yaml 或 src/data/config.ts：站点名、描述、URL
src/content/pages/ 或 src/pages/：页面内容（Markdown）
src/assets/ 或 public/：Logo、图片
tailwind.config.mjs：主题色

🚀 第 4 步：Vercel 一键部署（5 分钟）

打开 vercel.com → Continue with GitHub（授权）
右上角 Add New → Project
找到刚才的仓库 → Import
Framework 会自动识别，直接 Deploy（别改配置）
等 1-2 分钟，看到烟花动画 = 成功
拿到 xxx.vercel.app 的临时地址

⚠️ Hobby 计划的商用条款

Vercel Hobby 技术上禁止商用。个人作品集、展示站、非营收官网目前执行较宽松。一旦开始收费/收款，请立刻升级 Pro ($20/月)，否则可能封号。

首次部署必查的 5 项

浏览器访问临时链接，页面正常
地址栏显示🔒（Let's Encrypt 自动签发）
Chrome DevTools 切换移动端，所有按钮能点
Lighthouse 跑一次，LCP < 2.5s
Console 没红色报错

🔗 第 5 步：绑定自定义域名（最容易翻车的一步）

5.1 在 Vercel 添加域名

Vercel 项目 → Settings → Domains
输入 yourcompany.com（根域）→ Add
同时添加 www.yourcompany.com，勾 Redirect www to apex
Vercel 会提示需要配的 DNS 记录

5.2 在 Cloudflare 加 DNS 记录

apex 域名的坑：DNS 规范禁止 apex（根域）用 CNAME。解法两种：

✅ 方案 A：标准 A 记录（兼容性最好）

记录	类型	名称	值	Proxy
apex	A	@	76.76.21.21	DNS only (灰云)
www	CNAME	www	cname.vercel-dns.com	DNS only (灰云)

🎯 方案 B：Cloudflare CNAME Flattening（推荐）

记录	类型	名称	值	Proxy
apex	CNAME	@	cname.vercel-dns.com	DNS only (灰云)
www	CNAME	www	cname.vercel-dns.com	DNS only (灰云)

推荐方案 B：Vercel 以后要换 IP，你什么都不用改。Cloudflare 自动处理 apex CNAME。

5.3 先灰云跑通，再切橙云

Cloudflare DNS 记录的橙色云/灰色云决定请求是否走 Cloudflare 边缘。首次建站一定先用灰云（DNS Only），不然证书签不下来。

第一步：灰云走通

1. Cloudflare DNS 两条记录都保持 DNS Only（灰云）

2. 等 1-5 分钟，Vercel Domains 变绿色 Valid Configuration

3. 浏览器访问 https://yourcompany.com → 能正常显示 → 成功

第二步（可选）：切橙云开启边缘能力

1. 确认 Cloudflare SSL/TLS 是 Full (Strict)

2. 把两条 DNS 记录的 Proxy status 切 Proxied（橙云）

3. 等 2 分钟，用 curl -I 验证（见下）

5.4 验证命令合集

# 1. NS 是否指向 Cloudflare

dig NS yourcompany.com +short

# 2. 域名解析到哪里

dig yourcompany.com +short

dig www.yourcompany.com +short

# 3. HTTP 层验证（橙云下应看到 server: cloudflare）

curl -I https://yourcompany.com

# 4. 证书链验证

openssl s_client -connect yourcompany.com:443 \

-servername yourcompany.com < /dev/null 2>/dev/null \

| openssl x509 -noout -issuer -dates

🔄 第 6 步：持续交付工作流

域名绑定完，以后所有更新就是 git push。Vercel 约 60 秒内自动发布到全球边缘。

分支策略

分支	用途	Vercel 行为
main	生产环境	推送后自动部署到 yourcompany.com
staging	预发布	自动生成 staging-xxx.vercel.app
feature/*	功能分支	每个 PR 自动生成 Preview 链接

常用命令

# 开发新功能

git checkout -b feature/update-hero

# ... 修改文件 ...

git add .

git commit -m "feat: update hero"

git push origin feature/update-hero

# 在 GitHub 提 PR → Vercel 自动贴 Preview 链接

# 合并到 main

git checkout main && git pull

git merge feature/update-hero

git push origin main

# 约 60 秒后 yourcompany.com 自动更新

出 bug 了怎么回滚

Vercel 面板 → Deployments → 找上一个正常版本 → Promote to Production。10 秒内生效，不用 git revert。

🇨🇳 国内访问优化（重要）

Vercel 默认回源走新加坡/美西，中国访客绕远路，首屏可能 3+ 秒。优化方向：

方案 1（推荐）：Cloudflare 切橙云，用 CF 的香港/台北节点做前置。国内大部分地区能快到 200-500ms
方案 2（高阶）：主站留 Vercel，核心静态资源（图片/视频）额外推到腾讯云 EdgeOne / 阿里云 DCDN
方案 3（极端）：做两套站 —— 海外用 Vercel，国内用 EdgeOne Pages / 腾讯云 CloudBase，DNS 按访客来源分流

关于 ICP 备案

NameSilo 注册的域名 + Cloudflare/Vercel 无法做工信部备案，因为服务器必须在中国大陆。

现实选择：

1. 不备案：海外用户为主，国内 80%+ 地区能访问但做不了公安强实名业务

2. 双站并行：另外注册 .cn 域名 + 腾讯云/阿里云国内服务器 + 做备案，作为国内专属入口

🔒 安全加固（上线后一定做）

Cloudflare 侧

配置	路径	值
WAF	Security → WAF → Managed Rules	开启 Free Ruleset
防爬	Security → Bots → Bot Fight Mode	ON
限频	Security → WAF → Rate limiting rules	登录/表单路径 30 req/min
最低 TLS	SSL/TLS → Edge Certs → Minimum TLS	TLS 1.2
HSTS	SSL/TLS → Edge Certs → HSTS	稳定 1 个月后再开，max-age 初设 1 周

Vercel 侧

Vercel Firewall：免费层已开基础规则
Speed Insights：Analytics → Speed Insights，每月 10k 事件免费
Web Analytics：无 Cookie，GDPR 友好

源码加安全响应头

// Next.js: next.config.js

const securityHeaders = [

{ key: 'X-Content-Type-Options', value: 'nosniff' },

{ key: 'X-Frame-Options', value: 'SAMEORIGIN' },

{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },

{ key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },

]

module.exports = {

async headers() {

return [{ source: '/(.*)', headers: securityHeaders }]

},

}

⚡ 性能达标基线

指标	目标值	工具
LCP（最大内容绘制）	≤ 2.5s	Lighthouse / PageSpeed
INP（交互延迟）	≤ 200ms	Chrome UX Report
CLS（累积布局偏移）	≤ 0.1	Lighthouse
TTFB（首字节时间）	≤ 600ms	WebPageTest

不达标就检查：图片是否用 AVIF/WebP、字体是否 preload、有没有未用的 JS 没摇掉。

🚨 7 个最常见故障排查

Q1: 访问站点 ERR_TOO_MANY_REDIRECTS

Cloudflare SSL 模式是 Flexible。改成 Full (Strict)，清浏览器缓存即可。

Q2: Cloudflare 返回 525 / 526

525：SSL 握手失败。先把 SSL 从 Full Strict 改 Full，能访问再切回 Strict
526：证书不受信任。Vercel 侧确认域名状态 Valid，证书已签发
都不行 = 临时切灰云 (DNS Only)，让请求直接到 Vercel

Q3: Vercel 一直 "Failed to Generate Cert"

Cloudflare 橙云代理拦截了 Let's Encrypt 验证请求。临时切灰云，等 Vercel 签发成功（2-5 分钟），再切回橙云。

Q4: www 能访问，根域打不开

只配了 www 的 CNAME，忘了 apex。按 5.2 补上 apex 记录（推荐 CNAME Flattening）。

Q5: NS 24 小时还没生效

dig NS yourcompany.com +short

返回 Cloudflare NS → 生效了，回 Cloudflare 点 Check
返回 NameSilo 默认值 → NameSilo 没保存成功，重做
返回第三方 NS → 之前在别家配过 DNS，那边去注销

Q6: 提交代码 Vercel 没部署

Vercel → Settings → Git：仓库和分支对不对
GitHub 仓库 → Settings → Webhooks：Vercel 的 webhook delivery 有没有 200
Vercel Deployments：是否有 failed 记录

Q7: 国内访问慢到 3+ 秒

见上文"国内访问优化"章节，首选切橙云用 Cloudflare 香港节点。

💰 升级路径（什么时候付钱）

触发条件	升级到	月费
站点开始产生营收	Vercel Pro	$20
需要 2+ 人协作	Vercel Pro	包含
月带宽 > 100 GB	Vercel Pro	含 1 TB
需要 WAF 高级规则	Cloudflare Pro	$25
需要 ICP 备案	腾讯云/阿里云国内版	¥几千/年

绝大多数个人站 / 小公司官网，前 12 个月只需要 ¥85。

📝 如果非技术同事也要改文案（Headless CMS）

CMS	特点	价格
Sanity	最成熟，实时协作	免费层够中小企业
Notion	用 Notion 当后台（配 notion-to-md）	免费/$10
Strapi	开源自托管	自托管免费
Contentful	企业级，生态广	免费层有限

原理：构建时通过 Webhook 拉内容 → 生成静态页 → 部署。运行时仍然零后端。

✅ 上线前 Checklist

□ 域名已开启 WHOIS Privacy、Domain Lock、2FA

□ NS 已切到 Cloudflare 并验证生效（dig）

□ Cloudflare SSL 是 Full (Strict)

□ Always Use HTTPS、Brotli、Bot Fight Mode 都开

□ GitHub 仓库创建，2FA 启用

□ Vercel 部署成功，临时链接可访问

□ 自定义域名显示 Valid Configuration

□ apex + www 都能 HTTPS 访问

□ Lighthouse ≥ 90 分

□ 部署通知接入团队群（Slack / 飞书 / 钉钉）

□ main 分支加保护规则（要 PR review）

□ 4 个账号的恢复码都备份

🎯 这套方案的真正价值

省钱只是表象。更深的 3 点：

能力主权：你的站不被任何一家建站公司锁死。换平台 = 改两条 DNS
可观测性：每次变更有 Git 记录、Preview 链接、一键回滚
复利效应：第二个、第三个站 20 分钟就能起

一人公司时代的核心杠杆不是某个工具，是把复杂交付链路压成几条可执行的命令。你不用再和建站公司扯皮"周期能不能缩两周"，一条 git push，然后去做真正重要的事：把你的产品、公司、故事写进这个网站里。

📚 延伸阅读

新站24小时被 Google/Bing/百度全收录 — 下一步让搜索引擎找到你
AI 工具导航 — 建站过程中用到的 AI 工具精选
AstroWind 模板仓库 — 本文首推的 Astro 建站模板

💬 建站过程中卡住找我

这套方案我给自己做的 onepersoncompany.one 就是这么起的，全程 40 分钟，年成本 ¥85。如果你做到哪一步卡住，加我微信 LIR--3point14 直接聊。比请建站公司便宜 100 倍。

Launch Your Personal / Company Website from Zero (China-Friendly)

📦 最终架构（全图）

⚙ 前置准备（10 分钟）

🌐 第 1 步：NameSilo 注册域名（10 分钟，¥80 左右）

操作步骤

🚨 购物车必须改的 5 个配置

验证拿到域名

🛡 第 2 步：Cloudflare 接管 DNS（15 分钟）

操作步骤

回 NameSilo 改 Nameservers

验证 NS 生效（通常 5-30 分钟）

🚨 SSL 模式必须选 Full (Strict)

其他必开的 5 个开关

📦 第 3 步：GitHub 选模板 + Fork（15 分钟）

2026 年仍在活跃维护的推荐模板

操作步骤

改哪些文件最先见效

🚀 第 4 步：Vercel 一键部署（5 分钟）

首次部署必查的 5 项

🔗 第 5 步：绑定自定义域名（最容易翻车的一步）

5.1 在 Vercel 添加域名

5.2 在 Cloudflare 加 DNS 记录

✅ 方案 A：标准 A 记录（兼容性最好）

🎯 方案 B：Cloudflare CNAME Flattening（推荐）

5.3 先灰云跑通，再切橙云

5.4 验证命令合集

🔄 第 6 步：持续交付工作流

分支策略

常用命令

出 bug 了怎么回滚

🇨🇳 国内访问优化（重要）

🔒 安全加固（上线后一定做）

Cloudflare 侧

Vercel 侧

源码加安全响应头

⚡ 性能达标基线

🚨 7 个最常见故障排查

Q1: 访问站点 ERR_TOO_MANY_REDIRECTS

Q2: Cloudflare 返回 525 / 526

Q3: Vercel 一直 "Failed to Generate Cert"

Q4: www 能访问，根域打不开

Q5: NS 24 小时还没生效

Q6: 提交代码 Vercel 没部署

Q7: 国内访问慢到 3+ 秒

💰 升级路径（什么时候付钱）

📝 如果非技术同事也要改文案（Headless CMS）

✅ 上线前 Checklist

🎯 这套方案的真正价值

📚 延伸阅读