Astro Zen Blog |一个优雅、极简、强大的博客
介绍 Astro Zen 博客项目
如果你想部署一个自己的静态博客,又不想到处折腾,并且是熟悉的前端技术栈,你可以尝试下:Astro Zen Blog!
Astro Zen Blog 是一个使用 Astro 构建的极简、响应式和 SEO 友好的博客模板。它具有简洁的设计、暗色模式支持和基于 markdown 的内容管理。
特性
- 📝 支持 Markdown/MDX 内容创作
- 🎨 简洁的极简设计
- 🏷️ 基于标签的组织方式
- 🌓 暗色模式支持
- 🔍 SEO 优化
- 📱 完全响应式
- 🔗 社交媒体集成
- 📰 RSS 订阅支持
- ⚡ 优秀的性能
在线演示: Yujian's blog
安装
-
克隆仓库:
git clone https://github.com/larry-xue/astro-zen-blog.git cd astro-zen-blog -
安装依赖:
npm install -
启动开发服务器:
npm run dev
配置
网站设置
-
打开
src/config.ts
并自定义您的网站设置:export const siteConfig: SiteConfig = { site: "https://example.com/", // 您的网站 URL title: "您的博客", slogan: "探索世界与自我", description: "在这里写描述", social: { github: "https://github.com/username", linkedin: "https://www.linkedin.com/in/username", email: "your@email.com", rss: true, }, homepage: { maxPosts: 5, // 显示的最大文章数量 tags: [], // 仅显示包含这些标签的文章 excludeTags: [], // 排除包含这些标签的文章 } };
首页文章过滤
如果您想要对首页文章进行更多自定义,可以通过更新 src/utils/posts.ts
中的 filterPublishedPosts
函数来自定义显示的文章。
主题
在 tailwind.config.js
中更新主要和次要颜色:
module.exports = { theme: { extend: { colors: { primary: { 50: '#f2f8f3', 100: '#e6f1e8', 200: '#cde3d2', 300: '#a7cbb0', 400: '#7baf89', 500: '#559469', 600: '#437a54', 700: '#366144', 800: '#2c4d37', 900: '#23402d', 950: '#0d1911', } } } } };
编写内容
-
在
src/content/blog/
目录下创建新的博客文章 -
使用以下前置元数据模板:
--- title: "文章标题" description: "文章简短描述" date: YYYY-MM-DD tags: ["标签1", "标签2"]
image: 封面图
您的内容写在这里...
## 构建和部署 1. 构建您的网站: ```bash npm run build
-
部署选项:
- Cloudflare Pages: 部署到 Cloudflare Pages
项目结构
astro-zen-blog/ ├── src/ │ ├── content/ │ │ └── blog/ # 博客文章 │ ├── layouts/ # 页面布局 │ ├── components/ # UI 组件 │ └── config.ts # 网站配置 ├── public/ # 静态资源 └── astro.config.mjs # Astro 配置
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)