Как развернуть сайт Astro на GitHub Pages

GitHub Pages теперь использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания кода, чтобы разработчики могли контролировать свою авторскую структуру и развертывание. GitHub Pages — это мощный вариант для хранения статического контента по следующим причинам:

  • Это бесплатно.
  • Это упрощает совместную работу. Любой может открыть запрос на обновление сайта.
  • Ваш репозиторий синхронизируется с любыми изменениями, которые вы внесли на сайт.
  • Хотя GitHub Pages поставляется с доменным именем по умолчанию, например, https://YOUR_USER_NAME.github.io/, он поддерживает пользовательские домены.
  • Он использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания.

Команда GitHub сделала несколько стартовых рабочих процессов доступными для вас, так что вам не придется писать их с нуля, и вы можете использовать их как примеры для поддержки развертывания в других фреймворках. В настоящее время есть стартовые рабочие процессы для Next.js, Nuxt.js, Gatsby, Hugo, Jekyll и HTML.

Давайте узнаем, как размещать статические сайты, созданные с помощью Astro или любого рабочего процесса по вашему выбору, на GitHub Pages!

Обратите внимание, что для публикации сайта на GitHub Pages ваш репозиторий должен быть публичным.

После того как вы напишете код (используя фреймворк или статический генератор по вашему выбору) и сохраните его в репозитории, перейдите на вкладку настроек этого репозитория.

Нажмите Pages на левой боковой панели

В разделе сборка и развертывание выберите GitHub Actions

Создайте папку в корне вашего проекта под названием .github/workflows.

Внутри папки .github/workflows создайте настроенный рабочий процесс для развертывания указанного вами фреймворка на GitHub Pages (см. примеры в разделе ниже):

Пример рабочего процесса для Astro

name: Deploy Astro to GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      workflow_dispatch:

      # Allow this job to clone the repo and create a page deployment
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - name: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use Node.js 16
          uses: actions/setup-node@v2
          with:
            node-version: '16'
            cache: 'npm'

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: npm ci

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build Astro
          run: npm run build --if-present

        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            path: ./dist

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

Вход в полноэкранный режим Выход из полноэкранного режима

Пример рабочего процесса для React

    name: Deploy to React GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      workflow_dispatch:

      # Allow this job to clone the repo and create a page deployment
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - name: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use Node.js 16
          uses: actions/setup-node@v2
          with:
            node-version: '16'
            cache: 'npm'

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: npm ci

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build React
          run: npm run build --if-present

        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            path: ./build

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1
Вход в полноэкранный режим Выход из полноэкранного режима

Пример шаблона для любого статического генератора на ваш выбор

    name: Deploy to “your frameworks” GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      workflow_dispatch:

      # Allow this job to clone the repo and create a page deployment
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - name: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use “REPLACE WITH THE RUNTIME OF YOUR CHOICE”
          uses: “REPLACE WITH THE ACTION THAT SETS UP THE RUN TIME OF YOUR CHOICE”

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: “REPLACE WITH COMMANDS TO INSTALL DEPENDENCIES”

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build “YOUR STATIC GENERATOR HERE”
          run: “REPLACE WITH YOUR BUILD COMMAND”

        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            path: “REPLACE WITH YOUR BUILD OUTPUT FOLDER”

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1
Войти в полноэкранный режим Выход из полноэкранного режима

В течение нескольких секунд ваш Action начнет выполняться. Оно сгенерирует URL и в случае успеха развернет ваш статический сайт на GitHub Pages.

Перейдите по URL-адресу yourusername.github.io/your_repo_name, чтобы посмотреть на ваш живой сайт!

Проблемы: работа с путями к активам

Когда я впервые опубликовал свой сайт на GitHub Pages, я был озадачен и удивлен тем, что не смог увидеть ни изображений, ни PDF-файлов, хотя они присутствовали на локальном хостинге сайта. Это произошло потому, что GitHub Pages по-разному обрабатывает пути.

Например, если у меня PDF находится по такому относительному пути: assets/pdfs/menu-food.pdf, то после размещения на GitHub Pages новый путь будет обновлен до {"ИМЯ РЕПОЗИТОРА"}/assets/pdfs/menu-food.pdf.

Пример

Вот пример репозитория, который я создал с помощью этого метода

blackgirlbytes / blackgyalbites-astro

шаблон меню ресторана без прикосновений, размещенный на GitHub Pages

blackgyalbites

Шаблон для бесконтактных меню и статических страниц, построенных с помощью любого фреймворка, на GitHub Pages

Сайт, созданный с помощью Astro для отображения меню ресторана, когда пользователи сканируют QR-код.

Powered By GitHub Pages

Это демонстрация, показывающая разработчикам, что они могут создавать и размещать статические веб-сайты, используя любой фреймворк. Посмотрите другие примеры фреймворков, размещенных на GitHub Pages:

  • HTML и CSS
  • Next.js и Tailwind CSS
  • Astro

Ссылка на живой сайт: https://blackgirlbytes.github.io/blackgyalbites-astro/

Дизайн и разработка

Все дизайны и элементы являются открытым исходным кодом и доступны бесплатно для всех желающих.

Принадлежит Ризель Скарлетт (@blackgirlbytes)

Дизайн разработан The Holistic Technologist

Иллюстрации Cuoc Doi Prints

Не стесняйтесь, копируйте, настраивайте и используйте в любых целях. Этот проект полностью с открытым исходным кодом и под лицензией MIT.

Шаблон дизайна меню: Canva

Загрузить активы и элементы дизайна: Google Drive

Посмотреть на GitHub

Узнать больше

  • Посмотрите доклад Томми Берда об использовании GitHub Pages с Actions для развертывания сайтов Hugo за считанные секунды.
  • Репозиторий и ReadMe для Deploy Pages
  • Анонс изменений от GitHub
  • Официальное сообщение в блоге GitHub

Посмотрите на YouTube этот замечательный ролик Кедаша, демонстрирующий, как использовать настроенный рабочий процесс для развертывания генератора статических сайтов на GitHub Pages!

Мне бы хотелось услышать ваши мысли о новых настраиваемых рабочих процессах для развертывания на GitHub Pages. Комментируйте ниже! Следите за GitHub и за мной на DEV, чтобы получать больше материалов, подобных этому!

Оцените статью
devanswers.ru
Добавить комментарий