织梦一夏 
从零开始：我的 Astro 博客全栈建设方案(0)-网站结构
684 字
3 分钟
从零开始：我的 Astro 博客全栈建设方案(0)-网站结构
1.前言
在2026年的今天个人博客好像成为了互联网上的孤岛一般，越来越少人去关注这些东西，虽然10年前它是一个很火的东西。我大概是20年开始第一次制作网站的，虽然那时候采用的是LAMP架构现在也差不多，不过当时的教程都很繁琐，后面也尝试过动态网页wp，静态网页hexo等，不过最后都是因为没有更新的动力和时间导致网站关闭了。如今，由于我手上有域名而且还有一个服务器，所以打算重新制作一个个人博客。
-
记录一些东西，留下一些足迹
-
方便自己搭建这个网站，也方便看我文章的网友们
-
不能让域名和服务器再吃灰了😂
2.网站整体架构
%%{init: {'theme': 'dark', 'themeVariables': { 'background': '#1e1e2e', 'primaryTextColor': '#cdd6f4', 'lineColor': '#89b4fa'}}}%%
flowchart TD
%% 样式定义
classDef default fill:#313244,stroke:#45475a,stroke-width:2px,color:#cdd6f4;
classDef user fill:#cba6f7,stroke:#11111b,stroke-width:2px,color:#11111b;
classDef edge fill:#89b4fa,stroke:#11111b,stroke-width:2px,color:#11111b,rx:10,ry:10;
classDef proxy fill:#f38ba8,stroke:#11111b,stroke-width:2px,color:#11111b;
classDef container fill:#a6e3a1,stroke:#11111b,stroke-width:1px,color:#11111b;
classDef db fill:#f9e2af,stroke:#11111b,stroke-width:1px,color:#11111b;
%% ====================
%% 1. 用户层（强制顶部对齐）
%% ====================
subgraph Top_Layer ["👤 访问与开发端"]
direction LR
Visitor(("👨💻 访客 / 读者"))
LocalDev(("💻 开发者"))
end
style Top_Layer fill:transparent,stroke:none,color:#cdd6f4
%% ====================
%% 2. 自动化部署层
%% ====================
GH["🐙 GitHub Actions / CI-CD"]
style GH fill:#313244,stroke:#89dceb,stroke-width:2px,color:#cdd6f4
%% ====================
%% 3. 边缘分发层
%% ====================
subgraph Edge_Layer ["🌐 腾讯 EdgeOne (边缘加速与防护)"]
direction TB
TEO_Route{"智能路由 / WAF"}
TEO_Blog["Astro 静态博客主站<br/>(sunkme.com)"]
end
style Edge_Layer fill:#181825,stroke:#89b4fa,stroke-width:2px,color:#cdd6f4
%% ====================
%% 4. 源站服务器层
%% ====================
subgraph VPS_Layer ["☁️ 腾讯云VPS 1Panel管理 )"]
direction TB
OR["OpenResty<br/>(反向代理 80/443)"]
subgraph Docker_Env ["🐳Docker容器阵列"]
direction TB
Lsky["Lsky Pro 图床"]
Waline["Waline 评论系统"]
Umami["Umami 统计分析"]
AstroBackup["Astro 静态文件 (源站备份)"]
end
style Docker_Env fill:#1e1e2e,stroke:#a6e3a1,stroke-width:2px,color:#cdd6f4
subgraph DB_Env ["🗄️ 数据库层"]
direction LR
PG[(PostgreSQL)]
SL[(SQLite)]
end
style DB_Env fill:#1e1e2e,stroke:#f9e2af,stroke-width:2px,color:#cdd6f4
end
style VPS_Layer fill:#181825,stroke:#cba6f7,stroke-width:2px,color:#cdd6f4
%% ====================
%% 排版约束 (隐形线，强制从上到下单列排布)
%% ====================
Top_Layer ~~~ GH
GH ~~~ Edge_Layer
Edge_Layer ~~~ VPS_Layer
%% ====================
%% 实际数据流向与连线
%% ====================
Visitor =="1. HTTPS 极速访问"==> TEO_Route
LocalDev --"2. 写文章并 Git Push"--> GH
LocalDev --"3. PicList 上传图片"--> TEO_Route
GH --"自动化部署"--> TEO_Blog
GH --"代码同步"--> AstroBackup
TEO_Route -."静态内容命中".-> TEO_Blog
TEO_Route =="动态 API 回源"==> OR
OR --"代理分发"--> Lsky
OR --"代理分发"--> Waline
OR --"代理分发"--> Umami
OR --"代理分发"--> AstroBackup
Lsky --- PG
Umami --- PG
Waline --- SL
%% ====================
%% 绑定样式
%% ====================
class Visitor,LocalDev user;
class TEO_Route,TEO_Blog edge;
class OR proxy;
class Lsky,Waline,Umami,AstroBackup container;
class PG,SL db;
3. 具体流程
- 由于需要写的内容太多了，而且作者对于文章结构还有待完善，所以我想会以一个基本结构不断的往扩展，所以篇幅很长
- 如果有啥需要改进的方面也可以评论区留言，作者看到会第一时间回复
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
从零开始：我的 Astro 博客全栈建设方案(0)-网站结构
https://sunkme.com/posts/web_deployment_0/ 随机文章 随机推荐
