astro_redi/frontend

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):

# Локальная разработка
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. Установите зависимости:

   bun install
   

2. Запустите PocketBase:

   # PocketBase должен быть запущен на порту 8090
   # Используйте скрипт dev-server.js для одновременного запуска
   node scripts/dev-server.js
   

3. Откройте браузер:

   • Astro: http://localhost:4321
   • PocketBase Admin: http://localhost:8090/_/

Сборка для продакшена

bun run build

Продакшен запуск

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
• GitHub: RediBedi