> echo "Welcome to My Tech Zone"

$ whoami

> Tech Explorer & Code Artist

$ ls social

> GitHub

> larryxue.dev

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
  1. 部署选项:

项目结构

astro-zen-blog/
├── src/
│ ├── content/
│ │ └── blog/ # 博客文章
│ ├── layouts/ # 页面布局
│ ├── components/ # UI 组件
│ └── config.ts # 网站配置
├── public/ # 静态资源
└── astro.config.mjs # Astro 配置
posted @   azoux  阅读(176)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示