Astro + Payload CMS: Создаем молниеносный сайт с нуля. Пошаговое руководство

Введение

 Предварительные требования

Перед началом убедитесь, что на вашем компьютере установлен **Node.js** (версии 18 или выше) и пакетный менеджер, например, **pnpm** или **npm**.

---

Шаг 1. Настройка Payload CMS

Сначала настроим бэкенд — нашу систему управления контентом.

1. Создайте проект Payload.
Откройте терминал и выполните команду:
```bash
npx create-payload-app my-blog-backend
```
В процессе установки выберите `TypeScript` и шаблон `Blank` (пустой).

2. Определите коллекцию постов.

Payload управляет контентом через "коллекции". Создадим коллекцию для наших постов. Создайте файл `src/collections/Posts.ts` и добавьте в него следующий код:

```typescript
import { CollectionConfig } from 'payload/types';

const Posts: CollectionConfig = {
slug: 'posts',
admin: {
useAsTitle: 'title',
},
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'slug',
type: 'text',
required: true,
unique: true,
},
{
name: 'content',
type: 'richText',
},
],
};

export default Posts;
```

3. Подключите коллекцию в конфигурации Payload.

Откройте файл `src/payload.config.ts` и добавьте вашу новую коллекцию в массив `collections`:

```typescript
import { buildConfig } from 'payload/config';
import Posts from './collections/Posts';
import Users from './collections/Users';

export default buildConfig({
// ... остальная конфигурация
collections: [
Users,
Posts, // <-- Добавляем нашу коллекцию сюда
],
// ...
});
```

 4. Запустите Payload.

Перейдите в директорию проекта (`cd my-blog-backend`) и запустите сервер разработки:
```bash
pnpm dev
```
При первом запуске Payload предложит создать администратора. После этого вы сможете зайти в админ-панель по адресу `http://localhost:3000/admin` и создать свой первый пост.

Не забудьте заполнить все поля, включая `slug`.
---

 Шаг 2: Настройка Astro

Теперь займемся фронтендом.

1. Создайте проект Astro.
Откройте новый терминал и выполните команду:
```bash
pnpm create astro@latest my-blog-frontend
```
Выберите шаблон `Empty` (пустой) и `TypeScript` (`Strict`).

2. Базовая структура.
Astro уже создал для вас базовую структуру. Основные файлы, с которыми мы будем работать, находятся в `src/pages/`.

---

Шаг 3: Соединяем Astro и Payload

Магия происходит здесь. Мы будем запрашивать данные из API нашего Payload CMS во время сборки сайта Astro.

1. Создаем страницу для вывода всех постов.
Создайте файл `src/pages/blog/index.astro`. Этот файл будет запрашивать список всех постов и отображать их.

```astro
---
import Layout from '../../layouts/Layout.astro';

// Запрос к API Payload для получения всех постов
const response = await fetch('http://localhost:3000/api/posts');
const data = await response.json();
const posts = data.docs;
---
<Layout title="Мой блог">
<h1>Все посты</h1>
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}`}>{post.title}</a>
</li>
))}
</ul>
</Layout>
```

2. Создаем динамическую страницу для одного поста.
Astro позволяет создавать динамические маршруты. Создайте файл `src/pages/blog/[slug].astro`. Он будет генерировать отдельную страницу для каждого поста.

```astro
---
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths() {
const response = await fetch('http://localhost:3000/api/posts');
const data = await response.json();
const posts = data.docs;

return posts.map(post => ({
params: { slug: post.slug },
props: { post },
}));
}

const { post } = Astro.props;
---
<Layout title={post.title}>
<h1>{post.title}</h1>
<div>
<!-- Payload RichText хранится в формате, который нужно будет распарсить -->
<!-- Для простоты пока выведем как JSON -->
<pre>{JSON.stringify(post.content, null, 2)}</pre>
</div>
</Layout>
```

Шаг 4: Запуск и проверка

Перейдите в директорию фронтенда (`cd my-blog-frontend`) и запустите сервер разработки Astro:

```bash
pnpm dev
```

Теперь откройте `http://localhost:4321/blog` в вашем браузере. Вы должны увидеть список постов, которые вы создали в Payload. Кликнув по ссылке, вы перейдете на страницу конкретного поста.

 Заключение.

Поздравляем! Вы только что создали основу для молниеносного сайта с разделенными фронтендом и бэкендом. Вы использовали Payload CMS для удобного управления контентом и Astro для его максимально быстрой доставки пользователю. 

Это только начало. Теперь вы можете добавлять стили с помощью Tailwind CSS, усложнять структуру контента в Payload и расширять функциональность вашего Astro-сайта.