使用 Astro 快速搭建一个静态博客
262 字
1 分钟
使用 Astro 快速搭建一个静态博客
为什么选择 Astro
Astro 是一个面向内容驱动网站的静态站点生成器。它的核心理念是 默认零运行时 JavaScript——最终产物是纯 HTML，只在交互需要时加载脚本。
对博客这类以阅读为主的站点来说，这意味着更快的首屏与更好的 SEO。
初始化项目
使用官方脚手架快速创建：
npm create astro@latest选择空模板后，安装依赖并启动开发服务器：
npm installnpm run dev# 默认地址 http://localhost:4321用 Content Collections 管理文章
在 src/content/config.ts 中定义文章 schema：
import { defineCollection, z } from 'astro:content';import { glob } from 'astro/loaders';
const posts = defineCollection({ loader: glob({ pattern: '**/[^_]*.md', base: './src/content/posts' }), schema: z.object({ title: z.string(), description: z.string(), pubDate: z.coerce.date(), tags: z.array(z.string()).default([]), }),});
export const collections = { posts };所有 Markdown 文章只需放进 src/content/posts/，并填写 Frontmatter，Astro 会在构建期统一校验。
小结
Astro 让「写文章」回归纯粹：新增一篇博客就是新增一个 .md 文件。配合 Tailwind 与 Shiki，我们可以零成本获得现代化的阅读体验。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
使用 Astro 快速搭建一个静态博客
https://mingblog.de5.net/posts/getting-started-with-astro/相关文章智能推荐
1
Tailwind CSS 暗色模式的三种实现策略
前端开发深入对比 Tailwind 中基于 class、media 与系统偏好的暗色模式方案，并给出防闪烁（FOUC）的最佳实践。
2
5 个让 TypeScript 代码更健壮的实践
前端开发从 strict 模式到类型守卫，分享 5 个能显著提升 TypeScript 项目可维护性与安全性的实用技巧。
3
用 Typora 写博客：零基础发布全流程
写作指南一份完全面向新手的使用说明：从克隆项目到本地预览，从 Typora 写作到 git 推送自动部署，手把手带你在这个博客上发布第一篇文章。
4
Git 工作流最佳实践：从独狼到团队协作
后端运维深入讲解 Git Flow、GitHub Flow 和 Trunk-Based Development 三种主流分支策略，附完整命令示例与流程图，帮你选择最适合团队的工作流。
5
Docker 容器化实战：从 Dockerfile 到多服务编排
后端运维手把手教你编写 Dockerfile、使用 Docker Compose 编排多容器应用，附架构图与常用命令备忘，适合容器化入门与进阶。
随机文章随机推荐