Як розмістити Markdown-редактор на власному хостингу, у Docker чи nginx

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.

Варіант 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 з тими самими заголовками безпеки. Для публічного домену поставте контейнер за ваш звичний reverse proxy з 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.