Инструкция по размещению сайта на GitHub Pages

github pages Инструментарий

Если вы занимаетесь версткой, по сервис GitHub Pages точно для вас, на нем можно бесплатно размещать статические веб-сайты (html/css/js/изображения). Либо вы сверстали себе визитку или портфолио и не хотите заморачиваться с хостингами, то гитхаб тоже для вас тоже может подойти, при определенных условиях, см. ниже на ограничения.

Особенности и ограничения

Сервис Github Pages предоставляет следующие возможности для статических сайтов:

  • Использование HTML, CSS, языка разметки Markdown;
  • Встраивание изображений и другого медиа;
  • Использование JavaScript.

Ограничения:

  • Нельзя использовать на сайте PHP либо другие серверные языки — от сюда вытекает: если нужны формы например, обратной связи, то их придется создать в каких-нибудь конструкторах типа FormDesigner и затем уже встроить;
  • Серверный код и серверные скрипты выполняться не будут;
  • Cookies не используются.

Как опубликовать сайт на GitHub Pages по шагам

Шаг 1. Заводим аккаунт или авторизуемся на GitHub

Идем на GitHub. Если есть аккаунт, то авторизуемся в нем нажав на «Sing in». Если аккаунта нет, заводим его нажав на «Sing up».

Регистрация на github

На открывшейся странице пишем рабочий email и жмем на Continue.

Вводим email

Появиться окно для ввода пароля, вводите его и снова Continue, появиться поле для ввода логина, затем он спрашивает вас: «Хотите получать обновления продуктов и объявления по электронной почте?» Если хотите указываете «y», не хотите «n». После чего останется пройти капчу и нажать на кнопку «Create account».

Заводим ак на гите

На указанные email придет код который нужно ввести на открывшейся страницу. На следующей странице нужно указать количество человек компании (если она есть) и кто вы студент или преподаватель.

Welcome

Затем выбрать продукты которыми хотите пользоваться (выбирайте все — могут потом пригодиться).

Выбираем продукты

И выбираем бесплатный тарифный план.

Выбираем тарифный план

Все аккаунт создан, теперь нужно создать репозиторий для нашего проекта с вёрсткой.

Шаг 2. Создание репозитория

Чтобы создать репозиторий нажмите на кнопку «Create repository или New repository» Создание нового репозитория на github

При создании введите название репозитория (например, nzsd), его описание (не обязательно), выберите тип репозитория Public, поставьте галку на против пункта Add a README file и нажмите на кнопку Create repository:
Создание нового репозитория на github.com

Шаг 3. Загрузка файлов в созданный репозиторий

Загрузите все файлы вашего проекта, нажав на «Add fille» и выберете «Upload files»
Загрузка файлов с пк
на открывшейся странице, прям берем и перетаскиваем все файлы мышкой.
Перетаскиваем файлы в репозиторий
Перетащатся только файлы которые в корне, в моем случае это файл index.html. Директории для изображений, стилей, скриптов, нужно создавать отдельно и затем уже в них загружать файлы. Для этого щелкните по «Add file» и выбираете «Create new file».

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

Введите название директории и после названия ставим закрывающийся слэщ «/», после чего она превращается в директорию и чтобы ее создать, нужно добавить в нее какой-нибудь файл, пишем к примеру empty и нажмите «Commit new file».

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

Таким же образом сражу создаем все необходимые директории. Дальше открываем каждую из них и загружаем в них файлы.

Загрузка файлов в созданную директорию

Шаг 4. Публикация сайта в интернете

Перейдите в настройки (Settings) созданного репозитория:

Переходим в настройки репозитория

В настройках репозитория найдите вкладку Pages, на ней установите в качестве источника файлов вашей страницы ветку main и директорию root (от корня проекта) созданного репозитория и сохраните.

Указываем источник проекта и сохраняем

Теперь ваш сайт опубликован и доступен по адресу вида your-account-name.github.io/repo-name.

Адрес опубликованного сайта

Для проверки работы сайта просто перейдите по адресу https://your-account-name.github.io/repo-name – и вы увидите свою страницу, загруженную на Github Pages:

Опубликованный на githab сайт

Хотите свой домен?

Гитхаб позволяет использовать ваше доменное имя вместо стандартного username.github.io.

Для этого вам нужно купить домен, далее зайти к регистратору доменов в личный кабинет (в моем случае beget). И изменить информацию о DNS-записях домена.

Нам нужно настроить A-запись домена, для этого переходим в панель управления DNS-записями вашего регистратора, и добавим следующие A-записи:

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

Добавлять записи для домена желательно и для с www, и для без www.

Быстрое добавление А записей для домена

После этого нужно подождать хотя бы пару часов и можно идти на гитхаб в настройку репозитория, во вкладке Pages (см. шаг 4) в поле Custom domain ввести название домена (с www или без www — в зависимости где меняли A записи) и нажать кнопку Save.

Привязываем проект к домену

Всё готово! В течение нескольких часов сайт начнет открываться с нового домена.

Все способы подключения собственного домена подробно описаны в памятке GitHub.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 1 оценка, среднее 5 из 5 )
Web-Revenue.ru