Найти в Дзене

Как создать и развернуть сайт с 0 и за бесплатно?

Уже научился верстать сайты и теперь хочешь показать своё мастерство всему миру? Но хостинг стоит денег, да и бесплатный пробный период не всем подходит.

Интернет полон и бесплатных вариантов. Начнём с самого простого, есть статический сайт, только CSS/HTML/JS. Где его можно развернуть? Например на Github или Gitlab pages.

Для этого достаточно завести аккаунт Github или Gitlab, создать репозиторий, добавить туда свой сайт и готово, публикация в 2 клика.

Полная подробная инструкция на русском по созданию и деплою сайта находится тут.

Плюсы:

+ Бесплатно

+ Удобно, сайт обновится сразу после обновления исходников

+ Бесплатный поддомен

+ Быстрая скорость загрузки

+ Есть готовые макеты сайтов

+ Можно подключить свой домен

+ Бесплатный SSL

+ Не надо указывать кредитную карту

Минусы

— Только статические сайты, никакого React/View/Angular и SPA

— Никакого бэка и базы данных

— В поисковики он будет долго идти, вручную через вебмасте не подключить

Минусы существенные, верно?

Хочется большей гибкости, простоты и мощности, зачем себя чем-то ограничивать? Что же делать? Например, обратиться к netlify.

-2

Отличный сервис, не требует никаких карт. Гибкая настройка сайта, переадресации, дружит с Яндекс/Гугл вебмастером, поддерживае даже SPA.

Что же нужно сделать? Зарегистрироваться, связать репозиторий с сайтом на Github, указать нужный репозиторий. Готово! Подробное описание тут (на английском, но есть видео и скрины каждой стадии. поэтому не надо бояться).

Бесплатный аккаунт имеет огромны возможности, а платные варианты позволят пару кликов добавить формы регистрации, метрики, форму обратной связи и многое другое.

Плюсы:

+ Бесплатно

+ Удобно, сайт обновится сразу после обновления исходников

+ Бесплатный поддомен

+ Быстрая скорость загрузки

+ Можно подключить свой домен

+ Бесплатный SSL

+ Не надо указывать кредитную карту

+ React/View/Angular и SPA и простой бэк

+ Оооочень гибкая настройка, редиректы

+ Множество плагинов, расширенные возможности для платных аккаунтов

Минусы

— Никакого бэка и базы данных

— Бесплатный вариант имеет ограничения по трафику и размеру сайта + кол-во деплоев для бэка. Для блога или простого магазина хватит.

Уже намного лучше, но как же бэк и базы данных??

Самый старый и проверенный сервис — heroku!

Бесплатный план даёт огромные воможности и 500 часов ежемесячно для работы вашего сайта, бесплатное хранилище данных, 2 потока и 512Мб, можно увеличить до 1000 часов просто указав свою кредитную карту (ничего не спишется). Разместить можно и фронт и бэк.

НО! Лучше совместить фронт на netlify и бэк на heroku. Почему? Потому что heroku даёт возможность подключения SLL только при использовании платного плана.

Как развернуть там бэк? Зарегистрироваться, создать приложение, подключить аккаунт Github, выбрать репозиторий с исходниками и нажать кнопку deploy. Не забудь указать нужный build pack для вашего языка.

Пример деплоя бота на heroku.

Но там же сайт работает только 30 минут на бесплатном плане! Если в течении 30 минут к серверу не поступают запросы — сервер просто засыпает и при новом обращении будет заново запускаться и долго грузиться!

Да, есть и такой нюанс, что же делать? Что-то должно обращаться к сайту и не давать ему засыпать каждые 30 минут. Что же делать…

Мониторинг сайтов! Два в одном! Мы всегда знаем доступен ли наш сервер на heroku и наш сервер не будет засупать, так как его будут постоянно пинговать. UptimeRobot!

-3

Бесплатный план позволит настроить монитор для вашего сервиса, который каждые 5 минут (время можно выбрать, бесплатный аккаунт даёт возможность пинга не меньше, чем через 5 минут, больше — можно).

Как настроить? Создаём аккаунт, создаём монитор, указываем наш сервис на heroku, устанавливаем таминг. Готово!

А что с данными? heroku же не позволит вечно их хранить и БД там не особо вместительные.

Firebase, как вариант. Отличное решение от Google. Ограничено по трафику, всего 1GB места, но хатит более чем для простых сайтов. Нужно больше — можно перейти на платный аккаунт.

-4

Мне мало 1GB! Я хочу больше! И бесплатно!

Ок, ок. Есть ещё 2 прекрасных решения.

AWS — даёт бесплатные вчислительные мощности EC2 и облачные хранилища ES3 на год! Для регистрации потребуется указать кредитную карту и иметь на неё дпозит в 1$. Его спишут и тут же вернут.

-5

EC2 позолит создать виртуальную машину с лимитом по трафику и выислительным мощностям. Лимитов хватит для простого блога или тестового сайта. В пару кликов создаётся виртуальная машина с выбранной ОС. Дальше можно использовать как просто хранилище, развернув там базу данных или полностью развернув бэк. Так же доступен широкий выбор баз данных. Размер диска виртуальной машины 40GB, база данных на EC2 20 GB.

Второй вариант — Azure. Тоже требует привязки карты, правила аналогичные, 1$, спишут и вернут. Что дальше? Выбираем любое удобное хранилище и вперёд! Так же можем развернут у бэк, как серверное так и безсерверное решение (Azure Functions).

-6

Плюсы — бесплатный план даст достаточно ресурсов для простого сайта. Множесто вспомогательных инструментов. Что будет, когда пройдёт год бесплатного периода? Если не выходить за рамки, то бесплатные ресурсы так и будут доступны, если не входить за лимиты. В первый год испоьзования при выборе бесплатного плана — на аккаунт зачисляются средства, позволяющие воспользоваться всеми премиальными фишками облака!

Облака — отличный вариант для развёртывания сайта, но у них множество ограничений по ресурсам: трафик, процессорное время, место на жёстком диске и т.д.

Комбинируйте рассмотренные варианты, для минимизации расходов ресурсов на бесплатном плане.