Автоматическая публикация next-js проектов в GitHub Pages
Всем привет! Сегодня есть отличная новость для тех, кто хочет в обучении больше практики с реальным кодом и реальными проектами, а не только в интерактивных уроках. Сегодня я доработал заготовку @prisma-cms/nexus и теперь при публикации кода в github, автоматически выполняется сборка проекта и публикация его в GitHub Pages. Если кто не знает что такое GitHub Pages - это их встроенный бесплатный хостинг для публикации своих проектов в режиме Headless CMS, то есть без режима реальной работы на сервере. Зачем это надо и как это нам поможет в обучении? Плюс здесь в том, что теперь есть возможность не только видеть исходный код проекта, но и сразу увидеть его реальную работу без необходимости скачивать его себе локально, устанавливать зависимости, билдить и т.п. Пример: вот мы совместно с Олей @angel разработали игру Пятнашки (вики). Сама по себе игра не слошная в реализации, но есть масса тонких и интересных моментов. Ранее я бы просто показал исходный код https://github.com/freecode-academy/dev-project--15-game и предложил всем желающим скачать себе и посмотреть как это работает (выполнив все вышеописанные шаги). Сейчас же я могу просто дать ссылку (которую вы увидите и на странице проекта в самом гитхабе): https://freecode-academy.github.io/dev-project--15-game/ Там же можете и поиграться сразу :) А вот другой проект: https://github.com/freecode-academy/dev-project--car-game Исходный проект этой заготовки был любезно предоставлен Олегом @Eo_Narique. Но он был до пошлого ванильный и не использовал ни одной зависимости. Я не мог с этим мириться, поэтому обложил его гигабайтом нод-модулей и выложил в гитхаб :) https://freecode-academy.github.io/dev-project--car-game/ По мере того, как у меня будут проскакивать интересные наработки, я буду так же их оформлять и выкладывать, чтобы их мог любой поковырять и обсудить здесь. Так что если кому интересно, не стесняйтесь - играйтесь и задавайте вопросы, а так же предлагайте свои идеи. Как публиковать свои проекты? Довольно просто всё. Вы можете склонировать себе или вот такие готовые проекты (то есть в которых какая-то логика уже обыграна), или взять исходную заготовку @prisma-cms/nextjs. Код главной страницы находится здесь: src/pages/MainPage/index.tsx. Собственно, сюда можете и писать свой код. После этого коммитите свои изменения и выливаете в свой репозиторий в гитхаб (на счет того как работать с гитхабом в интернете очень много хороших и подробных статей, благо стартовый объем информации в этом небольшой). После того, как выльете, переходите в гитхабе во вкладку Actions (Действия). Дождитесь, пока выполнятся все шаги. После этого, если вы выполнили все в первый раз, надо настроить публикацию в pages. Для этого перейдите в настройки проекта и укажите для него бранч gh-pages (этот бранч автоматически создастся, если деплой выполнился успешно). Не забудьте сохраниться. Здесь же указана и ссылка на ваш сайт. После того, как вы сохранитесь, запустится новая джоба, которая и опубликует ваш сайт.