1. Главная
  2. Блог
  3. Хостинг

Как разместить Markdown-редактор на своём хостинге, в Docker или на nginx

Свой Markdown-редактор с живым предпросмотром за минуты. Пошагово для виртуального хостинга (cPanel), Docker, nginx и Caddy — без базы данных и бэкенда.

Markdown-редактор на своём сервере даёт команде единый привычный инструмент на вашем домене — без аккаунтов, подписок и зависимости от того, продолжит ли работать чужой сервис. Если редактор — статическое веб-приложение, разместить его так же просто, как несколько HTML-файлов: не нужно обслуживать базу данных, обновлять серверный код, а нагрузка на сервер почти нулевая.

В этом руководстве в качестве примера используется Markdown Preview Editor. Он бесплатный и с открытым кодом (MIT), а те же шаги подходят для любого статического веб-приложения.

Зачем размещать Markdown-редактор у себя?

  • Ваш домен — ваши правила. Редактор доступен по адресу, который вы контролируете, например markdown.your-company.com, и работает одинаково для всех, кто им пользуется.
  • Нечего обслуживать. У статического сайта нет бэкенда, а значит, нет патчей безопасности для серверного кода и резервных копий базы данных.
  • Документы остаются на месте. Markdown Preview Editor отрисовывает всё в браузере посетителя. Сервер только отдаёт файлы приложения — документы он никогда не получает.
  • Работает бесплатно. Хватит любого тарифа виртуального хостинга, небольшого VPS или контейнерной платформы.

Что понадобится

Любой веб-сервер, способный отдавать статические файлы по HTTPS:

  • виртуальный хостинг с cPanel, Plesk или DirectAdmin (Apache или LiteSpeed),
  • сервер с Docker,
  • nginx или Caddy на VPS,
  • или даже ваш собственный компьютер для локальной работы.

PHP, Node.js и база данных на сервере не нужны.

Вариант 1. Виртуальный хостинг (cPanel и аналоги)

Это самый быстрый путь, и командная строка для него не нужна.

  1. Скачайте архив сайта. Возьмите markdown-preview-editor-site.zip из последнего релиза. В нём уже собранный сайт.
  2. Выберите адрес. Используйте основной домен или создайте в панели управления хостингом поддомен, например markdown.example.com. Запомните корневую папку поддомена (document root).
  3. Включите HTTPS. Большинство хостингов выпускают бесплатные сертификаты автоматически (AutoSSL или Let’s Encrypt). Убедитесь, что сертификат активен для домена или поддомена.
  4. Загрузите и распакуйте. Откройте Файловый менеджер, перейдите в корневую папку, загрузите zip-файл и выберите Извлечь (Extract). Файлы — включая скрытый .htaccess — должны лежать прямо в корневой папке, а не во вложенной.
  5. Откройте свой домен. Редактор готов.

Входящий в комплект .htaccess перенаправляет HTTP на HTTPS, задаёт заголовки безопасности и настраивает кеширование на серверах Apache и LiteSpeed.

Совет

Если сканер загрузок на хостинге отклоняет zip-архивы с JavaScript-файлами — известное ложное срабатывание некоторых антивирусных правил, — возьмите архив .tar.gz из того же релиза или загрузите файлы по FTP.

Вариант 2. Docker

Если вы работаете с контейнерами, клонируйте репозиторий и запустите входящий в него Compose-файл:

bashgit clone https://github.com/ovasendin/markdown_preview_editor.git
cd markdown_preview_editor
PORT=8080 docker compose -f deploy/docker-compose.yml up -d --build

Откройте http://localhost:8080 — или тот порт, который вы выбрали. Образ собирает сайт и отдаёт его через nginx с теми же заголовками безопасности. Для публичного домена поставьте контейнер за ваш обычный обратный прокси с HTTPS.

Вариант 3. nginx

Соберите сайт (или распакуйте архив релиза) и скопируйте файлы в корневую папку веб-сервера:

bashnpm ci && npm run build
sudo cp -r dist/* /var/www/markdown/

В репозитории есть готовая конфигурация deploy/nginx.conf с заголовками безопасности и правилами кеширования. Основа конфигурации статического сайта совсем короткая:

nginxserver {
    listen 443 ssl;
    server_name markdown.example.com;
    # здесь строки ssl_certificate и ssl_certificate_key

    root /var/www/markdown;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Перезагрузите nginx командой sudo nginx -s reload и откройте домен.

Вариант 4. Caddy

Caddy получает HTTPS-сертификаты автоматически, поэтому для VPS это самый простой вариант:

bashSITE_ADDRESS=markdown.example.com caddy run --config deploy/Caddyfile

Сначала скопируйте собранные файлы в /srv; входящий в комплект Caddyfile отдаёт их с теми же заголовками, что и в других вариантах.

Вариант 5. Локальный запуск

Для личного использования сервер не нужен вовсе:

bashnpm ci
npm run dev

Откройте в браузере локальный адрес, который появится в консоли.

Как обновлять

Обновить статический сайт — значит заменить его файлы. Скачайте архив нового релиза, распакуйте его поверх старых файлов и перезагрузите страницу. Имена файлов приложения содержат хеши содержимого, поэтому браузеры подхватывают новую версию без проблем с устаревшим кешем. Чтобы узнавать о новых версиях, подпишитесь на репозиторий на GitHub (Watch → Custom → Releases).

Чек-лист после развёртывания

  • Сайт открывается по https://, а http:// перенаправляет на него.
  • Перетащите Markdown-файл в редактор — он откроется в новой вкладке.
  • Смените тему и язык в настройках.
  • Экспортируйте тестовый документ в HTML, чтобы убедиться, что скачивание работает.

Когда редактор заработает, поделитесь с командой шпаргалкой по Markdown и добавьте в закладки наши руководства по предпросмотру Markdown и по экспорту в HTML и PDF.

Частые вопросы

Можно ли разместить Markdown-редактор на виртуальном хостинге?

Да. Статический Markdown-редактор вроде Markdown Preview Editor — это просто файлы HTML, CSS и JavaScript. Загрузите и распакуйте архив релиза в корневую папку домена или поддомена — база данных и серверный язык программирования не нужны.

Отправляет ли редактор на своём сервере документы на этот сервер?

Нет. Сервер только отдаёт файлы приложения. Документы открываются и отрисовываются в браузере каждого посетителя и никуда не загружаются.

Можно ли разместить редактор в подпапке, а не на поддомене?

Да, приложение работает из подпапки, например example.com/markdown/. Тем не менее рекомендуется отдельный поддомен: он изолирует хранилище браузера редактора от других приложений на том же домене.

Сколько ресурсов сервера нужно?

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