Как создавался сайт

Задача

Было интересно изложить свои “путешествия” в виде сайта. Не в виде столь популярных блогов, которые со временем становятся кладбищем мыслей, а в форме содержательных, объёмных, постоянно улучшаемых историй. Возможно и оформленных визуально с использованием самого интересного и впечатляющего из веб-технологий.

TODO:Сторителлинг через веб.

Подготовка среды разработки

• Устанавливаем Visual Studio Code

  "recommendations": [
    "astro-build.astro-vscode",
    "unifiedjs.vscode-mdx"
  ],

• Устанавливаем Git
• Устанавливаем NodeJS
• Устанавливаем pnpm: npm install -g pnpm

TODO:Большая часть инструментов выше могут ссылаться на соответствующие истории. VSCode - отдельная, NodeJS + pnpm в истории про веб-разработку.

Подготовка шаблона сайта

• Создаём папку для проекта
• Выполняем команду pnpm create astro@latest
• Настраиваем package.json
• Настраиваем pnpm workspaces
• Настраиваем paths в tsconfig.json
• pnpm install, .gitignore (.*, node_modules/)
• Смотрим основные концепции в примере Astro и удаляем по мере ознакомления, оставляя чистый сайт.

Типографика

• Набрасываем какой-нибудь контент (ознакомление с h1..6, p). Смотрим на скучный вид сайта.
• Устанавливаем шрифты (на примере Inter Var)

Работа с коллекциями контента

Публикация сайта

• Добавляем в astro.config.mjs: outDir: "./.build"

Cloudflare Pages

• Регистрируемся на Cloudflare
• pnpm add wrangler -D
• Добавляем в package.json/script: "cf": "astro build && wrangler pages deploy .build/ -- --project-name stan-quest --branch main" cf - это сокращение от CloudFlare (на тот случай, если будут разные варианты развертывания) stan-quest надо, соответственно, заменить на свой вариант
• Запускаем команду pnpm cf. Когда спросит название проекта и ветку, указываем то, что у нас в параметрах —project-name и —branch, соответственно.
• В настройках Cloudflare “Workers & Pages -> Overview” выбираем имя созданного сайта, заходим в custom domains и добавляем соответствующий домен, если есть.