egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Продолжительность
2 ч 43 мин
Категория
Другое (Frontend)
Количество уроков
23 Видео
Дата добавления
3 окт. 2025 г., 21:12
Язык
Английский
«Создание полнофункционального блога на Astro» - это практический курс, который без лишней теории показывает, как разработать современный и полностью рабочий сайт-блог. Курс построен вокруг Astro - прогрессивного фреймворка для создания быстрых и удобных контент-проектов.
В процессе обучения вы освоите:
- Стили и макет: оформление страниц в Astro, разные подходы к стилю без ущерба для скорости.
- Компоненты и статические ресурсы: создание переиспользуемых компонентов и работа с изображениями.
- Систему публикации контента: использование коллекций контента в Astro и типобезопасность через Zod для структурированных данных.
- Динамический функционал: пагинацию и динамические страницы для удобной навигации.
- SEO-основы: настройку оптимизации через astro-seo, чтобы сайт был заметен поисковикам.
- Интерактивные элементы: добавление компонентов сначала с React, а затем - оптимизация на Vanilla JS.
- Интеграцию с бэкендом: создание API-эндпоинтов и работу с базой данных через Drizzle ORM.
- Генерацию OG-изображений: автоматическое создание картинок для соцсетей.
По итогам курса у вас будет не просто теоретическое понимание, а готовый развернутый full-stack блог, соответствующий современным практикам веб-разработки. Вы получите навыки, применимые и в других проектах: работа с базами данных, контейнеризация и деплой полноценных веб-приложений.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
-
Урок 1. 00:04:20Intro: Build a Full Stack Blog with Astro
-
Урок 2. 00:04:12Create an Astro Project and Set up the Dev Environment
-
Урок 3. 00:09:05Style Astro Pages with Many Different Options
-
Урок 4. 00:02:37Create Static Pages in Astro Using File Based Routing
-
Урок 5. 00:04:25Create and Apply a Layout to Astro Pages
-
Урок 6. 00:05:25Create an Astro Component for Links
-
Урок 7. 00:05:23Render Images to Pages with Astros Static Serving and Static Assets
-
Урок 8. 00:07:49Create Astro Content Collections with Zod for a Typesafe Blog
-
Урок 9. 00:06:09Render an Astro Blog Post Page with getStaticPaths
-
Урок 10. 00:09:21Implement Pagination in a Dynamic Astro Index Page with getStaticPaths and paginate
-
Урок 11. 00:05:02Implement SEO in an Astro Website with astro-seo
-
Урок 12. 00:06:56Generate a Sitemap in Astro with the sitemap Integration
-
Урок 13. 00:07:25Generate an RSS Feed for an Astro Blog with @astrojs/rss
-
Урок 14. 00:01:02Deploy a Static Astro Site on Vercel
-
Урок 15. 00:01:31Milestone Recap: Build a Full Stack Blog with Astro
-
Урок 16. 00:07:57Add Interactive React Components to a Static Astro Page with Astro Islands
-
Урок 17. 00:07:58Refactor a React Astro Island to Vanilla JS to Ship Less JavaScript
-
Урок 18. 00:02:24Create a fly.io Account and Prepare a Project for Deployment
-
Урок 19. 00:07:50Dockerize a Server-side Rendered (SSR) Astro Blog and Deploy to Fly.io
-
Урок 20. 00:09:28Create a GitHub Action Configuration to Automatic Deploy an Astro Blog
-
Урок 21. 00:15:32Implement Drizzle ORM for Development and Deploy to a Fly.io Volume
-
Урок 22. 00:11:57Create Astro API Endpoints to Get and Update Database Records using Drizzle ORM
-
Урок 23. 00:19:28Implement Dynamic OG Image Generation with Astro API Routes and Satori
https://github.com/nikolovlazar/egghead-personal-blog-astro/
Автор - egghead
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
Chris Pennington
21 апр. 2025 г., 21:41
Изучаем Astro
Learn Astro
В мире чрезмерно усложнённых веб-фреймворков Astro выделяется простотой, отличным опытом для разработчика и высокой производительностью. Но за этой простотой скрывается масса возможностей: от оптимизации изображений и динамических маршрутов до API, middleware, анимаций переходов и поддержки UI-фреймворков.Этот курс - ваш практический путеводитель по современному Astro. Вместо абстрактной теории - реальные проекты, основанные на встроенных возможн
vueschool.io
4 февр. 2025 г., 21:53
Создание контентных сайтов с Astro и Vue.js
Content Sites with Astro and Vue.js
Хотите создать быстрый и эффективный сайт с контентом? В этом курсе вы узнаете, как использовать Astro и Vue.js вместе для разработки высокопроизводительных контентных сайтов - таких как блоги, документационные порталы и лендинги. Благодаря сочетанию подхода Astro с минимальным использованием JavaScript и возможностей Vue.js для добавления интерактивности, вы получите молниеносно быстрый сайт без ущерба для пользовательского опыта.
James Q Quick
25 сент. 2024 г., 20:42
Создание современных веб-сайтов с Astro!
Build Modern Websites with Astro!
В этом курсе вы сможете вывести свой блог на новый уровень, добавив мощные функции, такие как теги, пагинация, аутентификация, комментарии и многое другое! Также вы изучите современные технологии, такие как Tailwind CSS, TypeScript, Xata и Cloudinary.Темы, охваченные в курсе:Генерация статических страниц vs серверный рендерингКоллекции контентаОптимизация изображенийTypeScript для моделей и схемАутентификацияРазвертывание и хостинг сайтаЭтот курс
frontendmasters
1 июн. 2023 г., 00:33
Astro для современной веб-разработки
Astro for Modern Web Development
Разработка с использованием JavaScript предоставляет отличный опыт для разработчиков, позволяет создавать интерактивные элементы и работать с самыми современными инструментами. Однако, доставка ненужного JavaScript замедляет загрузку веб-сайтов, расходует трафик и ухудшает пользовательский опыт. Astro предлагает идеальный баланс, позволяя нам работать с современными инструментами, используя любой выбранный фреймворк, но при этом по умолчанию не д