Итак, вы создали новый блестящий веб-сайт и теперь хотите поделиться им со всем миром. Один из самых простых способов бесплатно разместить свой сайт — использовать GitHub Pages. В этой статье блога мы рассмотрим различные методы развертывания вашего веб-сайта на страницах GitHub, используя разговорный язык и предоставляя примеры кода. Давайте начнем!

Метод 1: развертывание вручную
Если вы предпочитаете практический подход, развертывание вашего веб-сайта на страницах GitHub вручную является простым вариантом. Вот как это можно сделать:

Шаг 1. Создайте репозиторий
Создайте новый репозиторий на GitHub. Обязательно инициализируйте его с помощью файла README.

Шаг 2. Клонируйте репозиторий
Откройте терминал и перейдите в каталог, в котором вы хотите хранить код вашего веб-сайта. Используйте следующую команду, чтобы клонировать репозиторий на локальный компьютер:

git clone https://github.com/your-username/your-repo.git

Шаг 3. Добавьте файлы вашего веб-сайта
Скопируйте файлы вашего веб-сайта и вставьте их в каталог клонированного репозитория.

Шаг 4. Зафиксируйте и отправьте
В терминале перейдите в каталог репозитория и используйте следующие команды для фиксации и отправки изменений:

git add .
git commit -m "Initial commit"
git push origin main

Шаг 5. Включите страницы GitHub
На странице репозитория GitHub перейдите на вкладку «Настройки» и прокрутите вниз до раздела «Страницы GitHub». Выберите ветку, которую хотите развернуть (например, «основную» или «главную») и нажмите «Сохранить».

Поздравляем! Теперь ваш веб-сайт развернут на GitHub Pages. Вы можете получить к нему доступ по адресу https://your-username.github.io/your-repo/.

Метод 2: автоматическое развертывание с помощью действий GitHub
Если вы хотите автоматизировать процесс развертывания, вы можете использовать действия GitHub. Вот как это можно настроить:

Шаг 1. Создайте файл рабочего процесса
В своем репозитории создайте новый каталог с именем .github/workflows. Внутри этого каталога создайте файл с именем deploy.ymlи добавьте следующий код:

name: Deploy to GitHub Pages
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2
      - name: Build and Deploy
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          branch: main
          folder: .

Шаг 2. Зафиксируйте и отправьте
Зафиксируйте и отправьте изменения в свой репозиторий. Рабочий процесс, определенный в файле deploy.yml, будет автоматически запускаться при каждом нажатии на ветку main.

Шаг 3. Проверка развертывания
Перейдите на вкладку «Действия» на странице репозитория GitHub, чтобы отслеживать ход рабочего процесса развертывания. После успешного завершения рабочего процесса ваш веб-сайт станет доступен по адресу https://your-username.github.io/your-repo/.

Метод 3. Развертывание генератора статических сайтов
Если вы используете генератор статических сайтов, например Jekyll, Hugo или Gatsby, развертывание на страницах GitHub станет еще проще. Эти генераторы обеспечивают встроенную поддержку развертывания страниц GitHub. Вот общая схема процесса:

1. Создайте новый репозиторий на GitHub.
2. Клонируйте репозиторий и следуйте документации генератора, чтобы настроить проект.
3. Создайте файлы своего веб-сайта с помощью команды сборки генератора.
4. Зафиксируйте и отправьте сгенерированные файлы в свой репозиторий.
5. Включите GitHub Pages в настройках репозитория, выбрав соответствующую ветку.

Развертывание вашего веб-сайта на GitHub Pages — это фантастический способ поделиться своей работой со всем миром, не тратя ни копейки на хостинг. В этой статье мы рассмотрели различные методы, включая развертывание вручную, автоматическое развертывание с помощью действий GitHub и развертывание генераторов статических сайтов. Выберите метод, который соответствует вашим потребностям, и начните демонстрировать свой веб-сайт всему миру уже сегодня!