Перейти к основному содержимому

Блог на Docusaurus и TinaCMS

· 4 мин. чтения
Дмитрий Чудный
Дмитрий Чудный
Автор сайта

Процесс создания блога на базе статического генератора Docusaurus и Tina CMS.

Задача​

Сделать статический сайт, ядром которого будет блог. Сайт не будет требовать ни веб-сервера ни базы данных. По содержимому будет создаваться набор статических файлов. Они будут заливаться в S3 хранилище, которое будет предоставлено как веб-сайт через сервис Хостинг статических сайтов от Yandex Cloud.

Код сайта​

  • Клонировал репозиторий: tinacms/tinasaurus
  • Внёс правки, чтобы
    • Обновить зависимости
    • Удалить всё что, мне не нужно на сайте
    • Добавить всё что мне нужно на сайте
    • Настроить сборку по своим требованиям

Хостинг​

  • Выбрал домен второго уровня: www.chudnyi.com, верхнего уровня не подходит так как на Хостинг статических сайтов от Yandex Cloud можно настроить только DNS запись типа CNAME, который не поддерживает домены верхнего уровня.
  • Создал облако и каталог в Яндекс.Облако
  • Создал сервисный аккаунт для деплоя файлов сайта в S3 бакет
    • Создал сервисному аккаунту новый статический ключ доступа, получил значения AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY
    • Сохранил все параметры в локальный .env файл
AWS_REGION=ru-central1-b
AWS_ENDPOINT=https://storage.yandexcloud.net
AWS_BUCKET=www.chudnyi.com
AWS_ACCESS_KEY_ID=<your key>
AWS_SECRET_ACCESS_KEY=<your secret>
  • Создал сертификат в менеджере сертификатов от Let's Encrypt
    • Указал домены: chudnyi.com и www.chudnyi.com
    • Задал в DNS записях домена необходимые TXT записи для проверки прав на домен
    • Сертификат в менеджере сертификатов Яндекс выпускается не быстро, может несколько часов
  • Создал бакет в Object Storage с точно таким же именем (это важно) как домен сайта: www.chudnyi.com
    • Максимальный размер ограничил в 1 Гб, можно оставить без ограничения
    • Доступ на чтение объектов: Публичный
    • Класс хранилища: Стандартное
    • В разделе "Веб-сайт"
      • Включил "Хостинг"
      • Главная страница: index.html
      • Страница ошибки: 404.html
    • В разделе HTTPS
      • Источник: Certificate Manager
      • Выбрал сертификат ранее созданный в менеджере сертификатов
    • В разделе Права доступа
      • Нажал кнопку "Назначить роли" сверху справа в углу
      • Выбрал сервисный аккаунт для деплоя сайта
      • Назначил роли: storage.uploader, storage.viewer, storage.editor
  • Добавил в бакет тестовую страницу index.html
  • Проверил, что тестовая страница открывается по ссылке http://www.chudnyi.com.website.yandexcloud.net/
  • В DNS записи своего домена добавил CNAME с параметрами
    • Subdomain: www
    • Canonical name: www.chudnyi.com.website.yandexcloud.net.
    • На обновление DNS записей потребуется время, лучше сделать это заранее
    • Через некоторое время, когда обновится DNS запись CNAME, можно проверить открывается ли тестовая страница по ссылке https://www.chudnyi.com/

Сборка​

В package.json заменил команду сборки сайта. Таким образом буду получать статический сайт, который не требует бэкенда Tina.

"scripts": {
  "build": "tinacms dev --datalayer-port 9001 -c 'docusaurus build'",
}

Указал порт отличный от 9000 в параметре --datalayer-port 9001 для того, чтобы сборка не падала при запущенном локально dev сервере.

После успешной сборки файлы сайта будут находиться в локальной папке проекта: build.

Добавил скрипт scripts/clean-tina.ts для удаления папки build/admin, так как админка Tina на боевом сайте мне не нужна.

Тестирование​

После сборки можно запускаю локальный веб-сервер, чтобы потестировать сайт вручную

"scripts": {
  "serve": "docusaurus serve"
}

Деплой​

Чтобы выполнить загрузку сайта на боевой хостинг необходимо синхронизировать локальную папку build c S3 бакетом так, чтобы они стали полностью идентичны. При этом каждому файлу обязательно нужно правильно задать HTTP заголовок Content-Type, который сервер будет отдавать в ответе на запрос файла.

Варианты решения описаны тут: Устранение проблем с некорректным MIME-типов объектов при их загрузке в Object Storage | Yandex Cloud - Документация

Попробовав отдельные инструменты aws s3 sync и s3cmd, решил написать свой простой скрипт синхронизации на базе npm библиотеки s3-sync-client. Таким образом мне было проще реализовать определение и задание MIME типа каждому файлу.

"scripts": {
  "deploy_s3": "tsx scripts/s3-sync.ts",
  "deploy_s3:dev": "dotenv -- npm run deploy_s3"
}

Где

✅ После загрузки всех файлов в S3 хранилище, можно проверять работу сайта по целевой ссылке: https://www.chudnyi.com/

Сылки​