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

介绍 Astro Zen 博客项目

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

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

特性

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

在线演示: Yujian's blog

安装

1. 克隆仓库：

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

2. 安装依赖：

   npm install
   

3. 启动开发服务器：

   npm run dev
   

配置

网站设置

1. 打开 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',
        }
      }
    }
  }
};

编写内容

1. 在 src/content/blog/ 目录下创建新的博客文章

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

   ---
   title: "文章标题"
   description: "文章简短描述"
   date: YYYY-MM-DD
   tags: ["标签1", "标签2"]
   

image: 封面图

您的内容写在这里...

## 构建和部署

1. 构建您的网站：

```bash
npm run build

2. 部署选项：

   • Cloudflare Pages: 部署到 Cloudflare Pages

项目结构

astro-zen-blog/
├── src/
│   ├── content/
│   │   └── blog/    # 博客文章
│   ├── layouts/     # 页面布局
│   ├── components/  # UI 组件
│   └── config.ts    # 网站配置
├── public/          # 静态资源
└── astro.config.mjs # Astro 配置