Перейти к содержимому
Главная > Компьютеры и Интернет > Разработка и верстка > Пошаговый процесс установки AstroWind

Пошаговый процесс установки AstroWind

Пройдем весь процесс пошагово. Вот подробная инструкция:

1. Создайте папку для проекта

  1. Создайте папку для вашего проекта. Например, назовите ее my-landing.
  2. Откройте терминал или командную строку и перейдите в эту папку.
mkdir my-landing
cd my-landing

2. Клонируйте репозиторий AstroWind

Используйте команду git clone, чтобы склонировать репозиторий с GitHub.

git clone https://github.com/onwidget/astrowind.git

3. Перейдите в папку проекта

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

cd astrowind

4. Установите зависимости

Используйте npm для установки всех необходимых зависимостей.

npm install

5. Запустите локальный сервер

Запустите локальный сервер разработки.

npm run dev

После этого вы должны увидеть сообщение, что сервер запущен на http://localhost:3000. Откройте этот адрес в вашем браузере, чтобы увидеть ваш сайт.

6. Настройка проекта

Измените базовую конфигурацию

Откройте файл src/config.yaml и отредактируйте его по своим потребностям. Например, измените название сайта, описание и метаданные.

site:
  name: AstroWind
  site: 'https://astrowind.vercel.app'
  base: '/'
  trailingSlash: false

  googleSiteVerificationId: orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M

# Default SEO metadata
metadata:
  title:
    default: AstroWind
    template: '%s — AstroWind'
  description: "\U0001F680 Suitable for Startups, Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs."
  robots:
    index: true
    follow: true
  openGraph:
    site_name: AstroWind
    images:
      - url: '~/assets/images/default.png'
        width: 1200
        height: 628
    type: website
  twitter:
    handle: '@onwidget'
    site: '@onwidget'
    cardType: summary_large_image

i18n:
  language: en
  textDirection: ltr

apps:
  blog:
    isEnabled: true
    postsPerPage: 6

    post:
      isEnabled: true
      permalink: '/%slug%' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
      robots:
        index: true

    list:
      isEnabled: true
      pathname: 'blog' # Blog main path, you can change this to "articles" (/articles)
      robots:
        index: true

    category:
      isEnabled: true
      pathname: 'category' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
      robots:
        index: true

    tag:
      isEnabled: true
      pathname: 'tag' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
      robots:
        index: false

    isRelatedPostsEnabled: true
    relatedPostsCount: 4

analytics:
  vendors:
    googleAnalytics:
      id: null # or "G-XXXXXXXXXX"

ui:
  theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"

Что означает каждая строка темы AstroWind

Файл src/config.yaml содержит основные настройки вашего проекта AstroWind. Вот краткое объяснение каждого раздела и параметра:

Раздел site

Этот раздел содержит основные настройки сайта.

  • name: Название сайта.
  • site: URL вашего сайта.
  • base: Базовый путь для сайта. Обычно /, но может быть изменен для поддоменов или других конфигураций.
  • trailingSlash: Определяет, будет ли URL с завершающей косой чертой. true для /about/, false для /about.
  • googleSiteVerificationId: Код для подтверждения сайта в Google Search Console.

Раздел metadata

Этот раздел содержит настройки для SEO (поисковая оптимизация).

  • title: Настройки заголовка страницы.
    • default: Заголовок по умолчанию.
    • template: Шаблон заголовка. %s будет заменено на текущий заголовок страницы.
  • description: Описание сайта. Это описание будет использоваться в метатегах для поисковых систем.
  • robots: Настройки для поисковых роботов.
    • index: Разрешить или запретить индексирование сайта поисковыми системами.
    • follow: Разрешить или запретить следовать ссылкам на сайте.
  • openGraph: Настройки Open Graph для социальных сетей.
    • site_name: Название сайта для Open Graph.
    • images: Изображения для Open Graph.
    • url: Путь к изображению.
    • width: Ширина изображения.
    • height: Высота изображения.
    • type: Тип контента для Open Graph (например, website).
  • twitter: Настройки Twitter Card.
    • handle: Twitter-аккаунт владельца сайта.
    • site: Twitter-аккаунт сайта.
    • cardType: Тип Twitter Card (например, summary_large_image).

Раздел i18n

Этот раздел содержит настройки интернационализации.

  • language: Язык сайта (например, en для английского).
  • textDirection: Направление текста (ltr для текста слева направо, rtl для текста справа налево).

Раздел apps

Этот раздел содержит настройки для приложений, таких как блог.

  • blog: Настройки блога.
    • isEnabled: Включение или отключение блога.
    • postsPerPage: Количество постов на страницу.
    • post: Настройки отдельных постов.
    • isEnabled: Включение или отключение постов.
    • permalink: Шаблон постоянной ссылки для постов.
    • robots: Настройки для поисковых роботов для постов.
      • index: Разрешить или запретить индексирование постов.
    • list: Настройки списка постов.
    • isEnabled: Включение или отключение списка постов.
    • pathname: Путь для списка постов.
    • robots: Настройки для поисковых роботов для списка постов.
      • index: Разрешить или запретить индексирование списка постов.
    • category: Настройки категорий.
    • isEnabled: Включение или отключение категорий.
    • pathname: Путь для категорий.
    • robots: Настройки для поисковых роботов для категорий.
      • index: Разрешить или запретить индексирование категорий.
    • tag: Настройки тегов.
    • isEnabled: Включение или отключение тегов.
    • pathname: Путь для тегов.
    • robots: Настройки для поисковых роботов для тегов.
      • index: Разрешить или запретить индексирование тегов.
    • isRelatedPostsEnabled: Включение или отключение виджета с похожими постами.
    • relatedPostsCount: Количество похожих постов для отображения.

Раздел analytics

Этот раздел содержит настройки для аналитики.

  • vendors: Поставщики аналитики.
    • googleAnalytics: Настройки Google Analytics.
    • id: Идентификатор Google Analytics (например, G-XXXXXXXXXX).

Раздел ui

Этот раздел содержит настройки пользовательского интерфейса.

  • theme: Тема сайта. Возможные значения: system, light, dark, light:only, dark:only.

Изменения и использование

  • Для изменения названия сайта и его URL, измените значения в разделе site.
  • Для настройки SEO измените значения в разделе metadata.
  • Для изменения языка и направления текста измените значения в разделе i18n.
  • Чтобы включить или отключить блог и настроить его параметры, измените значения в разделе apps.
  • Для настройки аналитики добавьте идентификатор Google Analytics в разделе analytics.
  • Для настройки темы сайта измените значение в разделе ui.

Пример изменения названия сайта и описания:

site:
  name: My Awesome Landing
  site: 'https://myawesomelanding.com'

metadata:
  title:
    default: My Awesome Landing
    template: '%s — My Awesome Landing'
  description: 'Welcome to My Awesome Landing! The best place for awesome things.'

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

Настройте дизайн

Для изменения дизайна откройте файлы src/components/CustomStyles.astro и src/assets/styles/tailwind.css. В этих файлах вы можете настроить шрифты, цвета и другие стили.

7. Построение проекта для продакшена

Когда ваш сайт будет готов, создайте оптимизированную сборку для продакшена.

npm run build

8. Деплой

Теперь ваш сайт готов к деплою. Все файлы для деплоя находятся в папке dist. Вы можете загрузить их на любой хостинг, например, на Netlify или Vercel.

Деплой на Netlify

  1. Зайдите на сайт Netlify.
  2. Создайте новый сайт из Git.
  3. Выберите ваш репозиторий.
  4. Настройте сборку, указав команду сборки npm run build и папку для деплоя dist.

Деплой на Vercel

  1. Зайдите на сайт Vercel.
  2. Создайте новый проект.
  3. Выберите ваш репозиторий.
  4. Настройте проект, указав команду сборки npm run build и папку для деплоя dist.

Резюме

  1. Создайте папку и перейдите в нее.
  2. Клонируйте репозиторий AstroWind.
  3. Перейдите в папку проекта.
  4. Установите зависимости.
  5. Запустите локальный сервер.
  6. Настройте проект и дизайн.
  7. Соберите проект для продакшена.
  8. Разверните проект на хостинге.

Если у вас возникнут какие-либо вопросы или проблемы, не стесняйтесь задавать их. Удачи в разработке вашего лендинг-сайта!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *