上站SOP

# 上站SOP ## 一、开发工具 ### 1. 代码模版 https://github.com/nextjs/saas-starter ### 2. 图片转换图片尺寸调整：https://www.67tool.com/images/zoom Png转SVG：https://www.freeconvert.com/zh/png-to-svg Png转ICO：https://pngtoicon.com/ ### 3. 代码部署选择 \*\*Cloudflare + Vercel\*\* Cloudflare：永久免费；流量无限制；包含SSL证书、CDN、基础DDoS防护； Vercel：永久免费；100GB带宽/月、100GB-hours函数执行时间；自动CI/CD、全球CDN、DDoS防护； \*\*不同场景成本分析表\*\* \| 场景类型 \| 纯Vercel方案 \| Cloudflare组合方案 \| 节省金额/月 \| 节省比例 \| 关键优化点 \| \| :------: \| :-----------: \| :----------------: \| :---------: \| :------: \| :----------------: \| \| 个人博客 \| $0 (功能受限) \| $0 (功能增强) \| $0 \| 0% \| 免费资源最大化利用 \| \| 导航站 \| $20-50 \| $5-15 \| $15-35 \| 50-70% \| API聚合+缓存优化 \| \| 页游网站 \| $50-200 \| $30-80 \| $20-120 \| 40-60% \| 静态资源分离 \| \| SaaS服务 \| $100-300 \| $50-150 \| $50-150 \| 50-60% \| 边缘计算+存储优化 \| \| 数据平台 \| $80-250 \| $40-120 \| $40-130 \| 50-65% \| 缓存策略+计算优化 \| \| API服务 \| $50-150 \| $20-60 \| $30-90 \| 60-70% \| 全面Workers化 \| \*\*优化方案：\*\* 1. \*\*博客主体\*\*：继续用Vercel Hobby免费托管 2. \*\*图片资源\*\*：全部迁移到Cloudflare R2 3. \*\*CDN加速\*\*：启用Cloudflare免费CDN 4. \*\*图片优化\*\*：用Workers自动压缩和格式转换 5. \*\*评论系统\*\*：用Workers + D1搭建轻量级评论API ## 二、技术栈推荐 - 前端框架：Next.js、Nuxt.js、SvelteKit - API聚合：Hono框架、itty-router - 数据缓存：Workers KV、localforage - UI组件：Tailwind CSS、Ant Design、Shadcn/ui ## 三、开源项目参考 - Hexo主题：NexT、Butterfly、Fluid - Astro主题：AstroPaper、Astro Blog - Hugo主题：PaperMod、DoIt、LoveIt ## 四、项目部署 \> 流程总结：\*\*GitHub → Vercel 自动部署\*\*→\*\*Cloudflare 托管域名 + DNS + CDN + HTTPS\*\* ### 1. Cloudflare 托管域名 #### 把域名添加到 Cloudflare 1. 登录 https://dash.cloudflare.com 2. \*\*Add a site\*\* 3. 输入你的域名（例如：\`playbox.games\`） 4. 选择 \*\*Free Plan（完全够用）\*\* Cloudflare 会自动扫描你当前的 DNS 记录。 ------ #### 修改域名 NS（非常关键） Cloudflare 会给你 \*\*2 个 Nameserver\*\*，类似： \`\`\` alice.ns.cloudflare.com bob.ns.cloudflare.com \`\`\` 到你的 \*\*域名注册商\*\*（阿里云 / Namecheap / GoDaddy 等）： - 找到 \*\*Nameserver / DNS\*\* - 删除原有 NS - 换成 Cloudflare 提供的两个 ⏱ 生效时间：几分钟 \~ 24 小时（通常 5--10 分钟） ------ ### 3. vercel部署 1. 登录 Vercel 控制台 2. 创建新项目，选择Github项目，一键部署 ### 4. Vercel 绑定自定义域名 \*\*打开你的 Vercel 项目\*\* - Dashboard → Project → \*\*Settings → Domains\*\* - Add Domain：输入你的域名\`example.com\`，会默认307到\`www.example.com\` Vercel 会显示： - Valid Configuration 或提示你去改 DNS !\[image-20260202233100402\](https://wx-project-1312639322.cos.ap-guangzhou.myqcloud.com/wx/image-20260202233100402.png) ------ \*\*设置主域（默认）\*\* 在 Domains 页面： - 把 \*\*裸域名 example.com\*\* 设为 \*\*Primary\*\* - \`www\` 自动 301 跳转对 SEO 非常重要 👍 ### 5. Cloudflare DNS 正确指向 Vercel Cloudflare 生效后，进入： \> Cloudflare → Your Domain → \*\*DNS\*\* #### 添加 DNS 记录（可直接按照vercel的指引操作） #### ✅ 主域名 \`\`\` Type: A Name: @ Target: 76.76.21.21 // Vercel的IP地址 Proxy: DNS only（灰云） \`\`\` #### ✅ www 子域名 \`\`\` Type: CNAME Name: www Target: cname.vercel-dns.com // 注意：这里使用vercel提供的域名 Proxy: DNS only（灰云） \`\`\` \> 说明： \> \> - \*\*不要填 Vercel 项目域名\*\*，统一用 \`cname.vercel-dns.com\`（官方推荐） ------ ### 5. Cloudflare 推荐配置（必开） #### 🔐 SSL / HTTPS Cloudflare → \*\*SSL/TLS\*\* - Encryption mode：\*\*Full\*\* - Automatic HTTPS Rewrites：ON - Always Use HTTPS：ON ⚠️ 不要选 Flexible（坑） ------ #### 🚀 Speed（免费加速） Cloudflare → \*\*Speed\*\* - Brotli：ON - Auto Minify：HTML / CSS / JS 全勾 - HTTP/3：ON ------ #### 🛡 Security（防爬虫 / 防攻击） Cloudflare → \*\*Security → Bots\*\* - Bot Fight Mode：ON（免费） - Challenge Threats：ON 小游戏站很容易被爬，建议开。 ## 五、新站 GSC 配置 1. 打开 👉 https://search.google.com/search-console 2. 点击「Add Property」 3. 选择 \*\*Domain\*\*，输入：（不太推荐选择URL Prefix） \`\`\` exampledomain.com \`\`\` 4. 按提示在 \*\*Cloudflare DNS\*\* 添加一条 TXT 记录 5. 点击 Verify ✔ 一次性覆盖：http / https，www / non-www，所有子域 6. 提交 Sitemap 路径一般是：(域名加/sitemap.xml后缀) \`\`\` https://exampledomain.com/sitemap.xml \`\`\` 没有的话，\*\*尽快生成\*\*（非常重要） ------ 7. Bing收录一样的方式，在 https://www.bing.com/webmaster/ 的网站地图中提交你的网站 ------ 9. 观察 Coverage \& Pages 前 1--2 周重点看： - Crawled -- currently not indexed - Discovered -- currently not indexed 这是新站的\*\*正常阶段，不用慌\*\*。到此上站阶段就完成了。 ## 六、接入GA \> Google Analytics: https://analytics.google.com/analytics/web/ \> \> Baidu Tongji: https://tongji.baidu.com/ \> \> Plausible: https://plausible.io/ 以GA为例，打开 \[Google Analytics\](https://analytics.google.com/)，用 Google 账号登录。点击左侧 \*\*管理（Admin）\*\* → \*\*创建账号（Create Account）\*\*，填写账号名称（如你的网站名）。下一步创建\*\*媒体资源（Property）\*\*： - 填写资源名称（如 \`baldi.games\`） - 选择时区、货币 - 选择业务目标（如「生成潜在客户」「提高品牌知名度」）选择平台：\*\*网站（Web）\*\*，填写你的网站完整 URL（如 \`https://baldi.games\`）。完成创建后，你会得到一个 \*\*测量 ID（Measurement ID）\*\*，格式为 \`G-XXXXXXXXXX\`（这是核心凭证）。按照提示把相关代码文件\`gtag.js\`接入项目： \`\`\`typescript \`\`\` ## 七、注意事项 \* Chrome图标优先读：\`32x32 PNG\`