Astro博客

fyrre — Astro 博客模板

作者 anastasiiaxfr

Fyrre 是一个基于 Astro 的杂志与博客网站模板,内置 Sanity CMS 内容结构,支持多语言、分页、分类与 Markdown/MDX 内容。

看看你的网站会是什么样

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

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

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

01

基于 Astro 的杂志与博客站点模板,仓库采用 MIT 许可

02

包含首页、博客、播客、作者及详情页,另有 404/500 页面

03

内置 i18n 与翻译机制,演示提供英语和乌克兰语两种语言

04

集成 Sanity CMS,内容按 Posts、Podcasts、Authors、Post Category 组织

05

支持 Markdown 与 MDX,并提供分页与分类浏览

06

包含 canonical URL、meta 标签、Open Graph、JSON-LD、sitemap、robots.txt 与 PWA 支持

模板详细介绍

Fyrre 是面向杂志、博客或品牌内容站点的 Astro 起始模板。仓库采用 MIT 许可,公开仓库中提供完整源码,演示站点部署在 Vercel。

模板包含首页、博客列表、博客详情、播客列表、播客详情、作者列表、作者详情以及 404/500 页面。内容层面支持 Markdown 与 MDX,并提供分页与分类浏览。

国际化方面,模板内置 i18n 与翻译机制,演示中提供英语(EN)和乌克兰语(UA)两种语言,并可通过 Sanity 的 Translation metadata 将同一篇内容关联到不同语言版本。SEO 相关能力包括 canonical URL、meta 标签、Open Graph 数据、JSON-LD 结构化数据、sitemap 与 robots.txt,同时提供 PWA 支持。

内容管理依赖 Sanity CMS,仓库内包含 cms 目录,内容结构分为 Posts、Podcasts、Authors 与 Post Category,并按 EN、UA 分语言组织。使用前需要在 sanity.config.ts 中替换为自己的环境变量,并执行 Sanity 的安装、本地运行与部署命令。

样式方面,README 描述为“minimal styling”,并说明使用 Tailwind CSS 与 Daisy UI;具体视觉风格需要以实际代码和演示为准。模板声明可部署到 Vercel、Netlify 或 Cloudflare Pages。README 中的性能评分、Lighthouse 数值等属于作者自述,未在本次资料中独立验证。

Astro博客

适合你的项目吗?

适用场景

  • 搭建多语言的杂志或博客内容站点
  • 用 Sanity 作为后台管理文章、播客与作者信息
  • 需要 Markdown/MDX 写作流程并带分类与分页的博客
  • 部署到 Vercel、Netlify 或 Cloudflare Pages 的静态站点

适合人群

  • 需要 Astro + Sanity 组合的博客或杂志项目
  • 希望内置多语言内容结构与翻译关联机制的站点
  • 接受自行替换 Sanity 环境变量并部署 CMS 的开发者
  • 需要博客、播客、作者等多种内容类型的编辑型网站

上手与定制指南

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

  1. 1

    在项目根目录执行 npm install 安装依赖,npm run dev 启动本地开发服务器(默认 localhost:4321)

  2. 2

    使用 Sanity CMS 前需全局安装 sanity CLI,进入 cms 目录,并在 sanity.config.ts 中替换为自己的环境变量

  3. 3

    CMS 内容按 Posts、Podcasts、Authors、Post Category 组织,并按 EN、UA 分语言;翻译通过 Translation metadata 关联同一内容的不同语言版本

  4. 4

    演示图片、字体、图标等第三方素材需按各自许可单独核对,代码的 MIT 许可不覆盖这些素材

  5. 5

    README 中的性能评分、Lighthouse 数值与部署便利性为作者自述,未在本次资料中独立验证

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 使用 Sanity CMS 需全局安装 sanity CLI 并进入 cms 目录操作,属于额外的外部工具依赖。
  • 必须将 sanity.config.ts 中的环境变量替换为自己的 Sanity 项目配置值,否则 CMS 无法正常工作。
  • 内容管理后台需通过 Sanity 部署到其托管服务,依赖 Sanity 账号与外部服务。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

npm install -g sanity cd cms

README 原文

# change env values in sanity.config.ts to your current values

README 原文

sanity deploy

README 原文
https://github.com/anastasiiaxfr/fyrre/blob/main/LICENSEhttps://github.com/anastasiiaxfr/fyrre/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 03526d6987c3c29a3b15a1f8aa6ad0556a4705226acea9adbf79f01a583514f4

2026-10-03T02:45:01.355Z

来源文件 / 仓库
> ⭐️ Love this theme? Star it to support our work!

# Astro Starter Fyrre Magazine & Blog website template

A fast and modern starter template designed to help teams build and launch magazines, blogs, or brand websites efficiently, with a focus on performance and scalability.

> ⚡ Built with Astro 6, Tailwind CSS 4 & Daisy UI, Sanity CMS latest — optimized for performance, SEO, and simplicity.

![Fyrre Template Preview](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/og-1200x630.jpg)

## Demo

- ✨ [Live Demo](https://fyrre-seven.vercel.app/en)
- 💨 [PageSpeed Insights Report](https://pagespeed.web.dev/analysis/https-fyrre-seven-vercel-app/odkg3zo8qd?form_factor=mobile)
- [Sitemap.xml](https://fyrre-seven.vercel.app/sitemap-index.xml)
- [Robots.txt](https://fyrre-seven.vercel.app/robots.txt)

Features:

- ✅ Localization & translations (i18n) with support for multiple languages, including English (EN) and Ukrainian (UA)
- ✅ Pagination and category
- ✅ Minimal styling (make it your own!)
- ✅ 99+/100 Lighthouse performance
- ✅ SEO-friendly with canonical URLs and meta tags, Open Graph data, JSON-LD schema and PWA
- ✅ Sitemap, robots.txt support
- ✅ Markdown & MDX support
- ✅ Fully responsive and accessible
- ✅ Easily deploy to Vercel, Netlify, or Cloudflare Pages

Pages:

- home
- blog
- blog detail
- podcast
- podcast detail
- authors
- author detail
- 404 / 500

## PWA support

![pwa](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/3.jpg)

## Google pages speed

![mobile](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/1.jpg)
![desktop](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/2.jpg)

## Open Graph Card

![Facebook](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/5.jpg)
![Telegram](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/4.jpg)

## 🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

```text
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── content/
│   ├── layouts/
│   └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json
```

Any static assets, like images, can be placed in the `public/` directory.

## 🧞 Commands

All commands are run from the root of the project, from a terminal:

| Command                   | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `npm install`             | Installs dependencies                            |
| `npm run dev`             | Starts local dev server at `localhost:4321`      |
| `npm run build`           | Build your production site to `./dist/`          |
| `npm run preview`         | Preview your build locally, before deploying     |
| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI                     |

## Sanity CMS start:

```bash
npm install -g sanity
cd cms

# change env values in sanity.config.ts to your current values

npm install
npm run dev
sanity deploy
```

👉 [CMS](https://fyrre-cms.sanity.studio/)

## CMS Structure:

```text
├── Posts
│   ├── EN
│   ├── UA
├── Podcasts
│   ├── EN
│   ├── UA
├── Authors
│   ├── EN
│   ├── UA
└── Post Category
```

![Sanity CMS Preview](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/cms1.jpg)

## How it works:

Go to **Posts** and select the desired locale. Then create a new post in that locale.

After that, go to **Translation metadata** and click **Create**. Fill in the fields:

- select Post
- choose the required post from the dropdown
- select the target locale (new language)

Then click **Create**.

This way, translations are added to a single post by linking it to different locales.

![Sanity CMS Add translation Preview](https://github.com/anastasiiaxfr/fyrre/blob/main/public/theme/cms2.jpg)

## 🛠 Credits

Made with ❤️ by [anastasiiaxfr](https://github.com/anastasiiaxfr/fyrre)

Fyrre is inspired by the free [Fyrre Theme](https://www.figma.com/community/file/1136023191939170511)
反馈内容错误

看看同类模板

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