Разработка блога

Разработка блога

программирование
разработка
веб
архитктура приложений
NextJS
mdx

Здесь будет описание процесса разработки моего блога.

It is what it is and it isn't what it isn't.

Задача

Создать блог, доступный в интернете. Блог - это набор ресурсов, далее постов.

Необходимые свойства блога:

  • Добавление, редактирование и удаление постов владельцем блога
  • Добавление/редактирование/удаление (изменение) поста должно включать в себя минимум действий, которые поддаются автоматизированию.
  • Просмотр постов невладельцем блога
  • Выбор языка, на котором написан пост
  • Поддержка приватных постов

Решение

Реализация блога

Блог является частью NextJS приложения.

Формат данных

Данные блога — это посты. Эти данные являются статическими, то есть не меняются во время выполнения приложения. Необходима возможность их просматривать читателями и просматривать, добавлять, редактировать, удалять автором. Для хранения данных был выбран формат MDX:

  • Markdown синтаксис
  • Возможность включения в пост React-компонентов
<Button variant="contained" color="primary">
  Эта кнопка — React компонент
</Button>

Эта кнопка — React компонент

  • Возможность отображения TeX формул
$$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$$
f(x)=∫−∞∞f^(ξ) e2πiξx dξf(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi

Поддержка внешних компонентов в формате module federation:

Этап 1: файловая система + code

Посты хранятся в локальной файловой системе репозитория. Для изменения постов редактируется непосредственно код в репозитории.

Плюсы:

  • простота реализации
  • отсутствие необходимости использовать базу данных
  • простота добавления новых фич

Минусы:

  • невозможность изменения постов извне репозитория

Все посты хранятся в папке posts/. Каждый пост это папка, название которой — часть URL поста, и файлы в формате [language].mdx, где [language] - это язык, на котором написан пост.

Внедрение данных

Кроме постов блога к статическим данным относятся:

  • набор цветов светлой/тёмной темы
  • метаданные приложения (версия, хэш коммита)
  • локализованные сообщения

NextJS предоставляет обширные возможности для генерации статических страниц, включая внедрение в каждую страницу данных, получаемых на этапе сборки приложения. Это и есть вышеназванные статические данные. Эти данные могут быть как глобальными, так и уникальными для каждой страницы (далее — страничные данные).

Интернализация

Этап 2: Firebase Firestore

Решает минусы реализации "Этап 1", добавляя возможность изменения постов извне репозитория.

Ресурсы

https://dev.to/jfelx/how-to-make-a-static-blog-with-next-js-2bd6