[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fbnja6bQZOfxTq91Ahf3ncCIyQkTNTKyYp7TUVKNuW4Q":3},{"item":4,"related":39},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":31,"sourceName":31,"sourceUrl":31,"status":32,"seoTitle":31,"seoDescription":31,"canonicalUrl":31,"isFeatured":33,"sno":34,"sortOrder":35,"publishedAt":36,"updatedAt":37,"createdAt":38},"9d05543d-fd56-45ac-932c-c8f7afab5e5e","article","用一杯奶茶钱搭建网站","build-your-own-website","现如今，即使没有专业开发经验，也可以用极低成本建立一个真正属于自己的网站","过去，建设一个网站通常需要掌握编程、购买服务器、配置数据库，还要处理域名解析和网站部署。如今，借助AI、GitLab和Cloudflare，即使没有专业开发经验，也可以用极低成本建立一个真正属于自己的网站。\n\n整套方案的固定支出只有域名费用：在宝塔官网购买一个价格较低的`.cn`域名，代码托管、网站部署、HTTPS证书和基础访问加速都可以使用免费服务完成。\n\n如果你不介意，甚至可以使用免费域名，真正实现零成本搭建。\n\n在开始前，请确保已开通 [宝塔](https:\u002F\u002Fwww.bt.cn\u002Flogin.html?ReturnUrl=https:\u002F\u002Fwww.bt.cn\u002Fadmin\u002Fprofe_ee)、[GitLab](https:\u002F\u002Fgitlab.com\u002F)、[Cloudflare](https:\u002F\u002Fdash.cloudflare.com\u002F) 账号。\n\n## 第一步：购买域名\n\n域名是网站在互联网上的地址，例如`srces.cn`。\n\n有了自己的域名，就等于在浩大的互联网世界中拥有了一席之地，任何人都可以通过`https:\u002F\u002F你的域名`来访问你的内容。\n\n域名结构如下，以`www.example.com`为例：\n\n```mermaid\nflowchart LR\n    TLD[\"顶级域名 TLD\u003Cbr\u002F> .com \u002F .org \u002F .net 等\"]\n    TLD --> Domain[\"主域名（二级域名）\u003Cbr\u002F> example\"]\n    Domain --> Sub1[\"子域名（三级域名）\u003Cbr\u002F> www\"]\n    Domain --> Sub2[\"子域名\u003Cbr\u002F> mail\"]\n    Domain --> Sub3[\"子域名\u003Cbr\u002F> blog\"]\n```\n\n在域名注册实践中，宝塔的域名注册服务性价比较高（无赞助），首年与续费价格低于腾讯云、阿里云等平台。\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002Fd868db20-3768-4546-b6c3-ad41bb76b4c8.jpg\" alt=\"d2d81f4a-4fa0-4df9-96c3-c7091bf653ca\">\n\nhttps:\u002F\u002Fwww.bt.cn\u002Fnew\u002Fdomain-register.html\n\n顶级域名首选`.cn`，首年价格较低，适合面向国内的个人主页、博客、作品集和产品网站。\n\n购买前应注意检查续费价格，并完成域名实名认证。若网站部署在Cloudflare等境外基础设施上，通常不需要购买国内服务器；但访问稳定性、备案要求和具体业务合规性仍应根据实际情况判断。\n\n如果暂时不想购买域名，可以前往[DigitalPlat Domains](https:\u002F\u002Fdomain.digitalplat.org\u002F\n)等平台注册免费域名。\n\n> 托管在境外服务器（例如使用Cloudflare）且无收费功能的网站无需备案。\n\n## 第二步：使用IDE和AI编写网站\n\n购买域名后，可以在VS Code、Cursor、Trae、Windsurf等IDE中创建项目，并使用AI辅助编程。\n\n只需向AI描述网站需求，例如：\n\n```\n设计一个极简的个人知识分享网站，包含首页、文章列表、文章详情和关于页面，支持手机端访问。\n```\n\nAI可以帮助生成页面、组件、样式和配置文件，也可以分析报错、修改代码和优化设计。对于简单网站，可以直接使用HTML、CSS和JavaScript；需要更完整的页面管理和路由能力时，可以选择Nuxt、Astro或Next.js。\n\n可参考：\n\nhttps:\u002F\u002Ffoundit.cn\u002Farticle\u002Fvibe-coding-intro\n\nhttps:\u002F\u002Ffoundit.cn\u002Farticle\u002Fvibe-coding-reminds\n\nAI降低了编程门槛，但不能完全替代检查。至少应理解项目如何启动、如何构建，以及环境变量和密钥应该放在哪里。\n\n## 第三步：将代码上传到GitLab\n\n网站完成后，在GitLab创建一个代码仓库，并把本地代码上传。\n\n> 为什么不用GitHub？因为代码提交后的推送效率低，国内使用体验较差。\n\nGitLab相当于网站代码的云端保险箱。它可以保存每一次修改记录，当AI误删代码或新版本出现问题时，可以快速恢复到之前的状态。\n\n日常开发流程非常简单：\n\n1. 在IDE中修改网站；\n2. 将修改提交到GitLab；\n3. Cloudflare检测到更新；\n4. 自动重新构建并发布网站。\n\n通过这种方式，不需要手动上传压缩包，也不需要登录服务器替换文件。\n\n## 第四步：使用Cloudflare关联GitLab\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002F0db0b6a7-45ce-4cbb-acae-964a1d22f0ac.jpg\" alt=\"bb9cc6e9-d6dd-4894-8253-d10c1baa6f6c\">\n\n在Cloudflare中创建Pages或Workers项目，授权访问GitLab，并选择对应的网站仓库。\n\n随后配置项目的构建命令和输出目录。例如，Nuxt项目通常需要执行构建命令，纯HTML网站则可以直接发布整个目录。\n\nCloudflare会自动完成网站构建、文件托管、全球内容分发和HTTPS证书配置。每次向GitLab提交代码后，Cloudflare都会自动部署新版本。\n\nCloudflare还会为每次提交生成独立预览地址。正式发布前，可以先通过预览页面检查修改结果，确认没有问题后再合并到主分支。\n\n## 第五步：在Cloudflare配置域名\n\n网站成功部署后，需要把宝塔购买的域名接入Cloudflare。\n\n先在Cloudflare添加域名，再按照提示，将域名的DNS服务器修改为Cloudflare提供的地址。修改通常需要在宝塔的域名管理后台完成。\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002F05b0c821-d183-4f8d-b6df-7fac339aee00.jpg\" alt=\"dc09904f-db46-441b-a959-ef999a870086\">\n\nDNS生效后，在Cloudflare项目中绑定自定义域名，例如：\n\n- `example.cn`\n- `www.example.cn`\n\n\u003Cimg src=\"https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002Fbfd33a37-17b6-4e6a-b00d-5ad8d21724a3.jpg\" alt=\"22879676-728a-4855-b8c5-58bc4a863997\">\n\nCloudflare会自动申请和续期HTTPS证书，不需要单独购买SSL证书。\n\n## 需要数据库怎么办？\n\n个人主页、博客、文档站和作品集通常可以直接使用静态文件，不需要数据库。\n\n当网站需要用户注册、文章后台、评论、收藏、文件上传或动态数据时，可以接入Supabase。它提供PostgreSQL数据库、用户认证、对象存储和自动API，免费额度通常足以支持个人项目早期使用。\n\nhttps:\u002F\u002Ffoundit.cn\u002Farticle\u002Fai-supabase\n\n此时整体架构为：\n\n**宝塔购买域名 → IDE和AI开发 → GitLab托管代码 → Cloudflare自动部署 → Supabase提供可选数据服务。**\n\n## 最终成本\n\n对于访问量不高的个人网站，GitLab、Cloudflare和Supabase都可以从免费方案开始使用。因此，整个项目的固定成本通常只有域名注册与续费费用。\n\nAI负责降低开发难度，GitLab负责保存代码，Cloudflare负责部署和访问，Supabase负责可选的后台数据。过去需要服务器和专业运维才能完成的事情，如今个人也能在较短时间内独立完成。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-18\u002Fab2a17f9-ce6a-414f-bbb5-28ea00ca5d94.jpg",[],[],"龙家轩","https:\u002F\u002Fweatheraintbad.com","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",{"id":18,"name":19,"slug":20,"description":21},"d6750616-07d9-4350-8485-1834c77be3d2","指南","guide","指导建议，仅供参考",[23,27],{"id":24,"name":25,"slug":26},"4ab4d31d-2daf-4bd3-9d99-c7210c4943bf","网页制作","web-making",{"id":28,"name":29,"slug":30},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev",null,"published",false,50,0,"2026-07-18T00:00:00.000Z","2026-07-20T10:26:11.523Z","2026-07-18T08:15:04.450Z",[40,50,60],{"id":41,"type":6,"title":42,"slug":43,"summary":44,"coverUrl":45,"authorName":46,"sno":47,"publishedAt":48,"createdAt":49},"9ccde95c-d754-4808-91f7-488f392e3eeb","你的品牌在AI眼里到底存不存在？这套系统说了算","automated-geo-monitoring-system","靠手动抽查来验证GEO效果，本质上是在跟概率玩游戏。赢一次，不代表能一直赢。","\u002Fuploads\u002F2026-08-07\u002Fdf111c0d-f14a-4b2a-8347-141e96b71654.jpg","Foundit",1,"2026-08-07T00:00:00.000Z","2026-08-07T04:31:30.843Z",{"id":51,"type":6,"title":52,"slug":53,"summary":54,"coverUrl":55,"authorName":56,"sno":57,"publishedAt":58,"createdAt":59},"544fc658-c911-4de6-93b0-d2520087119a","MCP：AI 的「USB-C」时刻","mcp-ai-usb-c-moment","以前每个 AI 应用都要为 GitHub、数据库、日历各写一套私有连接器，这是 M×N 的集成噩梦，直到 MCP 的出现","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-19\u002Fc3c06d99-a0ac-40ac-a283-7e77aabb4c4c.jpg","Foundit AI",46,"2026-07-20T00:00:00.000Z","2026-07-19T16:13:40.316Z",{"id":61,"type":6,"title":62,"slug":63,"summary":64,"coverUrl":65,"authorName":46,"sno":66,"publishedAt":67,"createdAt":68},"153fb92b-ccb1-4311-ad7c-d93b36ea2203","WebAssembly Component Model：不同语言写的模块如何拼在一起？","webassembly-component-model-wasi-explained","WebAssembly 不只是一个能运行的二进制文件。Component Model 通过接口、类型和能力权限，让不同语言编写的组件能够组合。本文从 WIT、WASI 0.2 和宿主运行时讲清组件模型的价值、权限边界与适用场景。","\u002Fuploads\u002F2026-09-08\u002Fb44135d7-7561-477f-9edc-c52fd17b99f4.jpg",51,"2026-09-08T00:00:00.000Z","2026-09-08T03:19:21.154Z"]