Как быстро выложить сайт на GitHub хостинг с помощью PhpStorm

Один из самых простых и удобных способов быстро выложить сайт на GitHub хостинг — воспользоваться возможностями редактора PhpStorm.

В PhpStorm осуществлена интерактивная работа с Git — это огромный плюс данного редактора, дающий возможность работать с системой контроля версий даже без знаний команд, и снижающий риск осуществления ошибок.

irene-97 — пользователь GitHub, cantus — название сайта
irene-97 — пользователь GitHub, cantus — название сайта

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

Сразу предупреждаю — сборка и структура проектов у всех разная. То, что описано в данном примере, может сильно отличаться от вашей структуры сайта. Здесь описана лишь концепция в целом. Поэтому, если вы совсем в этом не разбираетесь — этот пример не для вас :(

Для начала нужно, конечно же, подключить свой GitHub-аккаунт к PhpStorm:

Вкладка «File» — «Default Settings»
Вкладка «File» — «Default Settings»

Вход осуществляется через токен или логин-пароль от Github (выбрать можно в выпадающем списке Auth Type).

Шаг 1

Нужно поделиться своим проектом на Github. То есть создать репозиторий. Пункт меню «VCS» — «Import into Version Control» — «Share Project on GitHub».

Верхнее меню PhpStorm
Верхнее меню PhpStorm

Шаг 2

Теперь требуется в вашем проекте (который вы хотите выложить) создать новую ветку. В правом нижнем углу жмем «Git: master» — «New Branch»:

Панель веток git

Ветка обязательно должна называться gh-pages:

Создание новой ветки
Создание новой ветки

Шаг 3

Находясь на ветке gh-pages, нужно удалить все файлы, кроме скомпилированных (в моем случае они в папке build — картинки, скрипты, стили, страницы), node_modules и .gitignore. Readme и лицензию, если имеются, можно оставить.

Структура проекта
Структура проекта

node_modules, .gitignore и скомпилированные файлы (картинки, скрипты, стили, шаблоны) должны остаться!

Шаг 4

Далее нужно всё перенести в корень проекта (в моем случае всё из папки build).

Скомпилированные файлы
Скомпилированные файлы

Файлы стали красными — нужно сделать коммит:

Чтобы сделать коммит, нужно в левом нижнем углу, во вкладке «Version Control», кликнуть правой кнопкой мыши по «Default». Далее выбираем «Commit»:

Делаем коммит измененных файлов
Делаем коммит измененных файлов

Окно для создания коммита (текст коммита может быть любой):

Окно для создания коммита
Окно для создания коммита

Шаг 5

После того, как сделан коммит в ветке gh-pages, нужно отправить всё на сервер (то есть GitHub). Комбинация клавишей Ctrl+Shift-K.

Окно Push. Жмем на кнопку Push
Окно Push. Жмем на кнопку Push

Возвращаемся на ветку master:

Переход на локальную ветку master
Переход на локальную ветку master

И точно так же комбинацией клавиш Ctrl+Shift-K отправляем все изменения на сервер.

Если вы всё правильно сделали, то сайт будет доступен по ссылке такого вида:

https://пользователь.github.io/название-репозитория/

Подведём итог

Чтобы выложить сайт на хостинг Github, нужно:

  1. Создать репозиторий с проектом на GitHub.
  2. Создать новую ветку gh-pages.
  3. Удалить всё, кроме node_modules, .gitignore, и скомпилированных файлов (скомпилированные скрипты, стили, картинки, шаблоны и т.п.)
  4. Разместить содержимое в корень проекта (если оно не в корне) и сделать commit.
  5. Сделать push с ветки gh-pages и с ветки master.

Это проще, чем кажется на первый взгляд. PhpStorm позволяет опубликовать сайт очень быстро. Даже не требуется переходить в свой аккаунт на GitHub, и осуществлять какие-либо манипуляции — всё можно сделать в редакторе за пару минут!