Деплой и хостинг

Remark и Rehype — это библиотеки для обработки Markdown и HTML в JavaScript, широко используемые для генерации статического контента, документации и блогов. Деплой таких проектов требует понимания нескольких ключевых аспектов: сборки контента, преобразования в конечный HTML, настройки серверной инфраструктуры и хостинга.

Структура проекта

Типичный проект на Remark/Rehype включает следующие компоненты:

  • Исходные Markdown-файлы — .md или .mdx, которые содержат основной контент.
  • Плагины Remark — обрабатывают Markdown (например, remark-parse, remark-rehype, remark-slug).
  • Плагины Rehype — обрабатывают HTML-дерево (например, rehype-stringify, rehype-highlight).
  • Скрипт сборки — JavaScript/Node.js код, который преобразует Markdown в HTML.
  • Шаблоны и CSS — обеспечивают оформление конечного HTML.

Для деплоя важно, чтобы структура проекта позволяла легко собирать HTML и статические ресурсы в одну папку (обычно dist или build), готовую к публикации.

Сборка контента

Сборка Markdown в HTML осуществляется по следующей схеме:

  1. Чтение файлов Markdown Используются стандартные модули Node.js, такие как fs и path, либо утилиты вроде fast-glob для поиска всех файлов.

  2. Обработка через Remark Remark-плагины применяются к Markdown-дереву (mdast) для:

    • Автоматической генерации заголовков (remark-slug).
    • Подсветки кода (remark-prism).
    • Добавления таблиц содержания (remark-toc).

  3. Конвертация в HTML через Rehype Remark предоставляет возможность передачи AST (дерева) в Rehype для дальнейшей обработки HTML. На этом этапе можно:

    • Добавлять классы CSS (rehype-add-classes).
    • Оптимизировать HTML (rehype-minify).
    • Вставлять атрибуты для SEO (rehype-meta).

  4. Генерация финального HTML Rehype-дерево сериализуется в строку HTML с помощью rehype-stringify и сохраняется в папку сборки.

Пример сборки на Node.js:

import fs from 'fs';
import path from 'path';
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

const inputFile = './content/article.md';
const outputFile = './dist/article.html';

const markdown = fs.readFileSync(inputFile, 'utf-8');

unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(markdown)
  .then(file => {
    fs.writeFileSync(outputFile, String(file));
  });

Хостинг статического контента

После сборки проекта в статический HTML его можно разместить на различных платформах. Основные варианты:

  • Vercel Автоматическая сборка проектов Node.js и статических сайтов. Достаточно подключить репозиторий, указать команду сборки (node build.js) и папку вывода (dist).

  • Netlify Поддерживает статические файлы. Команда сборки и папка вывода настраиваются в интерфейсе или через netlify.toml.

  • GitHub Pages Простой вариант для статических сайтов. HTML-файлы можно выгружать в ветку gh-pages через gh-pages npm-пакет.

  • Самостоятельный VPS На VPS или сервере можно использовать Nginx или Apache для отдачи статического HTML. Важно настроить правильные пути и кеширование для оптимизации скорости.

Организация непрерывного деплоя (CI/CD)

Для автоматического деплоя после обновления контента или кода рекомендуется использовать CI/CD:

  1. GitHub Actions

    • Триггер по push или pull_request.
    • Установка Node.js и зависимостей.
    • Выполнение сборки Remark/Rehype.
    • Публикация HTML в dist или на GitHub Pages.

  2. GitLab CI/CD

    • .gitlab-ci.yml описывает стадии сборки и деплоя.
    • Можно настроить кэширование node_modules для ускорения сборки.

  3. Vercel/Netlify автоматические билды

    • Подключение репозитория и указание команд сборки.
    • Сервисы сами выполняют сборку и деплой при каждом пуше.

Оптимизация деплоя

Для больших проектов рекомендуется:

  • Минимизировать HTML и CSS (rehype-minify и cssnano).
  • Использовать ленивую загрузку для медиа.
  • Кешировать статические ресурсы на CDN.
  • Генерировать sitemap и RSS через плагины Remark/Rehype для SEO.

Поддержка динамических компонентов

Хотя Remark и Rehype ориентированы на статический контент, можно интегрировать динамические элементы через:

  • Встраивание React-компонентов в MDX.
  • Использование клиентских скриптов для интерактивных виджетов.
  • Загрузку данных через fetch API и последующую модификацию HTML после рендера.
Оглавление