Загрузка сайта на GitHub Pages, не выходя из редактора кода

Мой коллега, Ризель Скарлетт, создал расширение для VScode, которое позволяет отправлять ваш сайт на страницы GitHub прямо из редактора.

Ризель всегда хотел создать расширение и в сотрудничестве с командой VScode создал это расширение, которое позволяет быстро загружать статические сайты (на Jekyll или HTML) на страницы GitHub всего несколькими щелчками мыши.

Если вы хотите узнать больше о том, что такое страницы GitHub, рекомендую прочитать эту статью.

Шаг за шагом

1. Создайте хранилище

Сначала необходимо создать репозиторий на GitHub для вашего сайта.

В этом руководстве я буду работать с моим личным сайтом, поэтому моя репозитория будет называться pachi-page.

2. Создайте файл вашего сайта

Создайте файл index.html в вашем хранилище.

3. Установка расширения

Откройте VScode и установите расширение «Deploy to GitHub Pages».

4. Клонируйте ваш репозиторий, откройте его в VScode и закодируйте остальную часть вашего сайта.

Не забудьте подтолкнуть свой сайт перед продолжением (я забыл, упс).

5. Развертывание вашего сайта

Когда ваш сайт готов, внутри VScode откройте строку поиска для поиска новых файлов.

Это можно сделать с помощью следующих методов:

  1. С помощью функции Перейти к файлу, которая находится в меню Перейти

  2. Использование этой комбинации клавиш в Windows Ctrl+p или Ctrl+e

  3. Использование этой комбинации клавиш в macOS Cmd ⌘+p

  4. Использование этой комбинации клавиш в Linux Ctrl+p или Ctrl+e

В строке поиска введите > , и нажмите Deploy to Github Pages.

Расширение предоставит вам варианты репозиториев для загрузки вашей страницы, поэтому уделите внимание выбору подходящего:

После выбора хранилища появится предупреждение, запрашивающее разрешение на вход в GitHub:

Подождите, пока расширение выполнит свою работу:

Теперь нажмите на ссылку, и ваш сайт появится в Интернете! Вот сайт, который я создал: https://pachicodes.github.io/pachi-page/

Заключительные мысли:

Эта статья была написана на основе английской статьи Rizel.
Если вы хотите узнать, как было сделано это расширение, она объясняет в этой статье
Это расширение с открытым исходным кодом, поэтому вы можете внести в него свой вклад.

Спасибо всем за чтение и следите за официальной страницей GitHub Brazil в Twitter, чтобы быть в курсе всех новостей!

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