Связка Zennoposter+GitHub+Vercel - свой сайт на бесплатном хостинге за две с половиной минуты.

[vicos]

В начале текущего года возникла потребность создать свой собственный интернет-магазин с подключенной платежкой. Поскольку магазин создавался для себя, возникло естественное желание сделать это как можно дешевле. Особенно в долгосрочной перспективе не радовали постоянные расходы на оплату хостинга. Перебрав массу вариантов остановил свой выбор на https://vercel.com.

Для тех кто не слышал про такой ресурс, если коротко - платформа, которая позволяет развертывать веб-сервисы в облаке. С ее помощью разработчики размещают статические веб-сайты, которые развертываются мгновенно. Кроме того, многие используют данный ресурс для своего портфолио, размещая свои реализованные проекты на https://github.com/, чтобы потом показать заказчику свой уровень.

Про GitHub наверное знают если не все, то большинство. Ну и конечно же если Вы хотите себя продвинуть на рынке фриланса, то без своего аккаунта на GitHub не обойтись. Иначе как показать свой уровень разработчика.

Итак, со связкой определился. Вырисовалась такая схема:

Купил недорогой домен в зоне .com. Нашел на GitHub интересный шаблон интернет-магазина на Next.js, скачал его, и с помощью VS Code причесал его под свои потребности. Так как магазин ориентирован на буржнет, пришлось повозиться с поиском платежной системы которая работает с физлицами, да еще и принимает любую карту и PayPal. В конечном счет я нашел такой вариант, написал скрипт на Next.js и подключил платежку. Поскольку это не относиться к Zennoposter и уж тем более к конкурсу, кому интересно, пишите в личку - поделюсь.

Итак, в конечном счете схема срослась. Магазин работает.

Теперь к шаблону. Если откровенно, очень часто реализовав какую-то связку, со временем начинаешь забывать о ней. Я себе взял за правило использовать Zennoposter как архив успешно реализованных проектов, своего рода напоминалки. Иногда получаются неплохие шаблоны. Думаю и в этот раз получился не очень громоздкий но интересный по функционалу:

В конкретном случае, возникла идея зафиксировать связку в шаблоне. А по ходу реализации проснулся спортивный интерес как максимально ускорить процесс средствами Zennoposter. Результат впечатлил - 2 минуты 31 секунды - готовый сайт развернутый на хостинге с подключенным доменом. Свой домен, кстати, привязать не очень сложно. Перезапись DNS Vercel и привязка к проекту.
Кстати, если домен куплен на https://www.namecheap.com, то можно на месяц бесплатно подключить почту на https://privateemail.com.

Шаблон по рассылке с Privateemail также был реализован на Zennoposter. Довольно трастовый ресурс. Результат по инбоксу был очень хороший. Мне за месяц удалось по целевой аудитории разослаться и получить практически бесплатно первый трафик на магазин. Кстати, парсер целевой аудитории также писался на Zennoposter. Так что, можно с полной уверенностью сказать что с помощью Zennoposter был реализован проект от создания сайта до его продвижения.

Работу шаблона детально описывать не буду. Для удобства записал видео.
В настройках указываете свой никнейм, логин и пароль от аккаунта GitHub, придумываете название репозитория(оно должно быть уникальным, поскольку GitHub не допускает дубли).

В процессе работы над шаблоном родилось несколько интересных решений. Может кому-то пригодятся в других проектах.
Прежде всего это взаимодействие Zennoposter с GitHub посредством .bat файлов.

Клонирование репозитория с GitHub в директорию на компьютере.

@echo off
set REPO_URL=https://github.com/{-Variable.nik_name-}/{-Variable.repository-}.git
set CLONE_DIR=C:\_repos\{-Variable.repository-}

echo Cloning repository from %REPO_URL%...

git clone %REPO_URL% %CLONE_DIR%

echo Repository cloned successfully!

endlocal

Деплой проекта на GitHub с помощью файла deploy.bat

@echo off

setlocal

rem Set the repository URL
set repositoryUrl=https://github.com/{-Variable.nik_name-}/{-Variable.repository-}.git

rem Set the local project directory
set localDirectory=C:\_repos\{-Variable.repository-}
rem Navigate to the local project directory
cd "%localDirectory%"

rem Initialize a Git repository
git init

rem Add the GitHub repository as a remote
git remote add origin %repositoryUrl%

rem Add and commit files
git add .
git commit -m "Initial commit"

rem Push the code to GitHub
git push -u origin main

endlocal

Распаковка архива в формате ZIP:

@echo off
set zipFilePath=C:\_repos\{-Variable.name_template_download-}.zip
set extractFolder=C:\_repos\{-Variable.repository-}

if not exist "%zipFilePath%" (
    echo Zip file not found: %zipFilePath%
    exit /b 1
)

if not exist "%extractFolder%" (
    mkdir "%extractFolder%"
)

echo Extracting files...
powershell -command "Expand-Archive -Path '%zipFilePath%' -DestinationPath '%extractFolder%' -Force"

echo Extraction complete.

Ресурс для выбора шаблона сайта https://statichunt.com/nextjs-templates использовался для примера. Вы можете доработать шаблон, подобрав и заменив ту часть проекта которая подписана "Скачивание шаблона сайта". Для нас важно выйти на шаблон в GitHub, чтобы клонировать его.

Ну и в завершение, на вопрос тех кто дочитал статью до этой строчки - "А где я могу это применить?", отвечаю создайте свой интернет-магазин и торгуйте чем угодно. Скачайте кучу шаблонов, немного доработав их получите классный портфолио на GitHub, а впоследствии и заказы. Клонируйте, переделывайте сайты и торгуйте шаблонами. Ну или хотя бы используйте саму идею или фишки из шаблона.

В общем всем успеха. Дерзайте!

 

[noname007]

Thanks for sharing the templete

 

[vicos]

Thanks for sharing the templete

You are welcome!

 

[Konrod_m]

Огнище. Спасибо!

 

[vicos]

Огнище. Спасибо!

Пожалуйста. Удачи!

 

[strcn]

Хотел потестировать и не могу понять в чем дело: кубики действий на гитхабе не отрабатывают, впервые с таким сталкиваюсь, как будто не находит ни один элемент, но если сам по новой делаю кубики - то они начинают работать. В целом шаблон хороший, возьму в арсенал)

 

[vicos]

Хотел потестировать и не могу понять в чем дело: кубики действий на гитхабе не отрабатывают, впервые с таким сталкиваюсь, как будто не находит ни один элемент, но если сам по новой делаю кубики - то они начинают работать. В целом шаблон хороший, возьму в арсенал)

Кстати, да было такое и у меня. Причем, когда создал новый кубик, сравнил атрибуты элемента - они оказались одинаковыми. Но один кубик работает, а другой - нет. Такое иногда случалось и раньше. Объяснить почему так происходит не могу. Как правило, помогала замена кубика, или в крайнем случае писал свой код под данное действие. Если у кого-то еще такое повториться, пишите, попробую заменить на C#.

 

[Impala]

Спасибо большое за статью!
Поделитесь пожалуйста платежным шлюзом, о котором вы упомянули в начале )

 

[vicos]

Спасибо большое за статью!
Поделитесь пожалуйста платежным шлюзом, о котором вы упомянули в начале )

https://www.2checkout.com/

 

[AtlanticsSurfer]

https://www.2checkout.com/

Неужели работают с гражданами с СНГ или вы за рубежом находитесь?

 

[Alisher_rider]

У меня программа не работает

 

[vicos]

У меня программа не работает

А у меня работает