Подготовка

Для начала у вас должен быть аккаунт на GitHub. Это довольно очевидно, но все же я должен это упомянуть. По этой ссылке вы можете зарегистрироваться.

Так же вам понадобится проект на Nuxt , инструкцию можно найти на их официальном сайте, у них действительно очень подробная документация со множеством примеров.

Шаг 1: Создание репозитория

Это очень важный пункт, в котором нужно кое-что учесть. Для размещения вашего сайта с помощью GitHub Pages в интернете нужно создать репозиторий в GitHub со специальным именем.

Имя репозитория должно состоять из вашего никнейма, после которого через точку добавляется "github.io". То есть должно быть как-то так: "username.github.io", где username — ваш никнейм.

В моем случае названием для репозитория будет "denimoli.github.io". И теперь нужно создать публичный (не перепутайте) репозиторий с таким именем.

Шаг 2: Настройка

После создания репозитория нам потребуется добавить файл с нашим Action который является ключевым для загрузки нашего проекта на GitHub pages.

В корне проета нам понадобится создать такуя структура, где deploy.yml является нашим Action

├──.github
    └── workflows
         └── deploy.yml

Содержимое этого файла у меня получилось такое.

name: Deploy to GitHub Pages
on:
  workflow_dispatch:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
      # Pick your own package manager and build script
      - run: yarn install
      - run: yarn nuxt build --preset github_pages
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./.output/public
  # Deployment job
  deploy:
    # Add a dependency to the build job
    needs: build
    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source
    # Deploy to the github_pages environment
    environment:
      name: github_pages
      url: ${{ steps.deployment.outputs.page_url }}
    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

Тут важно обрать внимание на поле branches в нем нужно оказать основную ветку. Я использую master как основную ветку для production.

Шаг 3: Запуск GitHub page

Настройка оконченна, нам остается отправить все что у нас получилось в наш репозиторий. После этого, если вы зайдете в репозиторий на GitHub и перейдете во вкладку Actions, то увидите, что там автоматически появилось "действие". Если оно уже выполнилось успешно, то будет зеленый значок, который означает, что ваш сайт стал полноценным сайтом в интернете. Это можно проверить, перейдя по ссылке из этого "действия".

Профит, теперь вы можете похвастаться своим приложение свему свету!

Завершения

Конечно же это не единственный способ обзавестить GitHub Pages, но мне этот вариант показался самым простым из тех что я нашел для приложения Nuxt.