Наверняка многие слышали про github pages и что там можно размещать статические сайты (сгенерировал и залил туда). Но ведь хотелось бы, чтобы при этом была динамика, то есть можно было бы один раз залить код и наполнять его как на заправдашной ЦМСке, да еще и авторизация была, динамически подгружаемые данные и все такое. Верно? Вот и мне такое захотелось. Заходите под кат, покажу, что у меня получилось.
Для начала, как и обещал, покажу, что получилось, а потом детали поведаю (следите за сменой вкладок и адресами страниц).
Итак, что же здесь происходит? Недавно я писал про то, что пишу headless-cms под кодовым названием Prisma CMS.
Но как я и писал, изначально задумка была такова, что хотя сервер и фронт дружат друг с другом, все-таки они должны уметь жить своей жизнью и являются самостоятельными единицами. И вот если сервер следует современной тенденции headless-cms/api-first-cms, то фронт следует другой концепции — serverless. То есть если мы запускаем отдельно фронт, мы просто ему указываем endpoint API-сервера (совсем не обязательно на этом же домене), и данные будут подтягиваться по API (и будет работать авторизация).
Но и это еще не все. На оффсайте я писал статью про то, что на prisma-cms.com каждый может создать себе сайт на поддомене, который будет использовать единую базу данных, но можно индивидуально под себя оформить свой собственный сайт. Так вот, если вы скопируете себе репозиторий prisma-cms.github.io, вы получите свой собственный сайт, как это и показано в видеоролике.
Но можно и вовсе поднять свой собственный сервер и сайт. Вот здесь лежат исходники сайта: https://github.com/prisma-cms/prisma-cms.com. Разворачиваете на своем сервере и и запускаете. Если все работает, вот здесь указываете свой API endpoint и собираете командой PUBLIC_URL=./ yarn build
Все, сайт готов. Теперь, следуя официальной инструкции заливаете содержимое папки build на гитхаб и у вас свой собственный сайт с вашим API (можно одно API использовать для работы кучи отдельных статических сайтов, каждый из которых может быть со своим самостоятельным оформлением).
И я не зря использовал картинку с надписью Social coding. Как видно в видеоролике, все шаблоны, создаваемые на любом из сайтов, использующих единую базу данных, можно использовать в оформлении других сайтов. То есть в перспективе, если интерес будет достаточный, можно будет создать единый маркетплейс шаблонов и частей шаблонов для быстрого создания сайтов из готовых компонентов.
Всем приятного кодинга!
Комментарии (37)
andreymal
28.06.2019 11:46Ну врёт же заголовок, на Github Pages по-прежнему одна лишь статика, а для динамики всё равно нужно использовать сторонний сервер (api.prisma-cms.com)
Да и сайты, которые не работают без js — фи.
Fi1osof Автор
28.06.2019 12:55Вы почитайте про serverless. Например вот очень хорошая статья: habr.com/ru/company/selectel/blog/452266
Serverless не подразумевает вообще работу без сервера. Перечитайте ту статью и скажите в каком месте у меня несоответствие принципу serverless.andreymal
28.06.2019 13:07+1Я не сказал ни единого слова про несоответствие принципу serverless. Я сказал лишь про то, что в заголовке написано про динамические сайты именно на Github Pages, а по факту вся динамика делается и хранится где-то на стороне. Заголовок врёт. С таким же успехом можно было бы всю статику залить на любой другой хостинг, позволяющий раздать статику — зачем здесь нужен Github Pages и зачем делать на него акцент?
Кликбейт и реклама сервиса.
Fi1osof Автор
28.06.2019 13:11А при использовании классических ЦМС вся логика на самом сервере хранится (который, кстати, может тоже подтягивать данные с других источников). От этого сайты на ЦМС тоже надо называть нединамическими? prisma-cms.github.io на Github Pages? Да, там. Ссылки в меню работают? Работают. Данные динамические выводятся? Выводятся. Так чем же это не динамический сайи на Github Pages?
andreymal
28.06.2019 13:18Тем, что вся динамика делается в браузере и на стороннем сервере, а на самом Github Pages просто лежит кучка файлов с полным отсутствием динамики на стороне самого Github Pages.
Fi1osof Автор
28.06.2019 13:23Еще раз читаем заголовок «Динамические serverless сайты» и перечитываем статью habr.com/ru/company/selectel/blog/452266
Динамика на стороне браузера — это нормально для serverless-сайтов, и по-другому с ними быть не может.
И на стороне стороннего сервера практически нет логики в плане отображения. Вся логика выполняется на стороне браузера, в том числе навигация. По API приходят только сырые данные. Еще раз: это нормально для serverless сайтов, хотя понимаю, что многим это вообще не понятно.andreymal
28.06.2019 13:26Я не сказал ни единого слова про то, что это не нормально. Я сказал про то, что в заголовке указан именно Github Pages. Не браузер, не сторонний сервер, а именно Github Pages! На нём нет абсолютно никакой динамики! Зачем упоминать статический хостинг рядом со словом «динамический»? Я буду продолжать считать это кликбейтом.
Fi1osof Автор
28.06.2019 14:16Затем, что статья о том и говорит, что статический хостинг можно использовать для динамических сайтов. Можно много оговорок прописать, но суть остается сутью — здесь динамический сайт. И на мой взгляд, это интересный эксперимент.
А вы можете продолжать считать это чем угодно, недовольный хабрачитатель, не написавший ни одной полезной/бесполезной статьи, не поделившийся никаким интеллектуальным трудом.andreymal
28.06.2019 14:21Статический хостинг сам по себе НЕЛЬЗЯ использовать для динамических сайтов — вы сами же пишете, что данные хранятся на стороннем сервере. И, умолчав о необходимости наличия стороннего сервера в заголовке, вы сделали кликбейт. Я, увидев в заголовке Github Pages, подумал, что или случилось чудо и туда завезли какую-то динамику, или автор несёт пургу. Оказалось второе.
Если я не поделился никаким интеллектуальным трудом на Хабре, это не значит, что я не поделился никаким интеллектуальным трудом вообще нигде и никогда.
Fi1osof Автор
28.06.2019 14:44Обновил заголовок, для таких, как вы, кто не в тренде, и не знает, что serverless подразумевает использование стороннего API-сервера.
Еще, для таких как вы, кто не читает ни исходного кода, ни статьи, а только заголовки читает, дополнительно скажу, что для этого можно использовать любой статический хостинг. Более того, такой сайт можно даже на флешку заливать, или даже в блокчейн (используя IPFS). habr.com/ru/post/268275
Более я вам ничего не расскажу. Учитесь читать далее заголовков. Я в заголовке ни в чем не обманул.
Если я не поделился никаким интеллектуальным трудом на Хабре, это не значит, что я не поделился никаким интеллектуальным трудом вообще нигде и никогда.
Мы этого не знаем.andreymal
28.06.2019 14:47для этого можно использовать любой статический хостинг
То, что я написал ровно то же самое семью комментариями выше, разумеется, тактично забудем. Действительно, лучше бы вам больше ничего мне не рассказывать, если вы мои комментарии всё равно не читаете.
Fi1osof Автор
28.06.2019 14:48Пример был на Github Pages, его я и упомянул. В чем я вас обманул? Или вы не видите сайта на prisma-cms.github.io?
andreymal
28.06.2019 14:53Я не вижу данных на prisma-cms.github.io — я открыл сетевой монитор и увидел, что данные идут с api.prisma-cms.com. Вы обманули меня в том, что не упомянули в заголовке наличие стороннего API-сервера, но зачем-то упомянули Github Pages — я подумал, что вы сделали чудо и смогли превратить Github Pages в этот самый API-сервер. Что, быть может, я пропустил анонс какого-нибудь крупного обновления Github Pages. При прочтении поста оказалось, что ничего подобного. Что, впрочем, неудивительно для статического хостинга.
Fi1osof Автор
28.06.2019 14:571. Извините, что не сказал, что браузер надо использовать, интернет оплатить и т.п. А то на пути Пользовательский запрос -> Серверный ответ так много составляющих… Ведь вы и здесь могли ожидать чего-то нового, а нового ничего нет.
2. Если я не оправдал ваших ожиданий, это не значит, что я вас пытался обмануть. Вы сами себе придумали ожидания, и не подтвердились ваши ожидания. Я-то тут при чем?
3. Говорите ничего удивительного? Покажите-ка хоть пару дивжков, а лучше репозиториев, которые я сейчас вот на гитхабе склонирую и сразу могу наполнить сайт информацией и использовать имеющуюся. Ладно, хотя бы один. Кстати, может у вас в заначке есть, но вы просто не поделились?andreymal
28.06.2019 15:10Я-то тут при чем?
Вы сделали кликбейт, поставив рядом «динамические» и «Github Pages». А стоило бы написать даже просто «с хранением статики на Github Pages» — и всё, я бы вообще в пост не заглянул.
сразу могу наполнить сайт информацией
Вы можете наполнить Github Pages информацией вообще без всяких движков и сторонних API-серверов. Просто редактируете html-странички и кладёте данные в репозиторий. Можно подключить Jekyll по вкусу. Можно это делать вообще не выходя за пределы сайта github.com, благо редакторы текста в веб-интерфейсе присутствуют.
Но это получится статический сайт. Если же вы хотите какое-то динамическое взаимодействие с пользователем (лайки, комменты и так далее) — вам неизбежно придётся откуда-то доставать сервер. То, что вы предоставили пользователям сервис api.prisma-cms.com для бесплатного использования — не является чем-то удивительным.
Fi1osof Автор
28.06.2019 16:56Но это получится статический сайт.
Именно так. Получится статика. А я говорю про динамический сайт.
То, что вы предоставили пользователям сервис api.prisma-cms.com для бесплатного использования — не является чем-то удивительным.
Плюс к этому я сказал, что можно поднять и собственный сервер для этого, и никак не быть привязанным к prisma-cms.com. Не удивляет? Удивите сами — предоставьте что-нибудь подобное, а еще в открытый доступ выложите.andreymal
28.06.2019 16:57Подобное — это поднять свой собственный сервер? Да хоть вордпресс берите, лол.
Fi1osof Автор
28.06.2019 17:03Поднимите, попробуйте. И завяжите с фронтом. Через час сможете продемонстрировать полученный вариант? И добавьте еще в базу данных несколько сущностей (Здания, Машины, связи что кому принадлежит). И дайте возможность создавать/редактировать это все. И не забудьте на Github Pages выложить как serverless сайт.
andreymal
28.06.2019 17:06Этот комментарий намекает на то, что вы просто создали ещё одну CMS, по вашему мнению удобную для пользователя, и приправили её модным словечком serverless. Я не имею ничего против, только, пожалуйста, называть это чем-то удивительным не надо. И без вас существуют сотни самых разных CMS, вордпресс — лишь одна из них.
И Github Pages приплетать тоже не надо.
Fi1osof Автор
28.06.2019 17:08ОК. Продолжайте юзать вордпресс.
andreymal
28.06.2019 17:13За меня не волнйтесь, я делаю себе сайты на Django/Flask/Sanic, держу их на собственном VDS и они способны работать при отключенном js без всяких там serverless :) А некоторые знакомые, которые программировать не умеют, и так понаходили себе CMS на свой вкус — как со своим сервером/хостингом (тот же вордпресс), так и на сторонних сервисах (Tilda, например). Если вы тоже изобрели что-то удобное — хорошо, но не удивительно.
mikechips
30.06.2019 10:57Что-то не понимаю, чего вы агрессируете, ибо претензия дельная.
Суть в том, что по заголовку ожидался динамический serverless-сайт, где вся серверная логика тоже будет на стороне GH Pages, т.е. не нужен будет отдельный хостинг со своим же API, ну или с вашим облачным. Ещё раз: по заголовку!
И да, ваше исправление заголовка — скорее колкость, чем дополнение. Суть не в том, что serverless использует сторонние API, а в том, что в вашем случае этот API как раз таки не сторонний, а тот, который нужно развернуть на собственном сервере. А это уже убивает нужду в GH Pages как фронтенде, ибо всё равно все запросы уходят на не-serverless платформу (разве что GH как прокладка, которая будет со 100% аптаймом).
MetaDone
28.06.2019 15:40И чем это все интереснее схемы когда фронтэнд на vue.js а сервер на любой удобной системе на стороне? быстро, просто, не зависим от noname-вендора без комьюнити. правильно комментатор выше говорил — чтоб замутить что-то аналогичное не обязательно ставить ваше творение, справится почти все что угодно, например одна из первых ссылок в гугле — ru.vuejs.org/v2/cookbook/serverless-blog.html
Fi1osof Автор
28.06.2019 17:01справится почти все что угодно, например одна из первых ссылок в гугле — ru.vuejs.org/v2/cookbook/serverless-blog.html
Справится ли? Перечитайте статью, на которую вы сослались.
Установите ваш токен API:
var butter = require('buttercms')('your_api_token');
С использованием ES6:
import Butter from 'buttercms';
const butter = Butter('your_api_token');
Вам не кажется, что это программирование на стороне сервера. А теперь пересмотрите хотя бы первые 3 минуты ролика, представленного в моей статье: там вы сервера не касаетесь вообще. Все выполняется на стороне фронта, без какого-либо программирования.
И больше ответов на эти ваши вопросы вот здесь: habr.com/ru/post/448982MetaDone
28.06.2019 17:16Вам не кажется, что это программирование на стороне сервера. А теперь пересмотрите хотя бы первые 3 минуты ролика, представленного в моей статье: там вы сервера не касаетесь вообще
прописать ключ не так сложно
ну а чтоб сделать как у вас ваша серверная часть тоже понадобится, и ее тоже нужно будет настроить. и без нормальной документации, как у vue.js и любой serverless-cms, это будет явно сложнее. а делать копию вашего сайта — не знаю кому это потребуется.
В статье, на которую вы приводите ссылку, я уже оставлял комментарий что ваше это будет иметь практическую ценность если человек 1 на проект и проект небольшой. Но даже в таком случае инструмент с бОльшим сообществом будет эффективнее.Fi1osof Автор
28.06.2019 17:24Многое крупное начиналось с малого. vue.js тоже не сразу мир покорил, а начинался с одного человека. Я не претендую на захват мира, но какую-то нишу в любом случае предполагаю занять.
А конкретно эта статья была просто как демонстрация идеи, возможностей, которых я не вижу в других готовых решениях, хотя много всего пересмотрел и продолжаю смотреть.
Приведу еще один пример: habr.com/ru/post/126733
Когда я писал про это в 2011-ом году, тоже было много скепсиса и много минусов. А что произошло спустя 3 года и что сейчас есть? Моя консоль стоит чуть ли не в каждом сайте, работающем на MODX Revo. Такие как вы, совсем не дальновидны. Вы ищете уже готовый продукт сейчас, но не смотрите просто в идеи. А потом когда идея дорабатывается до продукта, вы встаете в первые ряды и кричите «Это круто!».
Ладно, надоело с вами спорить. На конструктивные вопросы типа Как отвечать буду. На вопросы Зачем и на утверждения Не надо, не буду. Оставайтесь при своем мнении. А я дальше работать пойду.MetaDone
28.06.2019 17:52конкретно эта статья была просто как демонстрация идеи, возможностей, которых я не вижу в других готовых решениях, хотя много всего пересмотрел и продолжаю смотреть.
конечно, свой велосипед понятнее, но пока он не превосходит в удобстве/функциональности существующие решения, да и еще не имеет документации — использовать такое смысла нет при наличии годных альтернатив. Опять же, приемлемо использовать непопулярную библиотеку для узкой задачи если она покрывает 90% задачи и альтернатив особо нет. Ваш случай не такой. Ну и наименование — «prisma-cms» — очень удачное. напоминает историю про название javascript — маркетинг путем присасывания к имени готового стороннего продукта.
Приведу еще один пример: habr.com/ru/post/126733
Когда я писал про это в 2011-ом году, тоже было много скепсиса и много минусов.
ну так и правильно собрала — делать eval() на серваке, за такое руки отрывать надо. а если эта cms поощряет такое — в мусор ее.
Такие как вы, совсем не дальновидны. Вы ищете уже готовый продукт сейчас, но не смотрите просто в идеи
да вам, сударь, манеры общения в приличном обществе неведомы. негоже незнакомым людям хамить. ну и выводы надо делать на основе фактов, а не своих домыслов. подумайте над своей манерой общения, а то с таким подходом большого дружного сообщества вокруг вашего творения не сформируется.Fi1osof Автор
28.06.2019 18:04«prisma-cms» — очень удачное. напоминает историю про название javascript — маркетинг путем присасывания к имени готового стороннего продукта.
prisma-cms называется, потому что во многом основана на www.prisma.io
Кстати, я им об этом говорил, они не возражали www.prisma.io/forum/t/prisma-cms-boilerplate/4604
И какой-то посильный вклад в призму я тоже делаю. github.com/prisma/prisma/issues?utf8=%E2%9C%93&q=is%3Aissue+author%3AFi1osof
ну так и правильно собрала — делать eval() на серваке, за такое руки отрывать надо. а если эта cms поощряет такое — в мусор ее.
Еще один… Этот код выполняется только от имени суперадмина. Если вы проникли под аккаунтом суперадмина в админскую панел, то сайт вам итак доступен дальше некуда.
да вам, сударь, манеры общения в приличном обществе неведомы. негоже незнакомым людям хамить. ну и выводы надо делать на основе фактов, а не своих домыслов. подумайте над своей манерой общения, а то с таким подходом большого дружного сообщества вокруг вашего творения не сформируется.
А мне и не надо большое дружное сообщество. Мне достаточно несколько единомышленников, чем вот такое большинство. Вы же в большинстве своем паразиты, паразитирующие на чужих разработках, так еще и в душу плюете, давая свою «экспертную» оценку. При этом не выкладываете никаких своих трудов. И здесь таких реально большинство. Да вы даже песочницу не проходили, вас сюда пригласили (опять-таки, спаразитировали на других). Я дважды песочницу прошел. И вы думаете, что я вас хочу видеть в числе своего сообщества? Не, даже не надейтесь. И не льстите себе.MetaDone
28.06.2019 18:39фига себе вас как бомбит то)
Еще один… Этот код выполняется только от имени суперадмина. Если вы проникли под аккаунтом суперадмина в админскую панел, то сайт вам итак доступен дальше некуда.
по хорошему в cms в таком случае нужно обеспечить чтоб максимум можно было испортить контент, который восстановится. соответственно, cms идет в мусор с таким подходом
А мне и не надо большое дружное сообщество. Мне достаточно несколько единомышленников, чем вот такое большинство. Вы же в большинстве своем паразиты, паразитирующие на чужих разработках, так еще и в душу плюете, давая свою «экспертную» оценку. При этом не выкладываете никаких своих трудов
оказывается, квалификация определяется количеством своих никому не нужных велосипедов. ок, когда буду проводить собеседования буду это учитывать. вы может быть не в курсе, но есть такое понятие «соглашение о неразглашении». и многие его подписывают, что не дает свои интересные решения выкладывать в общий доступ т.к. это собственность фирмы.
Да вы даже песочницу не проходили, вас сюда пригласили
говорю же, выводы нужно делать на основе фактов, а не на основе своих больных фантазий. Песочницу я прошел, но после статья показалась мне унылой и я ее скрыл
И вы думаете, что я вас хочу видеть в числе своего сообщества? Не, даже не надейтесь. И не льстите себе.
да мне, собственно, пофиг, я все равно сайты не пишу, а ваше творение для моих задач не подходит. думаю, я спокойно переживу то что вы не пустите меня в свое сообщество. ну и реально, подумайте над своей манерой общения. вы грубите на ровном месте и не воспринимаете критику, еще и на личности переходите. так даже немногочисленных единомышленников отпугнетеFi1osof Автор
28.06.2019 18:51Не надо было скрывать. Я бы хоть мог на основании чего-то конкретного оценить. А так буду домыслы лепить.
Остальное все без комментариев. Неконструктивный холивар. Я свое отношение выразил, вы оставайтесь при своем мнении.
Диалог закрыт.MetaDone
28.06.2019 18:58ваша оценка нужна мне как ежу футболка, а свою статью я скрыл потому что она объективно унылая. да и было это 6 лет назад и то что в то время казалось открытием и чудо-решением, на самом деле — всем известная унылая субстанция. ну а так — творите, не грубите и удачи, посмотрим что из этого всего выйдет
antoman
29.06.2019 15:03+1Странно, что у всех так бомбит от того, что маркетинговое "serverless" на самом деле не serverless.
А GitHub не будет против, что все будут хостить статику? Обьёмы нецелевого трафика и всё такое.Fi1osof Автор
29.06.2019 15:09Не думаю. Программного кода в основных репозиториях у них лежит наверняка во многие разы больше.
mikechips
30.06.2019 11:03Люди из мира точных наук любят точные выражения и всегда воспламеняются от маркетинговых спекуляций, ничего особо странного нет)
Думаю, что они не заметят на фоне той помойки, которая естественным образом творится на любой бесплатной площадке. А если и заметят — ничего особо критического не произойдёт. К тому "целевой" — понятие относительное. Сайт как-то связан с репозиторием по смыслу? Значит годен!
mikechips
Думал, внутри будут примеры кода и какие-то свежие идеи, а по факту какая-то скрытая реклама Вашей CMS получилась. Упс...
Fi1osof Автор
В статье написано:
Большая жирная ссылка на другую статью на хабре, в которой не мало кода и идей. Мало? ОК, еще одна статья на хабре: habr.com/ru/post/457270
При наличии уже двух подробных статей какой смысл еще повторно расписывать техническую часть?
А про скрытую рекламу: что я прорекламировал? Какой-то платный сервис или что? Я довольно много времени пилю движок и даю его в открытый доступ, пытаюсь показать как его использовать, при этом я точно ни копейки не заработаю, потому что все бесплатное. Это реклама? Где грань между «рассказать другим» и «прорекламировать».
Кстати, если что-то не понятно, то можно спросить, а не тупо минус ставить. А то «Нифига не понял! Но очень интересно!».
mikechips
Минусов не ставил (если эта реплика была в мой адрес), просто не понял немного, что происходит.
По поводу грани — тут лучше всего заходит та реклама, которая заодно немного образовательная. Например, раскрывает какие-то необычные решения продукта и т.п.