Поиск по сайту Поиск

Как бесплатно разместить статический веб-сайт на хостинг Firebase от Google

Если у вас есть простой статический веб-сайт, и вы хотите разместить его на бесплатном хостинге, эта статья будет вам полезна. В ней мы рассказали, как бесплатно разместить статический веб-сайт в Google Firebase, и рассмотрели все возможности и преимущества этого инструмента.

Как понять, что мой сайт статический 

Статический сайт — сайт, который состоит только из статичных (неизменяемых) страниц. Это означает, что внешний вид сайта и его наполнение всегда одинаковы для всех посетителей. И это вовсе не значит, что такой ресурс похож на сайты из 90-х — с голой структурой без дизайна и без вёрстки. Как и любой сайт, он может содержать изображения, текст, видео, аудио и другие элементы. Главное отличие лишь в том, что для отображения этих файлов и тегов достаточно HTML-разметки. 

Если пользователь хочет перейти на статический сайт, сервер сразу передает браузеру готовый HTML-файл ровно в том виде, в котором тот был создан разработчиком. Для динамических сайтов процесс устроен несколько иначе: когда сервер находит нужный файл, он сначала отправляет его интерпретатору, который применяет языки программирования (Java, PHP, ASP). Только после этого сайт отображается в браузере в том виде, в котором был задуман.

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

Преимущество статического сайта в том, что для него не нужно устанавливать и настраивать веб-сервер (например, Apache или NGINX). К тому же существуют провайдеры, которые предлагают бесплатный хостинг статических страниц для размещения проектов из облачных хранилищ. Один из таких ресурсов — Google Firebase.

Что такое Firebase от Google

Прежде чем говорить о хостинге, узнаем, что такое Firebase и откуда появилась эта платформа. 

Компания была основана в 2011 году Джеймсом Тэмплином и Эндрю Ли. Firebase начинали с поставки облачных технологий, в том числе, СУБД (систем управления базами данных) класса NoSQL. Такие базы позволяли не только хранить, но и синхронизировать данные между несколькими клиентами. 

Первым продуктом, который запустили Firebase, стала база данных Realtime. Её API (алгоритм по которому одна компьютерная программа взаимодействует с другой) позволяло интегрировать онлайн-чаты на сайты, а также синхронизировать данные приложений на Android, iOS и Web. В 2014 году Firebase выпустила новый продукт — хостинг. В том же году компанию поглотила корпорация Google. А уже в 2015-м интернет-гигант присоединил к проекту ещё и Divshot — платформу веб-хостинга для размещения статических веб-сайтов (HTML5). 

Сейчас Firebase от Google — это облачная платформа для создания мобильных приложений, которая отвечает трём основным потребностям разработчика: хранение информации, разработка и хостинг. С её помощью можно быстро набросать предварительную версию сайта и дизайн, развернуть проект на хостинге и сразу показать клиенту.

Преимущества программы:

  • скорость: быстрый деплой (развертывание программного обеспечения);
  • гибкость: работа на Python и JavaScript;
  • синхронизация: вход в систему с помощью учетной записи Google;
  • работа без настройки и подключения сервера: не придется создавать базы данных, прописывать API приема и получения данных — за серверную часть отвечает платформа. 

Благодаря этому не нужно отвлекаться на настройку и установку — можно сосредоточиться на качестве продукта. 

Недостатки платформы:

  • неполный функционал в бесплатной версии: Firebase — это не полностью бесплатный продукт. Если вы хотите использовать дополнительный функционал и мощные инструменты, придется выбрать платный тариф. Полный список возможностей на официальном сайте.

Сейчас Firebase входит в список лучших платформ для разработки приложений, которым доверяют разработчики по всему миру. С Firebase работают: The New York Times, Alibaba, Todoist, eBay Motors и другие компании. Если вы тоже хотите стать клиентом Firebase, переходите к размещению своего проекта.

Как бесплатно разместить сайт на Firebase-хостинге

Чтобы разместить статический сайт на хостинге Firebase, выполните три шага:

  1. Создайте новый проект в консоли Firebase.
  2. Разверните сайт через командную строку CLI Firebase.
  3. Привяжите домен к хостингу в консоли.

Шаг 1. Создайте новый проект в Firebase

  1. Авторизуйтесь в аккаунте Google или создайте новый аккаунт.
  2. Создайте новый проект. Для этого перейдите в консоль и нажмите Create a project
Как создать проект в Firebase
  1. Введите название проекта, поставьте галочку напротив «I accept the Firebase terms» и кликните Continue:
Как создать проект в Firebase
  1. Затем нажмите Continue:
  1. Выберите нужную страну из списка, поставьте галочку напротив «I accept the Google Analytics terms» и нажмите Create project:
Как создать проект в Firebase
  1. После загрузки кликните Continue:
Как создать проект в Firebase

Готово, вы создали новый проект:

Как создать проект в Firebase

Шаг 2. Разверните сайт на хостинге Firebase

  1. Установите на ПК интерфейс командной строки CLI Firebase. Для этого скачайте бинарный файл интерфейса из официальной инструкции
Как развернуть проект в Firebase
  1. После того, как файл скачается, перенесите его в папку с файлами вашего сайта на ПК.
  2. Запустите командную строку CLI Firebase из папки.
  3. В пункте «Allow Firebase to collect CLI usage and error reporting information?» введите Yes:
Как развернуть проект в Firebase

В интерфейсе появится следующее сообщение:

Как развернуть проект в Firebase

Затем вас автоматически перекинет на страницу входа в Google-аккаунт в браузере. Для перехода в приложение «Firebase CLI» выберите нужный аккаунт:

Как развернуть проект в Firebase
  1. Разрешите приложению «Firebase CLI» доступ к вашему Google-аккаунту:
Как развернуть проект в Firebase

После этого в браузере появится сообщение «Firebase CLI Login Successful» (Вход в Firebase CLI выполнен успешно), а в командной строке вы увидите следующий результат:

  1. Введите команду firebase init:
  1. Затем в строке «Are you ready to proceed?» введите Yes:
  1. Стрелкой вниз пролистайте до строки «Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys», нажмите на пробел, а затем кликните Enter
  1. Затем стрелкой вниз пролистайте до пункта «Use an existing project» и кликните Enter:
  1. После того как подгрузится информация о проекте, который вы создали на первом шаге, поэтапно введите команды:
  • для «What do you want to use as your public directory?» — public;
  • для «Сonfigure as a single-page app (rewrite all urls to /)» — No;
  • для «Set up automatic builds and deploys with GitHub?» — No;

Если всё пройдёт успешно, вы увидите сообщение «Firebase initialization complete!»:

  1. Введите команду firebase deploy и дождитесь результата. Если развертывание проекта пройдет успешно, в строке «Hosting URL» вы увидите адрес, который заканчивается на .web.app:

Готово, вы создали проект и развернули его. 

Также вы можете создать ещё один проект сразу через командную строку. Для этого введите в интерфейсе команду firebase logout и удалите бинарный файл из папки с проектом. Затем вновь скачайте файл и поместите в папку с новым проектом. Запустите CLI и выполните с 3 по 8 шаг второго этапа инструкции. На шаге 9 выберите вариант «Create a new project», задайте уникальный id, как показано в примере, и укажите название проекта. После этого выполните шаги 10 и 11.

Теперь посмотрим, как запустить сайт в интернете — без хостинга, к которому привязан домен, он не будет работать.

Шаг 3. Добавьте домен на хостинг Firebase 

Если у вас ещё нет домена, его можно купить в REG.RU. Наши инструкции помогут выбрать и зарегистрировать доменное имя.

  1. Перейдите в консоль Firebase и кликните Get started. Затем авторизуйтесь в своём аккаунте:
  1. Выберите проект, который вы создали на первом этапе:
  1. В разделе «Build» выберите Hosting:
  1. Нажмите Add custom domain:
  1. Введите домен, который хотите привязать к хостингу и кликните Continue:
  1. Скопируйте TXT-запись и добавьте её в ресурсные записи своего домена. Если ваш домен зарегистрирован в REG.RU, используйте инструкцию Настройка ресурсных записей в Личном кабинете

Обратите внимание: Дождитесь добавления TXT-записи в зону домена. В зависимости от вашего регистратора, это может занять от 15 минут до 24 часов. Проверить, добавилась ли запись, поможет утилита dig: укажите домен, выберите нужный тип записи и кликните Проверить.

После того, как TXT-запись добавится в зону, нажмите Verify, чтобы подтвердить домен:

  1. Скопируйте предложенный IP-адрес и добавьте А-запись в ресурсные записи вашего домена. Если ваш домен зарегистрирован в REG.RU, используйте инструкцию Настройка ресурсных записей в Личном кабинете

Обратите внимание

  • Перед добавлением новой записи удалите все старые А-записи.
  • Дождитесь добавления А-записи в зону домена. В зависимости от вашего регистратора, это может занять от 15 минут до 24 часов. Проверить, добавилась ли запись, поможет утилита dig: укажите домен, выберите нужный тип записи и кликните Проверить.

После того, как А-запись добавится в зону, нажмите Finish:

Готово, вы настроили бесплатный хостинг для домена. Дождитесь обновления DNS-серверов в течение 24 часов — после этого ваш сайт будет доступен в интернете.

Если вы захотите модифицировать проект, перейдите в папку с файлами на ПК и внесите изменения прямо в код. Затем запустите СLI и введите команду firebase deploy — изменения появятся на сайте в течение минуты.

⌘⌘⌘

Теперь вы понимаете, в чём преимущество Firebase-платформы, знаете, как разместить свой сайт на Google hosting, и в любой момент сможете приступить к разработке проекта. И не забывайте, что зарегистрировать красивый и лаконичный домен для проекта всегда можно в REG.RU.

Сильная презентация для инвесторов: от содержания до выступления

Презентация поможет структурировать данные и представить идею потенциальным инвесторам. Как сделать качественный документ – разбираемся вместе с основателем REC’s GROUP...
Read More

Дёшево и эффективно: как малому бизнесу продвигать свой сайт

Как выделиться среди конкурентов и получить внимание потенциальных клиентов. Бюджетные методы продвижения сайта – в этом обзоре.  
Read More

Как перевести бизнес в онлайн: 7 шагов

Пошаговая инструкция по переводу существующего бизнеса в онлайн: от создания сайта до начала продаж и запуска рекламы.
Read More

Кризис как точка роста для бизнеса

Когда бизнес развивается слабо, на помощь приходит… кризис. Рассказываем, как не испугаться перемен и открыть офис в другой стране, чем отличается построение бизнеса в Москве и Алматы.
Read More

Миллион на подтяжках для собак

Как придумать и монетизировать идею для бизнеса Нет смысла терять время и усложнять, когда бизнес-идеи витают в воздухе. Как понять...
Read More

Нейросети в помощь бизнесу: на что способен искусственный интеллект

Развитие нейросетей стало для россиян главным научным событием 2023 года. Бизнес активно внедряет искусственный интеллект, чтобы создавать контент, лучше понимать...
Read More

13 лайфхаков, которые погубят ваш бизнес

Разбираем «серые» способы работы и ошибки, которые точно развалят собственный бизнес.
Read More

Как привлечь инвестиции в мини-девелоперский проект с нуля

Предприниматели из Тюмени смогли стать девелоперами по загородной недвижимости без начального капитала и кредитов. Основатель компании «Финская улочка» Юлиу Пантя рассказывает,...
Read More

Не потерять ни клиента: топ-5 CRM-систем для предпринимателей

По мере роста бизнеса обрабатывать запросы клиентов вручную становится все сложнее. Информация о заказах часто теряется, а клиенты по несколько...
Read More

На чём нельзя экономить на старте бизнеса

Купили дешёвые материалы, а потом потеряли половину дохода из-за брака. Сэкономили на зарплате работников, а в итоге сорвали сроки и...
Read More