Всем привет!
Сегодня есть отличная новость для тех, кто хочет в обучении больше практики с реальным кодом и реальными проектами, а не только в интерактивных уроках. Сегодня я доработал заготовку @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/
Там же можете и поиграться сразу :)
А вот другой проект:
Исходный проект этой заготовки был любезно предоставлен Олегом @Eo_Narique. Но он был до пошлого ванильный и не использовал ни одной зависимости.
Я не мог с этим мириться, поэтому обложил его гигабайтом нод-модулей и выложил в гитхаб :)
https://freecode-academy.github.io/dev-project--car-game/
По мере того, как у меня будут проскакивать интересные наработки, я буду так же их оформлять и выкладывать, чтобы их мог любой поковырять и обсудить здесь. Так что если кому интересно, не стесняйтесь - играйтесь и задавайте вопросы, а так же предлагайте свои идеи.
Как публиковать свои проекты?
Довольно просто всё. Вы можете склонировать себе или вот такие готовые проекты (то есть в которых какая-то логика уже обыграна), или взять исходную заготовку @prisma-cms/nextjs. Код главной страницы находится здесь: src/pages/MainPage/index.tsx. Собственно, сюда можете и писать свой код. После этого коммитите свои изменения и выливаете в свой репозиторий в гитхаб (на счет того как работать с гитхабом в интернете очень много хороших и подробных статей, благо стартовый объем информации в этом небольшой). После того, как выльете, переходите в гитхабе во вкладку Actions (Действия). Дождитесь, пока выполнятся все шаги.
После этого, если вы выполнили все в первый раз, надо настроить публикацию в pages. Для этого перейдите в настройки проекта и укажите для него бранч gh-pages (этот бранч автоматически создастся, если деплой выполнился успешно). Не забудьте сохраниться.
Здесь же указана и ссылка на ваш сайт.
После того, как вы сохранитесь, запустится новая джоба, которая и опубликует ваш сайт.
Николай, привет!
Подскажи, пожалуйста, что делать, если в репе нет вкладки Actions (Действия)? Она где-то в настройках включается?
Дима, привет!
Зайди в настройки репы, может у тебя экшены отключены?
Николай ,пиривет!
Да, ровно в этом была проблема. Спасибо!
Запустилось) Разбираюсь дальше)
Всё-таки есть непонятка. Сайт собрал ветку gh-pages и, собственно, её и отобраджает.
Если правильно понимаю - это что-то тима "оболочки", в которой мой проект и должен отображаться.
Но отдаёт ощибки. В чем может быть проблема?
Кажется я догадываюсь в чем у тебя проблема. Посмотри на свои экшены:
У тебя CI выполнился только один раз в самом начале (коммит Create main.yml). Скорее всего в тот момент у тебя репозиторий все еще назывался nextjs. Тогда и собрались билды с префиксом nextjs в УРЛах. Потом ты себе сделал ветку по умолчанию dev и делал в ней всякое (на что срабатывали экшены pages build and deploy). Но прикол в том, что в моем экшене прописано выполнение только на ветке master
on:
push:
branches: [master]
pull_request:
branches: [master]
То есть даже когда ты переименовал свой репозиторий и что-то в нем делал, мой экшен не выполнялся. Сделай любой коммит в мастер-ветку и посмотри результат. Должен сначала мой экшен отработать, потом pages. И должно все заработать (учти, что может быть кеш скриптов и гитхаба, так что через минутку пробуй страницу и сбрось там кеш Ctrl+R).
Николай, првиет!
Всё равно не хочет запускаться(
Мой репо: https://github.com/linklib/pet1_nextjs
Ну, теперь у тебя пути верные сформировались.
Вот только показывает на странице ридми
Сходи перепроверь настройки Pages, скорее всего не та репа указана. Должно быть gh-pages.
Спасибо!
Здесь репа правильная теперь ( https://linklib.github.io/pet1_nextjs/ ), но все равно ругается: не видит api
WebSocket connection to 'wss://linklib.github.io/api/' failed: app-4c73dfb727d019c2.js:1
Не за что!
Не видит веб-сокет, потому что его тупо нет. Это же server-less приложение, github pages не предоставляет серверную логику. Просто я не сделал возможность отключать веб-сокет (точнее частично она есть, просто не доработал в отсутствие острой необходимости).
П.С. Теперь можешь на главной странице репозитория в быстрых настройках указать ссылку на свою страничку.
Всё равно не понятно, как быть дальше(
Отдаёт-то не то, что в ветке dev, а index.html в ветке gh-pages.
Должно же отдавать по дефолту комменты с призмы?
Дима, во-первых, оно и не должно отдавать то, что у тебя в ветке dev. С чего оно так делать должно? У тебя может быть там 100500 веток, оно должно для всех создать? Нет. Я выше писал, что оно срабатывает для ветки master. Соответственно, если ты хочешь, чтобы срабатывало для dev, то надо было бы подправить саму таску, прописав эту ветку туда. Но не надо этого делать. Правильней из дева затянуть изменения в мастер и всё.
Во-вторых, еще раз: это server-less приложение. Никакие server/index.ts и т.п. там не будут выполняться и не выполняются. Отдается именно index.html из ветки gh-pages и там уже отрабатывают скрипты. АПИ с внешнего сервера могут еще работать, а вот на уровне самого гитхаба не будет. И базы данных там нет. Так какие комменты по АПИ там ждешь? Если у тебя там нет ни базы, ни призмы, ничего.
Еще раз: эта заготовка придумана для того, чтобы сделать какие-то простейшие вещи. Не надо туда пытаться целый программный комплекс засунуть. Делать стоит то, что полностью может самостоятельно работать на фронте.