介绍 Astro Zen 博客项目

如果你想部署一个自己的静态博客，又不想到处折腾，并且是熟悉的前端技术栈，你可以尝试下：Astro Zen Blog！

Astro Zen Blog 是一个使用 Astro 构建的极简、响应式和 SEO 友好的博客模板。它具有简洁的设计、暗色模式支持和基于 markdown 的内容管理。

特性

📝 支持 Markdown/MDX 内容创作
🎨 简洁的极简设计
🏷️ 基于标签的组织方式
🌓 暗色模式支持
🔍 SEO 优化
📱 完全响应式
🔗 社交媒体集成
📰 RSS 订阅支持
⚡ 优秀的性能

安装

克隆仓库：

bash 复制代码

git clone https://github.com/larry-xue/astro-zen-blog.git
cd astro-zen-blog

安装依赖：
bash 复制代码
```
npm install
```
启动开发服务器：
bash 复制代码
```
npm run dev
```

配置

网站设置

打开 src/config.ts 并自定义您的网站设置：

typescript 复制代码

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 中更新主要和次要颜色：

javascript 复制代码

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/ 目录下创建新的博客文章

使用以下前置元数据模板：

markdown 复制代码

---
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 配置

Astro Zen Blog ｜一个优雅、极简、强大的博客