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

Как бесплатно разместить статический веб-сайт на хостинг 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.

Как запустить сеть придорожных кафе с АЗС на Севере

Запускать бизнес в регионе — значит столкнуться со слабым сервисом у поставщиков и подрядчиков, бороться за каждого квалифицированного сотрудника. Заниматься...
Read More

Собственный магазин или маркетплейс: где выгоднее продавать?

58% всех интернет-заказов в 2023 году совершили на маркетплейсах.  Популярность маркетплейсов активно растет. При этом рост количества продавцов снижается: в...
Read More

SEO для бизнеса: поисковики — тоже реклама

Что такое SEO-оптимизация, как она приносит выгоду собственному бизнесу и как ее настроить — в блоге Рег.ру
Read More

Какие показатели нужно отслеживать новому бизнесу? 10 главных метрик

Полный список финансовых показателей, которые нужно учитывать при запуске и развитии бизнеса. С формулами, комментариями и понятными примерами расчета. (далее…)
Read More

Драма Microsoft и Apple: от вражды до сотрудничества

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

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

В бизнесе нет страховки от ошибок — любой промах отражается на репутации. И иногда исправить ситуацию может только ребрендинг и...
Read More

Запускаем email-рассылку: как не попасть в спам при отправке писем

В статье рассказываем, почему рассылки попадают в спам, и делимся советами, как сделать так, чтобы письма всегда доставлялись до адресатов....
Read More

Ключ к успешному продвижению: что такое SMM-стратегия и как ее составить

Разберем, что такое SMM-стратегия, зачем она нужна и как эффективно использовать социальные сети для решения бизнес-задач. (далее…)
Read More

Новогодний маркетинг: лучшие приемы праздничной рекламы

Для бизнеса Новый год и Рождество — время всплеска продаж и увеличения прибыли. А способствуют этому всем знакомые персонажи: от...
Read More

Россияне предпочитают .ru вместо .com, а Дональд Трамп проиграл доменный спор за mar-a-lago.com

Рассказываем самые интересные новости доменного мира. (далее…)
Read More