Astro博客

astro-blog-template — Astro 博客模板

作者 jonadev-ok

基于 Astro 的静态博客模板，使用 MDX、Tailwind CSS 与 Preact 搜索岛，适合开发者与内容创作者搭建个人博客。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

Astro 默认静态渲染，页面以 HTML 为主，仅在必要时使用 JavaScript

02

使用 MDX 编写文章，支持在 Markdown 中嵌入组件

03

通过带类型的 Content Collections 管理内容

04

自动生成文章目录并显示每篇阅读时长

05

Tailwind CSS 样式与可复用组件，响应式布局

06

Preact + Fuse 实现客户端搜索岛，并包含面向搜索引擎的优化

模板详细介绍

这是一个用 Astro 构建的博客模板，默认采用静态渲染，页面以 HTML 为主，仅在需要时加载 JavaScript。内容层使用 MDX 编写富文本文章，并通过带类型的 Content Collections 组织内容，附带自动生成的目录与每篇文章的阅读时长。样式由 Tailwind CSS 提供，界面组件可复用，布局为响应式。搜索功能以 Preact 岛的形式实现，配合 Fuse 做客户端检索，因此搜索能力依赖 JavaScript 加载；模板同时包含面向搜索引擎的优化处理。技术栈为 Astro、MDX、Tailwind CSS、Preact + Fuse 与 TypeScript。仓库采用 MIT 许可，可免费使用、修改、商用和分发该版本代码，但演示图片、字体、图标等第三方素材需单独核对其许可，域名、托管等外部服务也可能产生费用。

Astro博客

适合你的项目吗？

适用场景

  • 搭建个人技术博客并发布 MDX 格式文章
  • 为开发者作品集或写作项目提供内容展示站点
  • 需要文章目录、阅读时长与站内搜索的博客场景
  • 以静态输出为主、希望减少客户端 JavaScript 的站点

适合人群

  • 熟悉 Astro 或愿意学习 Astro 的开发者
  • 以 Markdown/MDX 写作的内容创作者
  • 需要可复用组件与可扩展内容结构的小型博客项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    仓库采用 MIT 许可，分发代码副本或实质性部分时需保留版权声明与完整 MIT 许可声明

  2. 2

    演示图片、字体、图标等第三方素材需按各自许可单独核对

  3. 3

    域名、托管等外部服务可能另行收费，需自行确认成本

  4. 4

    搜索功能依赖 Preact 岛与 Fuse，在禁用 JavaScript 时不可用

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 站点以 HTML 为主，仅在必要时加载 JavaScript；搜索功能依赖 Preact 岛与 Fuse，禁用 JavaScript 时站内搜索不可用。
  • 贡献代码需先阅读仓库 CONTRIBUTING.md 中的贡献说明与流程。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

The site uses **HTML-first** and JavaScript only when necessary necessary.

README 原文

If you are interested in contributing, click here for more [information](https://github.com/jonadev-ok/astro-blog-template/blob/main/CONTRIBUTING.md)

README 原文
https://github.com/jonadev-ok/astro-blog-template/blob/main/LICENSEhttps://github.com/jonadev-ok/astro-blog-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
Astro Themes
资料与维护参考分
资料较完整 · 83 / 100
技术栈
Astro
网站类型
博客
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-03-04
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: bea98d7c2aa1acdcc9d4131a8dca2ef34e7ca37cb84e6e95cbfd580c57cf7da9

2026-10-03T23:10:54.776Z

来源文件 / 仓库
# 💻 Blog template created with Astro

<details>
<summary>Click to see technical details</summary>

### ✨ Features:

- ⚡ **Astro** with static rendering by default
- 📝 **MDX** for rich content
- 🎨 **Tailwind CSS** for styles
- 🧩 Reusable components
- 🗂️ Typed **Content Collections**
- 📚 Automatic table of contents
- ⏱️ Reading time per article
- 📱 Responsive layout
- 🔍 Search engine optimized with Preact
- 🚀 Excellent performance and SEO

### 🧱 Technology stack:

- Astro
- MDX
- Tailwind CSS
- Preact + Fuse (for search island)
- TypeScript

The site uses **HTML-first** and JavaScript only when necessary necessary.

</details>

<div align="center">
  <img width="1920" height="1080" alt="682shots_so" src="https://github.com/user-attachments/assets/7bd1b263-0f0d-4720-b5ff-e1263e28652f" />
  <p></p>
</div>
<div align="center">
  
  ![Astro Badge](https://img.shields.io/badge/Astro-FF3E00?logo=astro&logoColor=fff&style=flat)
  ![Tailwind CSS Badge](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss&logoColor=fff&style=flat)
  ![Preact Badge](https://img.shields.io/badge/Preact-880052?logo=preact&logoColor=fff&style=flat)
  ![GitHub stars](https://img.shields.io/github/stars/jonadev-ok/astro-blog-template)
  ![GitHub PRs](https://img.shields.io/github/issues-pr/jonadev-ok/astro-blog-template)
  ![GitHub forks](https://img.shields.io/github/forks/jonadev-ok/astro-blog-template)
  ![GitHub issues](https://img.shields.io/github/issues/jonadev-ok/astro-blog-template)
  
</div>

> [!NOTE]
> If you are interested in contributing, click here for more [information](https://github.com/jonadev-ok/astro-blog-template/blob/main/CONTRIBUTING.md)

## 🫂 Contributors

<a href="https://github.com/jonadev-ok/astro-blog-template/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=jonadev-ok/astro-blog-template"/>
</a>

<p></p>
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

astrowind

astrowind

⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.

Astro · 博客

astro-paper

astro-paper

A minimal, accessible and SEO-friendly Astro blog theme.

Astro · 博客

fuwari

fuwari

✨A static blog template built with Astro.

Astro · 博客

Firefly

Firefly

Firefly 是一款基于 Astro 的静态博客主题，由 CuteLeaf 在 saicaca 的 Fuwari 模板基础上二次开发，主打清新美观的视觉风格。

Astro · 博客

astro-theme-cactus

astro-theme-cactus

A simple Astro theme. Use it to create your blog or website.

Astro · 作品集

astrofy

astrofy

Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCS…

Astro · 作品集