Блог на Docusaurus и TinaCMS
Процесс создания блога на базе статического генератора 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/
- Subdomain:
Сборка
В 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"
}
Где
- dotenv - это entropitor/dotenv-cli: A cli to load dotenv files для чтения локального .env файла
- tsx - это What is tsx? | tsx
✅ После загрузки всех файлов в S3 хранилище, можно проверять работу сайта по целевой ссылке: https://www.chudnyi.com/