Как создать сайт блог на html firebase

Создание приложения на AngularJS и Firebase

В данной серии уроков мы задействуем AngularJS и Firebase в создании простого веб приложения. Это будет простая блог-платформа, в которой каждый сможет зарегистрироваться и опубликовать свой пост.

Уроки в проекте:

• Создание приложения на AngularJS и Firebase
• Создание приложения на AngularJS и Firebase: Часть 2
• Создание приложения на AngularJS и Firebase: Часть 3
• Создание приложения на AngularJS и Firebase: Часть 4
• Создание приложения на AngularJS и Firebase: Часть 5
• Создание приложения на AngularJS и Firebase: Часть 6

Как создать сайт блог на html firebase

Руководство по настройке и работе Firebase Dynamic links + Firebase dynamic links generator на базе google sheets

На данный момент для атрибуции установок мобильных приложений существуют два подхода:

Получение идентификатора устройства от рекламной сети (например idfa для ios) на котором пользователь кликнул на объявление

В существующих системах мобильной атрибуции используются либо оба из этих подходов, либо только связывание по идентификатору, но с появлением ios 14, для устройств apple возможность атрибутирования по idfa пропадет, и так или иначе, задача атрибуции установок будет решаться через fingerprint.

В этой статье, я рассмотрю возможность атрибуции и решению других задач на базе dynamic links от firebase. Так как firebase или app+web, позволяет также решить любые задачи по мобильной/веб аналитике и автоматизации маркетинга, dynamic links позволяет построить полноценную систему аналитики, без использования других сервисов.

Как работают dynamic links

Тут важно понимать, что dynamic link, это не просто ссылка, которая ведет пользователя в конкретное приложение, а конструктор, в который мы можем задавать свою логику работы. Ниже приведена схема возможной работы для ссылки ios.

Т.е. мы можем использовать одну ссылку и для ios и для android, и, при необходимости, задать условия открытия для различных версий операционных систем.

Установка в приложении

В этой части, все довольно просто, google составил прекрасную документацию, от себя, хочу добавить, что реализации есть и для Cordova, на которой в последнее время все больше приложений.

Базово, dynamic links позволяют просто открыть ваше приложение по ссылке с сохранением параметров utm_source, utm_medium и utm_campaign, но также, есть возможность, используя Universal links для ios или App links для android, открывать конкретный экран приложения. Особенно полезно, это будет для ремаркетинговых кампаний, включая пуш уведомления.

В консоли firebase добавляем домен, на котором будут отображаться наши ссылки:

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

Также, важный момент, чтобы вашими ссылками не воспользовались злоумышленники, нужно добавить в white list ваш домен (или домены) и ссылки на google play/ app store ваших приложений.

Создание dynamic links

Существует четыре способа создать ссылку:

— из firebase console. Этот способ подойдет, для создания тестовых или статичных ссылок. Из плюсов этого метода, при использовании этих ссылок у вас будет статистика по использованию прямо в консоли.

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

А также, используя rest api, вы можете сделать из этой длинной ссылки короткую.

— создать ссылку в приложении. Этот способ классно подойдёт для создания реферальной программы, где в utm_campaign, можно передать user_pseudo_id или user_id пользователя, который создает такую ссылку

Отладка ссылок

Если вы добавите к вашей ссылке параметр ?d=1 или &d=1, то увидите весь сценарий ее открытия, а также, возможные ошибки, если они есть.

Firebase dynamic links generator

Чтобы упросить создание ссылок через REST API, я написал небольшое расширение на google scripts, которое генерирует их автоматически.

Для установки, создайте новый google sheets, зайдите в раздел Tools -> Script Editor и вставьте код из этого репозитория: https://github.com/snegireff/firebase_dynamic_links_generator

В коде, необходимо поменять:

sheet.getRange(‘A2’).setValue — просто тестовый url (указать ваш домен вебсайта)
Firebase_url — ваш домен для коротких ссылок
Apn — The package name of the Android app
Afl — The link to open when the app isn’t installed (обычно урл на store android)
Ibi — The bundle ID of the iOS app to use to open the link.
Ifl — The link to open when the app isn’t installed. (обычно урл на store ios)
Api_key — можно взять в fibase console в разделе settings

После чего, вызывать функцию onOpen:

Как создать сайт с ведением блога?

Я фронтенд-разработчик с годовым стажем. Знаю HTML, CSS, JS, TS, Svelte (фреймворк для js), Rest API и еще несколько разных технологий для верстки и тестов.

Мне нужно создать знакомому дизайнеру сайт с тремя страницами: Главная, Блог, О себе.
Соответственно нужно что-то типа админки для ведения блога, но авторизация пользователей не нужна.

Проблема в том, что я всегда создавал только фронт, а затем отдавал его своему бэкендеру, который занимается и БД, и деплоем сайта на хостинг. Так что я в этом ничего не понимаю.

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

Пока что варианты такие:
1. Любой фреймворк + firebase
2. Фреймворк + python + sql
3. Написать на php, но я про него даже абстрактно ничего не знаю
4. Натянуть сайт на WordPress

• Вопрос задан 31 мар.
• 492 просмотра

7 комментариев

Простой 7 комментариев

Ключевые шаги по развертыванию веб-приложения с помощью хостинга Firebase

Firebase Hosting — это безопасная, быстрая и надежная услуга хостинга, предлагаемая Google разработчикам для развертывания веб-приложений. Хостинг Firebase, предназначенный для обеспечения высокопроизводительного хостинга для статических ресурсов, таких как файлы HTML, CSS и JavaScript , также поддерживает генерацию динамического контента с использованием бессерверных функций. Благодаря своей глобальной сети доставки контента (CDN) хостинг Firebase обеспечивает минимальную задержку для конечных пользователей вашего приложения.

Хостинг Firebase — отличный вариант для веб-разработчиков, которые ищут простое в использовании решение для развертывания, которое хорошо интегрируется с другими сервисами Firebase, такими как Firebase Functions и Firestore. Благодаря этой интеграции вы можете создавать мощные веб-приложения, которые используют возможности синхронизации данных в реальном времени, аутентификацию и бессерверные вычисления, предоставляемые Google.

Предварительные условия для развертывания веб-приложения с помощью хостинга Firebase

Прежде чем вы сможете развернуть веб-приложение с помощью хостинга Firebase, вам необходимо выполнить определенные предварительные условия:

• Аккаунт Firebase и активный проект Firebase.
• Веб-приложение, созданное с использованием простого HTML, CSS и JavaScript или современной веб-платформы, такой как React, Angular или Vue.js.
• Node.js и npm (менеджер пакетов Node.js), установленные на вашем компьютере разработки.
• Firebase CLI (интерфейс командной строки), установленный и настроенный на вашем компьютере разработки.

Если у вас нет учетной записи Firebase, зайдите на сайт Firebase, чтобы зарегистрироваться. Новичкам в веб-разработке рекомендуется изучить основы HTML, CSS и JavaScript или изучить популярные веб-фреймворки, такие как React, Vue.js или Angular.

Настройка хостинга Firebase

Выполнив предварительные условия, вы можете настроить хостинг Firebase для своего проекта. Следуй этим шагам:

1. Создайте учетную запись Firebase и войдите в консоль Firebase . Если вы еще этого не сделали, зарегистрируйте учетную запись Firebase и войдите в консоль Firebase. Создание учетной записи бесплатное, и вы можете воспользоваться бесплатным планом Spark с самого начала.
2. Создайте новый проект Firebase или выберите существующий . В консоли Firebase вы можете либо создать новый проект, либо выбрать существующий проект, чтобы включить хостинг Firebase.
3. Включите хостинг Firebase для вашего проекта . Перейдите на панель управления и нажмите вкладку «Хостинг» на боковой панели. Следуйте инструкциям, чтобы включить хостинг Firebase для вашего проекта.
4. Установите Firebase CLI на свой компьютер для разработки . Откройте терминал или командную строку на своем компьютере для разработки. Если вы еще этого не сделали, установите Firebase CLI глобально, выполнив следующую команду:

npm install -g firebase-tools

firebase login

firebase init hosting

На этом этапе вы успешно настроили хостинг Firebase для своего веб-приложения. Далее вам необходимо настроить приложение для развертывания, указав расположение статических ресурсов, настроив правила перезаписи и настроив все необходимые перенаправления. После выполнения этих шагов вы можете развернуть свое веб-приложение на хостинге Firebase.

Настройка вашего веб-приложения для развертывания

Прежде чем развертывать веб-приложение на хостинге Firebase, вам необходимо правильно его настроить. Этот процесс может различаться в зависимости от того, используете ли вы простую настройку HTML, CSS и JavaScript или современную веб-инфраструктуру, такую ​​​​как React, Angular или Vue.js. Независимо от вашей настройки, вам необходимо создать рабочую сборку вашего приложения, которая генерирует статические ресурсы, готовые к развертыванию.

Простая настройка HTML, CSS и JavaScript

Для простого веб-приложения, созданного с использованием только HTML, CSS и JavaScript, процесс сборки обычно не требуется. Тем не менее, важно организовать файлы в правильной структуре каталогов. Создайте public папку в каталоге вашего проекта и поместите в нее файлы HTML, CSS и JavaScript.

Попробуйте no-code платформу AppMaster

AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле

Веб-приложения React, Angular или Vue.js

Если вы используете современную веб-инфраструктуру, такую ​​как React, Angular или Vue.js, вам необходимо будет создать веб-приложение перед его развертыванием. Большинство современных веб-фреймворков имеют встроенную поддержку создания готовых к использованию статических ресурсов с помощью одной команды:

• Для приложений React используйте npm run build или yarn build
• Для приложений Angular используйте ng build —prod
• Для приложений Vue.js используйте npm run build или yarn build

Эти команды создадут папку build , dist или public папку с готовыми к использованию статическими ресурсами.

Настройка firebase.json

Далее вам необходимо настроить файл firebase.json в вашем проекте. Этот файл создается при инициализации хостинга Firebase в каталоге вашего проекта и определяет настройки развертывания хостинга Firebase. Наиболее важным параметром является указание общедоступного каталога, содержащего статические ресурсы вашего веб-приложения. В файле firebase.json установите public поле для папки, содержащей ваши статические ресурсы:

Если вы используете современную веб-платформу, такую ​​​​как React, Angular или Vue.js, обязательно установите в public поле соответствующую папку build или dist .

Развертывание вашего веб-приложения на хостинге Firebase

После настройки вашего веб-приложения для развертывания вы можете развернуть его на хостинге Firebase с помощью интерфейса командной строки Firebase. Следуй этим шагам:

1. В терминале перейдите в каталог проекта, содержащий файл firebase.json.
2. Запустите команду firebase deploy . Эта команда загрузит статические ресурсы вашего веб-приложения на хостинг Firebase.
3. После завершения развертывания интерфейс командной строки Firebase предоставит вам URL-адрес, по которому ваше веб-приложение теперь доступно и доступно. URL-адрес будет иметь формат https://.web.app и https://.firebaseapp.com .

Вот и все! Ваше веб-приложение теперь доступно на хостинге Firebase. Если вы настроили личный домен, ваше веб-приложение также будет доступно по URL-адресу вашего личного домена.

Управление и обновление вашего развернутого веб-приложения

После развертывания веб-приложения вам может потребоваться управлять им или обновлять его. Хостинг Firebase упрощает эти задачи.

Обновление вашего веб-приложения

Чтобы обновить развернутое веб-приложение, выполните следующие действия:

1. Внесите необходимые изменения в исходный код вашего веб-приложения.
2. Создайте обновленное веб-приложение, создав готовые к использованию статические ресурсы.
3. Снова запустите команду firebase deploy из каталога вашего проекта.

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

Откат к предыдущей версии

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

1. Перейдите в консоль Firebase и перейдите в раздел «Хостинг» вашего проекта.
2. Нажмите на вкладку «История», чтобы просмотреть историю развертываний.
3. Найдите версию, к которой вы хотите выполнить откат, и щелкните значок «. ».
4. В раскрывающемся меню выберите «Откатить к этой версии» и подтвердите откат.

Ваше веб-приложение будет откачено до выбранной версии.

Мониторинг использования веб-приложений

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

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

Плюсы и минусы использования хостинга Firebase для веб-приложений

Понимание преимуществ и недостатков хостинга Firebase имеет решающее значение для принятия обоснованного решения о том, использовать ли его для своего веб-приложения. Ниже мы обсудим основные плюсы и минусы, которые помогут вам определить, является ли хостинг Firebase правильным выбором для вашего проекта.

Плюсы хостинга Firebase

• Безопасный, быстрый и надежный хостинг. Хостинг Firebase предоставляется Google и обеспечивает безопасный, быстрый и надежный хостинг для вашего веб-приложения. Благодаря глобальной сети доставки контента (CDN) Google ваше приложение выиграет от сокращения задержек и повышения производительности.
• Простая установка и развертывание. Интерфейс командной строки Firebase делает настройку и развертывание вашего веб-приложения на хостинге Firebase быстрым и простым процессом. С помощью нескольких команд вы можете запустить свое веб-приложение онлайн.
• Поддержка индивидуальных доменов и автоматические SSL-сертификаты. Хостинг Firebase позволяет вам использовать собственные домены для вашего веб-приложения, обеспечивая профессиональный вид. Кроме того, Firebase Hosting заботится об управлении сертификатами SSL, автоматически обеспечивая вашему веб-приложению шифрование HTTPS.
• Интеграция с другими службами Firebase. Использование хостинга Firebase для вашего веб-приложения упрощает интеграцию других служб Firebase, таких как функции Firebase, Firestore или аутентификация. Эта интеграция особенно ценна для современных веб-приложений, созданных с использованием интерфейсных платформ, которые полагаются на бессерверную архитектуру для внутренней функциональности.

Попробуйте no-code платформу AppMaster

AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле

Минусы хостинга Firebase

• Ограниченные возможности рендеринга на стороне сервера (SSR). Хостинг Firebase в первую очередь ориентирован на размещение статических ресурсов, что означает, что он имеет ограниченную поддержку функций рендеринга на стороне сервера (SSR). Хотя вы можете использовать функции Firebase для базового SSR, это может быть не идеальным решением для веб-приложений с высокими требованиями к рендерингу на стороне сервера.
• Потенциальные затраты на хостинг. Хотя хостинг Firebase предлагает бесплатный базовый уровень, вам может потребоваться перейти на платные планы по мере роста вашего веб-приложения с точки зрения требований к хранилищу, передаче данных и другим ресурсам. Тщательно рассмотрите связанные с этим расходы на хостинг, прежде чем переходить на хостинг Firebase.
• Подходит не для всех веб-приложений. Хостинг Firebase может быть не лучшим выбором для веб-приложений со сложными требованиями на стороне сервера или для тех, которым нужны функции, не поддерживаемые набором сервисов Firebase. В таких случаях альтернативные решения хостинга могут быть более подходящими для вашего проекта.

AppMaster: разработка веб-приложений No-Code

В разработке веб-приложений AppMaster меняет правила игры благодаря своему инновационному no-code подходу. Этот мощный инструмент позволяет пользователям легко создавать серверные, веб- и мобильные приложения без обширных знаний в области кодирования.

Одной из отличительных особенностей AppMaster является его способность облегчать создание серверных приложений. Пользователи могут визуально проектировать модели данных, определять сложную бизнес-логику с помощью визуального конструктора BP, а также устанавливать REST API и endpoints WebSocket. Это позволяет быстро создавать серверные системы.

Для веб-приложений AppMaster позволяет создавать пользовательские интерфейсы с помощью простых действий drag-and-drop . Web BP Designer позволяет пользователям определять логику для каждого компонента, делая веб-приложения полностью интерактивными. Примечательно, что веб-бизнес-процессы выполняются в браузере пользователя, что повышает удобство работы пользователя.

AppMaster еще больше расширяет возможности управления проектами, создавая документацию Swagger (OpenAPI) для endpoints сервера и сценарии миграции схемы базы данных . При каждом изменении схемы AppMaster быстро создает новые наборы приложений менее чем за 30 секунд. Этот уникальный подход гарантирует отсутствие накопленного технического долга, связанного с проектом.

Помимо гибкого процесса разработки, приложения AppMaster предназначены для беспрепятственной работы с любой базой данных, совместимой с PostgreSQL , в качестве основного хранилища данных. Благодаря использованию скомпилированных серверных приложений без сохранения состояния, созданных с помощью Go, приложения AppMaster по своей сути являются масштабируемыми, удовлетворяя требованиям как корпоративных, так и высоконагруженных сценариев использования. Будущее разработки веб-приложений яркое благодаря возможностям AppMaster no-code .

Последние мысли

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

Тем не менее, важно взвесить все «за» и «против», изложенные в этой статье, чтобы определить, подходит ли хостинг Firebase для вашего конкретного случая использования. Учитывайте такие факторы, как потребности вашего веб-приложения в рендеринге на стороне сервера, потенциальные затраты на хостинг и совместимость с другими сервисами Firebase. Тщательно оценив эти факторы, вы сможете принять обоснованное решение и выбрать лучшее решение хостинга для вашего веб-приложения.

Не забудьте изучить AppMaster , мощную платформу no-code для создания серверных, веб- и мобильных приложений. AppMaster предлагает инструменты для визуального проектирования моделей данных, бизнес-процессов и пользовательских интерфейсов, что позволяет ускорить и снизить затраты на разработку. Его возможности создания веб-приложений также можно объединить с хостингом Firebase для получения эффективного и масштабируемого решения для развертывания ваших веб-приложений.

Каковы плюсы и минусы использования хостинга Firebase для веб-приложений?

Хостинг Firebase имеет несколько плюсов, таких как:

• Безопасный, быстрый и надежный хостинг от Google.
• Простая настройка и развертывание с помощью Firebase CLI.
• Поддержка индивидуальных доменов и автоматические сертификаты SSL
• Интеграция с другими сервисами Firebase, такими как Firebase Functions и Firestore.

Однако есть и некоторые минусы:

• Ограниченные возможности рендеринга на стороне сервера (SSR), поскольку хостинг Firebase в основном обрабатывает статические ресурсы.
• Потенциальные расходы на хостинг с платными планами в зависимости от использования
• Может подходить не для всех веб-приложений, особенно со сложными требованиями на стороне сервера.

В целом, хостинг Firebase — отличный выбор для веб-приложений, которые полагаются на современные интерфейсные платформы и бессерверные архитектуры, но может быть не идеальным для веб-приложений со сложными требованиями на стороне сервера.

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

Чтобы развернуть свое веб-приложение на хостинге Firebase, выполните следующие действия:

1. Создайте свое веб-приложение, создав готовые к использованию статические ресурсы.
2. Настройте файл firebase.json, указав общедоступный каталог, содержащий ваши встроенные веб-ресурсы, конфигурацию хостинга и все необходимые правила перенаправления или перезаписи.
3. Используйте команду Firebase CLI firebase deploy , чтобы загрузить ресурсы вашего веб-приложения на хостинг Firebase.

После завершения развертывания вы получите уникальный URL-адрес, по которому ваше веб-приложение будет доступно и доступно.

Могу ли я использовать собственные домены с хостингом Firebase?

Да, хостинг Firebase позволяет вам использовать собственные домены с размещенными веб-приложениями. Эта функция доступна даже в бесплатном плане Spark. Чтобы настроить личный домен с помощью хостинга Firebase, вам необходимо подтвердить право собственности на домен, настроить записи DNS и, наконец, подключить домен к вашему проекту Firebase.

Что такое хостинг Firebase?

Хостинг Firebase — это безопасная, быстрая и надежная услуга хостинга, предоставляемая Google. Он позволяет разработчикам развертывать веб-приложения, включая статические ресурсы, такие как файлы HTML, CSS и JavaScript, а также динамический контент, создаваемый бессерверными функциями.

Как настроить хостинг Firebase?

Чтобы настроить хостинг Firebase, выполните следующие действия:

1. Создайте учетную запись Firebase и войдите в консоль Firebase.
2. Создайте новый проект Firebase или выберите существующий.
3. Включите хостинг Firebase для вашего проекта
4. Установите Firebase CLI на свой компьютер разработки.
5. Войдите в Firebase CLI, используя свою учетную запись Google.
6. Инициализируйте хостинг Firebase в локальном каталоге вашего веб-приложения.

Выполнив эти шаги, вы будете готовы настроить свое веб-приложение для развертывания и развернуть его на хостинге Firebase.

Каковы предварительные условия для развертывания веб-приложения с помощью хостинга Firebase?

Чтобы развернуть веб-приложение с помощью хостинга Firebase, у вас должны быть следующие предварительные условия:

• Аккаунт Firebase и активный проект Firebase.
• Веб-приложение, созданное с использованием простого HTML, CSS и JavaScript или современной веб-инфраструктуры, такой как React, Angular или Vue.js.
• Node.js и npm (менеджер пакетов Node.js), установленные на вашем компьютере разработки.
• Firebase CLI (интерфейс командной строки), установленный и настроенный на вашем компьютере разработки.

Могу ли я использовать хостинг Firebase бесплатно?

Да, Firebase Hosting предлагает бесплатный уровень, называемый планом Spark, который предоставляет базовые функции хостинга, включая поддержку собственных доменов и сертификаты SSL. Однако он имеет некоторые ограничения с точки зрения возможностей хранения и передачи данных. Платные планы предлагают больше ресурсов и функций, таких как расширенные конфигурации CDN и более высокие ограничения на личный домен.

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

Чтобы обновить развернутое веб-приложение на хостинге Firebase, просто внесите необходимые изменения в исходный код вашего веб-приложения, пересоберите обновленную версию, а затем снова запустите команду firebase deploy . Хостинг Firebase автоматически обновит ваше веб-приложение новыми изменениями и обеспечит плавный переход для пользователей.