Блог на Nuxt Content и firebase

На днях пришло уведомление о том, что необходимо продлить хостинг на котором находится мой блог. Продлевать не стал, потому что параллельно хостингу использую VPS и со временем хотел перевести блог на него. Только из-за блога не хотелось устанавливать Wordpress который тянул за собой кучу дополнительных пакетов (Apache/NginX, MySQL и PHP) на VPS. Да и от блога требуется минимум, поэтому решил написать его сам использовать Nuxt с модулем Content. Модуль Content в Nuxt это headless CMS основанной на git файловой системе, которая предоставляет мощные функции для создания блогов, документации или просто добавления контента на обычный сайт. Модуль может анализировать markdown, csv, yaml, json, json5 или xml файлы, которые находятся в каталоге content/.

Для хранения постов выбрал markdown файлы. В верхней части файла можно добавить блок в формате YAML с пользовательскими переменными, таких как заголовок, описание, категории, теги и другую информацию. Модуль будет извлекать эти данные, а Nuxt рендерить в мой шаблон. Плюсом будет то, что весь блог и статьи можно хранить в приватном репозитории на GitHub. Сразу получаем нативный backup, доступ к редактированию из любого рабочего места и быстрый деплой в случае переезда на другой VPS.


---
title: Название поста
description: Краткое описание нашего поста
date: 2021-01-21 
image: index.jpg
category: NodeJS
tags:
  - Nuxt
  - Content
  - Blog
---


Экспортировав контент с Wordpress и переведя посты из xml в markwodn, с помощью конвертера, пришлось немного потрудится, чтобы привести все файлы в порядок, из постов удалив лишние теги которые формировали плагины Wordpress, ну и в целом подогнать весь контент к markdown синтаксису. Картинки для постов хотелось сохранять в одном каталоге с постом, чтобы все находилось в одном месте. Начал поиски в интернете и оказалось что не один я задавался этим вопросом. На GitHub нашел решение, ценой ворнинги в консоли при сборке приложения, но все работает. Разобрал все по каталогам, сформировал удобную для себя структуру файлов.


content/
  posts/
    post1/
      images/
        index.jpg
        pic_1.jpg
        pic_2.jpg
      index.md
    post2/
      images/
        index.jpg
        pic_1.jpg
        pic_2.jpg
      index.md
    ....

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

Что из этого получилось вы можете наблюдать тут. Для всех желающих, исходники моего блога лежат на GitHub, только отредактируйте настройки Firebase в файле .env на свои, а также измените правила для Realtime Database в своем аккаунте Firebase. Для доступа к админке, после регистрации нового пользователя, вручную в базе Realtime Database добавьте поле admin со значением true.

1

Конечно, еще есть над чем поработать, но если есть пожелания что исправить или добавить пишите в коментариях.

Промокод для получения скидки 5% на REG.RU. 1F9B-D21A-F8A7-3EC2

REG.RU — крупнейший регистратор в России, входит в ТОП-10 регистраторов Европы и в ТОП-10 хостинг-компаний России. Компания закрепила за собой звание активного участника процесса развития национального Интернета.

Nuxt Content Firebase Vuetify NodeJS
(0.0) / 0
Прежде чем оставить комментарий, пожалуйста, ознакомьтесь с правилами комментирования. Оставляя комментарий, вы подтверждаете ваше согласие с данными правилами и осознаете возможную ответственность за их нарушение. Все комментарии премодерируются.
0