163 lines
6.6 KiB
Markdown
163 lines
6.6 KiB
Markdown
# Astro Frontend для Redi.dev
|
||
|
||
Современный веб-сайт-портфолио, разработанный на Astro с использованием PocketBase в качестве CMS.
|
||
|
||
## 🚀 Стек технологий
|
||
|
||
- **Astro 6** - фреймворк для создания быстрых сайтов
|
||
- **TypeScript** - строгая типизация
|
||
- **Tailwind CSS** - стилизация
|
||
- **Solid.js** - реактивные компоненты
|
||
- **PocketBase** - headless CMS и бэкенд
|
||
- **Bun** - пакетный менеджер и рантайм
|
||
- **Nanostores** - управление состоянием
|
||
|
||
## 📁 Структура проекта
|
||
|
||
```
|
||
astro_redi/
|
||
├── .env # Переменные окружения (в корне проекта!)
|
||
├── frontend/ # Исходный код frontend части
|
||
│ ├── public/ # Статические файлы
|
||
│ ├── src/
|
||
│ │ ├── assets/ # Стили, изображения
|
||
│ │ ├── components/ # Astro и Solid.js компоненты
|
||
│ │ ├── layouts/ # Макеты страниц
|
||
│ │ ├── lib/ # Вспомогательные библиотеки (PocketBase клиент)
|
||
│ │ ├── pages/ # Страницы приложения
|
||
│ │ └── globalInterfaces.ts # Глобальные TypeScript интерфейсы
|
||
│ ├── astro.config.mjs # Конфигурация Astro
|
||
│ ├── package.json # Зависимости
|
||
│ └── tsconfig.json # Конфигурация TypeScript
|
||
├── astro_redidev/ # Резервная копия старой версии
|
||
├── backend/ # Бэкенд часть (если есть)
|
||
└── scripts/
|
||
└── dev-server.js # Скрипт запуска локальных серверов
|
||
```
|
||
|
||
## ⚙️ Переменные окружения
|
||
|
||
Файл `.env` должен находиться в **корне проекта** (`astro_redi/.env`):
|
||
|
||
```env
|
||
# Локальная разработка
|
||
PUBLIC_SITE_URL=http://localhost:4321
|
||
PUBLIC_POCKETBASE_URL=http://127.0.0.1:8090
|
||
|
||
# Продакшен (раскомментировать при деплое)
|
||
# PUBLIC_SITE_URL=https://redib.ru
|
||
# PUBLIC_POCKETBASE_URL=http://pocketbase-y8oskk4kgkgko0s88c8c4oo0.144.124.229.64.sslip.io:8080
|
||
```
|
||
|
||
## 🛠️ Установка и запуск
|
||
|
||
### Требования
|
||
|
||
- **Bun** (рекомендуется) или Node.js 22+
|
||
- **PocketBase** (локально или удалённо)
|
||
|
||
### Локальная разработка
|
||
|
||
1. **Установите зависимости:**
|
||
```bash
|
||
bun install
|
||
```
|
||
|
||
2. **Запустите PocketBase:**
|
||
```bash
|
||
# PocketBase должен быть запущен на порту 8090
|
||
# Используйте скрипт dev-server.js для одновременного запуска
|
||
node scripts/dev-server.js
|
||
```
|
||
|
||
3. **Откройте браузер:**
|
||
- Astro: http://localhost:4321
|
||
- PocketBase Admin: http://localhost:8090/_/
|
||
|
||
### Сборка для продакшена
|
||
|
||
```bash
|
||
bun run build
|
||
```
|
||
|
||
### Продакшен запуск
|
||
|
||
```bash
|
||
bun run start
|
||
```
|
||
|
||
## 📊 Коллекции PocketBase
|
||
|
||
Проект использует следующие коллекции:
|
||
|
||
| Коллекка | Описание | Поля |
|
||
|----------|----------|------|
|
||
| `projects` | Проекты портфолио | `name`, `description`, `short_description`, `long_description`, `stack`, `image`, `url_site`, `github`, `order`, `isActive` |
|
||
| `featured_projects` | Избранные проекты | `name`, `description`, `image`, `url`, `github`, `stack`, `featured`, `forSale`, `order`, `isActive` |
|
||
| `posts` | Блог | `title`, `description`, `publishDate`, `tags`, `coverImage`, `coverImageAlt`, `isFeatured`, `isActive` |
|
||
| `about` | Информация об авторе | `title`, `description`, `professional_experience`, `skills`, `contact_title`, `contact_description`, `whatsapp_link`, `email`, `image`, `alt_text`, `isActive` |
|
||
| `navigation` | Навигация сайта | `items` (JSON) |
|
||
|
||
## 🌐 Изображения из PocketBase
|
||
|
||
Изображения загружаются напрямую из PocketBase по URL:
|
||
|
||
```
|
||
{PUBLIC_POCKETBASE_URL}/api/files/{collection_id}/{record_id}/{filename}
|
||
```
|
||
|
||
Пример:
|
||
```
|
||
http://127.0.0.1:8090/api/files/projects/t7i08mbfzuzp6e6/tech_news_ncqktq5j8r.avif
|
||
```
|
||
|
||
## 📦 Деплой
|
||
|
||
### В Coolify
|
||
|
||
Проект настроен для деплоя в Coolify с использованием адаптера `@astrojs/node`:
|
||
|
||
1. Укажите переменные окружения в Coolify:
|
||
- `COOLIFY_FQDN` — домен приложения
|
||
- `COOLIFY_URL` — URL приложения
|
||
- `PUBLIC_SITE_URL` — публичный URL сайта
|
||
- `PUBLIC_POCKETBASE_URL` — URL PocketBase
|
||
|
||
2. Команды сборки и запуска:
|
||
- Build: `bun run build`
|
||
- Start: `bun run start`
|
||
- Install: `bun install`
|
||
|
||
### Другие платформы
|
||
|
||
Проект совместим с:
|
||
- Vercel
|
||
- Netlify
|
||
- Cloudflare Pages
|
||
- Любые VPS с Node.js/Bun
|
||
|
||
## 🔧 Скрипты
|
||
|
||
| Команда | Описание |
|
||
|---------|----------|
|
||
| `bun install` | Установка зависимостей |
|
||
| `bun run dev` | Запуск режима разработки |
|
||
| `bun run build` | Сборка проекта |
|
||
| `bun run start` | Запуск продакшен версии |
|
||
| `bun run astro check` | Проверка типов TypeScript |
|
||
|
||
## 📝 Особенности реализации
|
||
|
||
- **SSR (Server-Side Rendering)** — динамические страницы рендерятся на сервере
|
||
- **Статическая генерация** — пагинация проектов генерируется при сборке
|
||
- **Оптимизация изображений** — ленивая загрузка, правильные размеры
|
||
- **SEO** — sitemap, метатеги, семантическая разметка
|
||
- **Тёмная тема** — автоматическое переключение по системным настройкам
|
||
- **Адаптивный дизайн** — мобильная версия, планшет, десктоп
|
||
|
||
## 👨💻 Автор
|
||
|
||
**RediBedi** — веб-разработчик, специализирующийся на Astro и современных frontend технологиях.
|
||
|
||
- Портфолио: [redib.ru](https://redib.ru)
|
||
- GitHub: [RediBedi](https://github.com/RediBedi)
|