大家好呀 👋
今天想和大家分享一下，我是如何从 0 到 1，架设属于自己的部落格网站。
一直以来，我都很想要一个完全掌控的空间。
不是开在第三方平台，而是一个从前端、后端、数据库，到部署与 SEO，都由自己设计、维护的地方。
它不只是写文章的地方，更像是一块属于自己的数位小天地 🏠
那这篇就来好好记录一下，我目前这套部落格架构，以及背后的思路。
🧱 整体架构概览
先简单讲一下我的技术选型：
-
前端（Front-end）：Angular + ng-zorro + Tailwind CSS
-
后端（Back-end）：Cloudflare Workers + Typescript
-
数据库：Cloudflare D1 (SQL)
-
对象存储：Cloudflare R2
-
部署平台：Cloudflare Pages + Cloudflare Workers
-
代码托管：GitHub
-
SEO：Google Search Console + 自定义 Cloudflare Domain + Sitemap 自动更新
整体走的是一个「All-in Cloudflare」的方向 ☁️
目标很明确：轻量、快速、可扩展、成本可控（根据需求）。
🎨 前端：Angular + ng-zorro + Tailwind CSS
前端我选择的是 Angular。
老实说，它不是现在最“潮”的选择，但对我来说，它的结构清晰、架构严谨，非常适合长期维护的项目。尤其是当网站功能慢慢变复杂时，这种框架化的好处就会非常明显。
还有一个很现实的原因 ——
我本身工作上也是使用 Angular 开发。
所以在架设自己的部落格时，其实是一种“学以致用”的过程。
平常在公司专案中累积的经验，可以直接应用到自己的系统设计；而在个人项目中尝试的新做法，也能反过来提升我在工作上的思考方式。
这种双向成长的感觉，其实蛮不错的。
UI 组件我搭配的是 ng-zorro，整体设计风格偏向简洁、现代，而且组件完成度很高。
再加上 Tailwind CSS 来做细节调整与客制化排版 —— 这种组合真的很舒服。
我自己的使用心得是：
- ng-zorro 负责“骨架”
- Tailwind 负责“气质”
- Angular 负责“秩序”
写起来有一种很稳定的感觉 😁
☁️ 部署策略：Cloudflare Pages + Workers
前端部署在 Cloudflare Pages。
只要 push 到 GitHub，Pages 就会自动帮我 build + deploy。
整个流程几乎是全自动，开发体验非常顺畅。
后端则使用 Cloudflare Workers。
Workers 对我来说最大的吸引力是：
-
Edge 部署（全球节点）
-
启动速度极快
-
不需要管理服务器
写 API 的感觉很轻量，但性能却很不错。
对于部落格这种内容型网站来说，完全够用。
🗄️ 数据库：Cloudflare D1
数据库我选择的是 Cloudflare D1（SQL）。
它是基于 SQLite 的 serverless 数据库，跟 Workers 整合得非常自然。
我主要用来存储：
-
文章内容
-
分类标签
-
基本统计数据
对个人网站来说，这种规模真的已经很充足。
而且 SQL 对我来说很熟悉，查询逻辑清晰，比起 NoSQL 更直觉一点。
📦 存储：Cloudflare R2 Object Storage
图片与资源文件我放在 Cloudflare R2。
选择它的原因很简单：
-
和 Workers 整合方便
-
不收 egress 费用（这一点真的很关键）
-
成本可控
上传图片后，直接通过 Workers 生成存取 URL，前端就可以无缝读取。
以前用传统主机时，总会担心带宽或储存费用，现在基本上轻松很多。
🐙 代码管理：GitHub
整个项目都存放在 GitHub。
除了版本控制以外，它也承担了：
-
自动部署触发
-
协作记录
-
Issue 管理
-
项目演进历史
每次回头看 commit 记录，都会有一种“这真的是自己慢慢堆出来的东西”的感觉。
🔍 SEO：Google Search Console + 自定义 Domain
网站要被看到，SEO 还是很重要的。
我使用了 Google Search Console 来提交网站索引。
前提是你需要自己的 domain ——
我是使用 Cloudflare 注册与管理 domain。
然后重点来了：
我还做了 sitemap 自动更新。
我利用 Cloudflare Cron Trigger 定期触发 Workers，自动重新生成 sitemap。
只要有新文章发布，系统就会自动更新 sitemap，
再由 Google 重新抓取。
整个流程自动化之后，真的很安心。
🤖 AI 工具：我的开发小帮手
这次架设网站，其实 AI 工具帮了我不少忙。
🎨 Google AI Studio
我用 Google AI Studio 来根据我的需求生成 UI mockup。
例如：
“帮我设计一个简洁、深色系、适合技术部落格的首页布局。”
它会给我一个视觉方向，我再根据那个结构去调整成 Angular 组件。
对我来说，它更像是一个“视觉灵感助理”。
🧠 Claude AI
在写复杂逻辑或重构代码时，Claude AI 帮了我很多。
特别是在：
-
API 结构设计
-
重构服务层
-
优化 TypeScript 类型定义
有时候卡住半小时的问题，它可以帮我换一个思路。
当然，我不会直接复制贴上，而是理解后再调整。
这样学到的东西才是自己的。
💻 GitHub Copilot
在 VS Code 开发时，GitHub Copilot 就像一个默默陪伴的搭档。
-
自动补全
-
帮忙生成重复性代码
-
提示可能的写法
它不会完全取代思考，但能让我专注在架构与设计上，而不是一直打样板代码。
✨ 架设完成后的感想
当网站正式上线的那一刻，其实有点感动。
不是因为它有多复杂，
而是因为从前端 UI、后端 API、数据库设计，到部署与 SEO ——
每一个环节，都是自己一步一步搭建起来的。
现在每次坐下来写文章，都有一种很踏实的感觉：
-
这个空间是属于自己的
-
所有技术决策都能掌控
-
想改什么，随时可以优化
它不只是一个部落格。
更像是一个持续成长的个人作品集，也是我技术旅程的一部分 🥰
如果你也在考虑架设自己的部落格，我真的很推荐试试看。
不一定要用跟我一样的技术栈，
但当你拥有一个完全属于自己的数位空间时，那种成就感，真的会很不一样。
