Astro v5 博客启动器

我最近将朋友的博客迁移到了 Astro v5。选择 Astro 的原因是它对 markdown 内容的支持一流。

只需极少量的样板，Astro 就会验证 markdown 前言、为每篇帖子生成静态页面并优化帖子中的所有图片。

https://astro-v5-blog-starter.jldec.me/blog/first-post

Markdown

---
date: '2024-12-01'
title: 'My First Blog Post'
image:
  src: '../images/birch-trees.webp'
---

## Markdown is

- a lightweight markup language
- for decorating plain text
- with things like headings, lists, links, and blockquotes
- making minimal assumptions about formatting.

#### Here is an inline image:

![sunset](../images/sunset-cambridge.jpg)

HTML

  
My First Blog Post
  << Back
  
Markdown is
  

    
a lightweight markup language
    
for decorating plain text
    
with things like headings, lists, links, and blockquotes
    
making minimal assumptions about formatting.
  
  
Here is an inline image:
  

    
  

入门仓库

这是将这些关键功能提取到新博客启动器中的结果。该存储库不包含大量设计 - 仅包含配置和少量代码。

https://github.com/jldec/astro-v5-blog-starter

该项目包括：

文件结构

├── LICENSE
├── README.md
├── astro.config.mjs
├── package.json
├── public
│   ├── _headers
│   └── favicon.svg
├── src
│   ├── assets
│   │   └── astro.svg
│   ├── components
│   │   └── AstroLogo.astro
│   ├── content
│   │   ├── blog
│   │   │   ├── 2nd-post.md
│   │   │   └── first-post.md
│   │   └── images
│   │       ├── birch-trees.webp
│   │       └── sunset-cambridge.jpg
│   ├── content.config.ts
│   ├── layouts
│   │   └── Layout.astro
│   ├── pages
│   │   ├── 404.astro
│   │   ├── blog
│   │   │   └── [id].astro
│   │   └── index.astro
│   └── styles
│       └── global.css
├── tailwind.config.mjs
├── tsconfig.json
└── wrangler.toml

Markdown 驱动的博客

Markdown 博客文章位于 src/content/blog。

“blog” 集合的架构在 content.config.ts 中定义。此文件还包含用于对帖子进行排序和筛选的实用函数。例如，如果设置了“draft”标志，则帖子将仅在开发期间包含，而不会随生产版本发布。

主页在 src/pages/index.astro 中定义，其中按日期顺序列出帖子。

帖子由动态路由 src/pages/blog/[id].astro 呈现。为了让 Astro 预呈现静态页面，动态路由导出一个 `getStaticPaths` 函数，该函数返回每个呈现路由的参数和属性列表。

src/pages/blog/[id].astro

---
import { Image } from 'astro:assets';
import { getCollection, render } from 'astro:content';
import { filterAllPosts } from '~/content.config';
import Layout from '~/layouts/Layout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog', filterAllPosts);
  return posts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---


  
  

    
{post.data.title}
    << Back
    
  

图像优化

可以在 markdown 前置内容中为图像声明 `src` 路径和 `alt` 文本，或者在 markdown 中内联。

这些被传递到检查每个图像的“ ”组件中，并生成具有“width”和“height”属性的“ ”标签，从而减少浏览器中的布局偏移。

在构建过程中，图像被转换为​​ webp 格式，并以唯一（可缓存）名称存储在“dist/_astro”中。

在 Cloudflare Pages 上发布

静态站点不需要@astrojs/cloudflare 适配器。

Cloudflare Pages 将路由与 `.html` 文件匹配。为了避免出现尾部斜杠，请配置构建以生成 `.html` 文件而不是 `/index.html`。

_headers 文件为不可变内容添加缓存控制标头。

结论

对于 markdown 驱动的博客来说，Astro v5 是一个不错的选择，只要您不介意偶尔进行维护来更新依赖项。

以下是关于此启动器未来改进的一些想法：

希望您觉得这个入门指南有用。如果您有任何反馈或建议，请联系 X。