Outstatic CMS для персонального блога на Next.js: Легко и Быстро09.11.2024 14:01

95ccbcaec17d8201b9fd63d1531472aa.png

Решил сделать небольшой проект для веб-студии, чтобы удобно хранить наши наработки и получать дополнительный доход с продаж готовых решений.
Для разработки я выбрал Next.js, создал структуру проекта и пошел думать над тем, как мне будет проще и удобнее публиковать и редактировать статьи.
Начал искать подходящую headless CMS. Первое, что выдает поисковик и что у многих на слуху, — это Strapi. Попробовав ее в их тестовой среде, понял, что это мощный инструмент, подходящий для более крупных проектов, где важно уметь управлять всем контентом, однако для небольшого блога с фокусом на статьях Strapi кажется избыточным.
В итоге я продолжил искать и наткнулся на новую, более легковесную CMS — Outstatic, разработанную для управления контентом с использованием Markdown.
О ней и пойдет речь в этой статье.

Outstatic

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

Быстрый старт в 4 шага

1) GitHub OAuth

Для того, чтобы Outstatic могла автоматически коммитить все изменения в статьях, нужно подключить к ней авторизацию в GitHub.

eac9a0f8e05c87d39be506fe50e52066.png1eb1d8deb1143134b84b441ab5060aee.png

Обратите внимание, что Github не дает прописать сразу несколько путей для аутентификации, поэтому, для приложения развернутого на сервере, понадобится настроить еще один OAuth app.

2) Устанавливаю Outstatic в проект

npm i outstatic

3) Cоздаю два файла в проекте

/app/outstatic/[[…ost]]/page.tsx

import 'outstatic/outstatic.css';
import { Outstatic } from 'outstatic';
import { OstClient } from 'outstatic/client';

export default async function Page({ params }: { params: { ost: string[] } }) {
  const ostData = await Outstatic();
  return ;
}

/app/api/outstatic/[[…ost]]/route.ts

import { OutstaticApi } from 'outstatic';

export const GET = OutstaticApi.GET;

export const POST = OutstaticApi.POST;

4) Остается прописать .env переменные

OST_GITHUB_ID=GITHUB_OAUTH_APP_ID
OST_GITHUB_SECRET=GITHUB_OAUTH_APP_SECRETN
OST_REPO_SLUG=GITHUB_REPOSITORY_SLUG
 
# OPTIONAL
OST_REPO_BRANCH=YOUR_GITHUB_REPOSITORY_BRANCH

Вот и все, теперь можно запускать приложение

Пишем первую статью

Переходим наhttps://localhost:3000/outstaticиавторизуемся через github.

c940fa4505d5a9255ebccb77de6a2aeb.png

Можно писать свою первую статью (подробнее как это делать тут)

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

Отображение

Теперь стоит задача отобразить список постов и конкретный пост по его id.
Для начала давайте напишем функцию, которая трансформирует наш markdown в html, чтобы отобразить его на странице. Для этого будем использовать unified и remark-parse

Установим все необходимые зависимости
npm i unified remark-parse remark-gfm remark-rehype rehype-sanitize rehype-stringify

Создадим файл
lib/markdownToHtml.ts

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkRehype from 'remark-rehype';
import rehypeSanitize from 'rehype-sanitize';
import rehypeStringify from 'rehype-stringify';

export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeSanitize)
    .use(rehypeStringify)
    .process(markdown);
  return result.toString();
}

Получение данных
Напишем функцию, которая получит отсортированный список постов по категории, и функцию для получения контента поста. Поле категории я добавил при создании поста в Outstatic (тут об этом подробно написано)

/lib/posts.ts

import { getDocuments, getDocumentBySlug } from 'outstatic/server';
import markdownToHtml from './markdownToHtml';

export function getSortedPostsData({ category }: { category: string; }) {
  const allPostsData = getDocuments(category, [
    'title',
    'status',
    'author',
    'slug',
    'description',
    'coverImage',
    'publishedAt',
    'price',
    'category',
    'tags',
  ]);

  return allPostsData.sort((a, b) => {
    if (a.publishedAt < b.publishedAt) {
      return 1;
    } else {
      return -1;
    }
  });
}

export async function getPostContent({ category, slug }: { category: string; slug: string }) {
  const post = getDocumentBySlug(category, slug, [
    'title',
    'status',
    'author',
    'slug',
    'description',
    'coverImage',
    'publishedAt',
    'price',
    'content',
    'category',
    'tags',
  ]);

  if (!post) return null;

  const content = await markdownToHtml(post.content);

  return {
    ...post,
    content,
  };
}

Также с Outstatic можно работать, как с базой данных (подробнее тут)

Создадим директорию в /app, в которой будут отображаться все наши посты. У меня это список виджетов для тильды

1f73e4203ed9c159c804411a3b96d15d.png

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

Обратите внимание, что стиль в редакторе и в самом посте будут отличаться, поэтому нужно поработать со стилями. Для отображения блока с кодом можете использовать prismjs.

Вот и все, минимальный функционал для нашего блога готов.

Минусы

После использования Outstatic из минусов могу выделить следующее:

  • Невозможно прикрепить несколько изображений к заголовку

  • Нет автосохранения контента и в целом не всегда уверен, что изменения улетели в гит, поэтому приходится перепроверять перед закрытием

  • Нет возможности редактировать сам markdown напрямую из редактора

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

Спасибо за внимание
Вот ссылка на ХАБ, но он еще в разработке, поэтому строго не судите

© Habrahabr.ru