从Django到Astro：我的博客重构与技术选型全记录

之前的博客还是用python django写的，有一段时间没更新了。最近想着折腾折腾，好好经营下自己的博客。

于是买了新的.com顶级域名yeekal.com, 内容和结构上好好规划了一下。

在开始之前我让ai帮我作了一些项目规划以及技术选型。

初期需求#


我是一个独立开发者，我构建过html5游戏站，ai生图站，prompt网站
我的昵称是yeekal
我想搭建自己的个人网站，域名： yeekal.com

主要分享关于ai（产品，算法，应用， coder cli, mcp, agents），独立开发的过程，网站开发经验，seo技巧（反链，关键词查找），robotics， 自动驾驶技术，运动规划，具身智能，以及平常自己的碎碎念心得体会等，内容以中文为主

## 网站结构

1. 网站以博客文章为主，分几大类别，每一类别的文章url path为 /[cat]/[post]。 

2. 文章以markdown格式写作，md文件头部通过fontmatter定义文章属性，比如 title,cover,seotitle,seodescription... 除此之外之外，为了更好的组织文章，我想在属性值里面加一个`series`属性，series是一个字符串列表，定义该文章属于哪些系列。 比如在seo技巧里面，可能需要很多文章介绍`backlinks`这个概念以及关于它的技巧，为了把这些文章更加集中的组织到一块，而又不改变其分类和url路径，可以通过 `series:[backlinks]`把文章组织到backlinks这一系列里面
3. 网站辅以一些小工具页面，暂时定义放到 `/fun-tools` 路径下，比如 `/fun-tools/slugify` 是根据用户输入生成slug文本的工具。工具页面有可能需要用到后端服务
4. 网站header 左侧为站名'Yeekal', 右侧分别列出几大类别以及`Fun Tools`

## tasks
1. 帮我优化网站结构设计
2. 我想把网站内容分为四大类别，帮我定义四大类别的名称以及slug。 比如我想的其中两个是 “AI”， “Robotics”，还有一部分是“独立开发”（但是名字还没想好）。 类别名称需要短小，有概括性
3. 分析`series`属性的可行性以及方案
4. 有时候会发一些与技术无关的博客，这些该怎么归档，该怎么分类
5. 不需要给出代码。只需要给出设计方案
6. 在技术选型上，是使用nextjs还是Astro，请做深入分析和对比

在ai的建议下，对上述要求作了细化，技术上选择了Astro。Astro在面对这种静态博客上加载速度会更快。

以下是博客方案的说明：

网站内容组织#

网站以博客文章为主，分4大类别，每一类别的文章url path为 /[cat]/[post]。文章会存放在各自的分类文件夹下，根据文件夹自动识别出类别。类别文件夹下放index.md作为类别页面的定义内容。类别分以下类别
- AI (slug: ai)：涵盖AI产品、算法、应用、coder CLI、MCP、agents等技术分享。
- 独立开发 (slug: indie-dev)：独立开发过程、网站开发经验、SEO技巧（反链、关键词查找）等。（“Indie Dev”简洁概括“独立开发”，国际通用，便于搜索。）
- Robotics (slug: robotics)：聚焦机器人、自动驾驶技术、运动规划、具身智能等。
- 笔记 (slug: notes)：平常碎碎念、心得体会，以及非技术相关内容。（这作为兜底类别，保持技术博客的纯净，同时容纳生活感悟。）

类别页面index.md定义关于当前类别的以下属性：

---
title: 探索人工智能前沿技术与应用
cover: /images/backlinks-cover.jpg
description: 
seotitle: 
seodescription: 
---

文章以markdown格式写作，md文件头部通过fontmatter定义文章属性，比如 title,cover,seotitle,seodescription… 除此之外之外，为了更好的组织文章，我想在属性值里面加一个series属性，series是一个字符串列表，定义该文章属于哪些系列。比如在seo技巧里面，可能需要很多文章介绍backlinks这个概念以及关于它的技巧，为了把这些文章更加集中的组织到一块，而又不改变其分类和url路径，可以通过 series:[backlinks]把文章组织到backlinks这一系列里面。 frontmatter 设计

---
title: 如何获取高质量反链
cover: /images/backlinks-cover.jpg
series: ["backlinks", "seo-strategies"]
date: 2023-10-15
tags: ["seo", "backlinks", "digital-marketing"]
is_draft: false
excerpt: 
seotitle: 10个获取高质量反链的有效策略
seodescription: 学习如何通过10种策略获取高质量反链，提升网站SEO效果
author: yeekal
---

网站辅以一些小工具页面，暂时定义放到 /fun-tools 路径下，比如 /fun-tools/slugify 是根据用户输入生成slug文本的工具。工具页面有可能需要用到后端服务
网站header 左侧为站名’Yeekal’, 右侧分别列出几大类别以及Fun Tools

网站结构#

yeekal.com/                     # 主页
├── /[category]/[post]          # 博客文章（主要内容）
├── /series/[series-name]       # 系列文章聚合页
├── /fun-tools/[tool-name]      # 工具页面
├── /archive                    # 文章归档（按时间排序）
├── /about                      # 关于页面
└── /search                     # 搜索页面

首页（/）：作为入口页，展示最新文章列表（按发布时间倒序）、热门系列推荐、类别概览卡片，以及一个简短的个人简介或欢迎语。搜索栏（支持全文搜索文章标题、内容和series）。
博客文章结构（/[cat]/[post]）：
- 左侧同类别的文章列表 / 或者同系列文章推荐。中间文章内容，右侧文章目录
- 中间文章内从上往下：标题，文章cover 大图，属性（时间，作者,字数，阅读时间，view number），文章详情
- 每个文章页底部添加“相关文章”推荐（基于同一类别或series）。
- 支持上一篇/下一篇导航（在同一类别内）。
- 为SEO，自动生成sitemap.xml和robots.txt，并在Frontmatter中强制定义title、description、keywords。
类别页（/[cat]）：根据类别文件夹下的index.md读取类别title，description，cover image,以及seotitle, seodescription,.顶部显示title，description，cover image，接着是每个类别页列出该类所有文章（分页，每页10-20篇），并显示子系列导航（如果有）。添加过滤器，如按series或发布时间排序。
系列（Series）页：新增独立页面（如/series/[series-slug]），用于聚合特定series的文章列表。这不改变文章的URL路径，但提供集中浏览入口。系列页可以从Frontmatter的series属性自动生成。站点构建时，扫描所有文章的series属性，自动创建/series/[series-slug]页面（slug从series字符串生成，如”backlinks” -> “backlinks”）。
小工具页面（/fun-tools/[tool-slug]）：保留原路径。优化点：
- 创建一个/fun-tools首页，列出所有工具的卡片式概览（名称、描述、链接）。
- 如果工具需要后端（如API调用），设计为独立子页面，支持客户端交互（JS驱动），并考虑服务器端渲染以防JS禁用。
- 工具页添加分享按钮和使用统计（可选，通过简单Analytics）。
其他辅助页面：
- /about：个人简介、联系方式、构建过的项目链接（html5游戏站、AI生图站、prompt网站）。
- /archive：所有文章的归档页，按年/月或类别树状列表，便于老内容检索。
- /search：专用搜索页，支持关键词、类别、series过滤。
- /tags：如果引入标签系统（可选），聚合标签页。
Header导航：左侧’Yeekal’作为Logo链接首页。右侧：四大类别链接 + ‘Fun Tools’ + + ‘Search’图标。使用响应式设计，下拉菜单支持子导航（如类别下显示热门series）。
Footer：添加版权信息、社交链接（X、GitHub等）、隐私政策（如果涉及工具数据）、以及站点地图链接

Astro 项目结构#

src/
├── components/     # 可复用组件
│   ├── pages/   # 文章相关组件
│   ├── layout/    # 布局组件
│   └── shared/    # 通用组件
├── layouts/       # 页面布局
├── pages/         # 页面路由
        - /[cat]
│   ├── [cat]/[post]
│   ├── series/
        - /series/[series-slug]
│   └── fun-tools/
├── content/       # 内容集合
│   ├── ai/        # 各分类文章
│   ├── indie-dev/
│   ├── robotics/
│   ├── notes/
└── utils/         # 工具函数

整体优化#

SEO增强：所有页面自动生成canonical URL、Open Graph元数据；使用懒加载图片；确保移动端友好（AMP可选）。
性能：压缩图片、启用CDN、静态生成大部分页面。

Astro开发组件#

了解到大家常用的一些开发组件：

评论系统: https://waline.js.org/en/
数据库 https://console.leancloud.app/register
全文搜索: https://pagefind.app/
cms: https://keystatic.com/docs/introduction
博客模板：
- https://github.com/cworld1/astro-theme-pure/tree/main
reading time caluculation : https://github.com/cworld1/astro-theme-pure/blob/f5673e96263abb78d35368e2ccd70a3c0ccce0d2/packages/pure/utils/reading-time.ts#L70

最后#

目前网站基础结构已经有了，评论，搜索，以及整体的布局还有待优化。

另外分享以下我的vs code中md的snippet，可以通过快捷指令head快速插入frontmatter：

"AI Article Frontmatter": {
	"prefix": "head",
	"body": [
		"---",
		"title: ${1:Title of the Article}",
		"cover: ${2:/path/to/cover-image.jpg}",
		"series: []",
		"date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
		"tags: []",
		"is_draft: true",
		"excerpt: ${3:A brief summary of the article for previews}",
		"seotitle: ${4:$1}",
		"seodescription: ${5:$3}",
		"author: Yeekal",
		"---",
		"",
		"${0}"
	],
	"description": "Markdown frontmatter template for an AI future article with SEO and metadata"
	}

终于还是用Astro重构了博客