Написать пост

Гайд: как разместить сайт бесплатно на GitHub Pages

Сделали пошаговую инструкцию, которая поможет создать сайт с нуля без навыков вёрстки и разместить его на GitHub Pages.

Гайд: как разместить сайт бесплатно на GitHub Pages

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

Можно использовать GitHub Pages — сервис платформы GitHub, который даёт возможность публиковать сайты в сети совершенно бесплатно.

Что такое GitHub Pages и для чего он нужен

GitHub Pages — инструмент, который принимает файлы HTML, CSS и JavaScript, находящиеся в репозитории, и делает из них веб-сайт, доступный любому человеку в сети.

Изначально GitHub Pages использовали веб-программисты, чтобы посмотреть, как выглядит вёрстка и работает код, но со временем этот инструмент стал популярен для размещения лендингов, сайтов-визиток и других несложных проектов у людей, не связанных с IT. 

Какие фишки есть у GitHub Pages:

  • можно использовать как свой дизайн, так и встроенные шаблоны оформления;
  • присутствует поддержка плагинов — на сайт можно добавить комментарии, слайдеры, формы для авторизации;
  • есть встроенный редактор кода, который позволяет вносить изменения на сайт без скачивания дополнительного софта. 

Как выложить сайт на GitHub Pages

Шаг № 1 — переходим в личный профиль

Откройте официальный сайт GitHub. Зарегистрируйтесь или войдите в аккаунт, если он у вас уже есть. 

Гайд: как разместить сайт бесплатно на GitHub Pages 1

Шаг № 2 — создаём репозиторий

Репозиторий — хранилище всех папок и файлов, связанных с вашим сайтом. Обычно там находятся html-файлы с разметкой, css-стили, картинки и JS-скрипты.

Кликните на иконку аккаунта в правом верхнем углу, затем нажмите Your repositories. Это раздел, в котором будут храниться все ваши репозитории.

Гайд: как разместить сайт бесплатно на GitHub Pages 2

Чтобы создать новый репозиторий, нажмите на зелёную кнопку New.

Гайд: как разместить сайт бесплатно на GitHub Pages 3

Также вы можете создать репозиторий из любого раздела профиля, кликнув на +, а затем — New repository.

Гайд: как разместить сайт бесплатно на GitHub Pages 4

После этого вы увидите страницу создания репозитория. Здесь нужно указать его имя, описание (при необходимости) и поставить галочку напротив пункта Add a README file. Остальные настройки менять не нужно. Когда всё будет заполнено, нажмите на зелёную кнопку Create repository.

Гайд: как разместить сайт бесплатно на GitHub Pages 5

Готово! Теперь у вас есть репозиторий, в который вы можете добавить файлы сайта или создать его с нуля.

Гайд: как разместить сайт бесплатно на GitHub Pages 6

Шаг № 3 — подключаем GitHub Pages

Теперь вы можете превратить файлы из репозитория в сайт с уникальным адресом. Для этого зайдите на страницу репозитория и кликните по вкладке Settings.

Гайд: как разместить сайт бесплатно на GitHub Pages 7

В меню слева найдите вкладку Pages, затем в блоке Branch поменяйте None на Main. Это нужно для того, чтобы сайт собрался из главной ветки репозитория. После кликните на кнопку Save, подождите пару минут и обновите страницу. В верхней части страницы должна появиться ссылка на сайт. Она состоит из вашего юзернейма, домена GitHub и названия репозитория. При желании вы можете оплатить и использовать личный домен — его нужно указать в разделе Custom domain.

Гайд: как разместить сайт бесплатно на GitHub Pages 8

Теперь вы можете перейти по ссылке и проверить, что получилось. Так как наш сайт пока состоит из пары строк текста, в нём ещё мало интересного. Но мы это исправим.

Гайд: как разместить сайт бесплатно на GitHub Pages 9

Если у вас уже готов файл с html-разметкой сайта, а может быть, даже css-стили и JS-скрипты, просто загрузите их в репозиторий. Для этого нажмите Add file, а потом — Upload files.

Гайд: как разместить сайт бесплатно на GitHub Pages 10

Обратите внимание, что файл index.html должен находиться в корне, а не во вложенных папках. Иначе GitHub Pages не соберёт сайт.

Выберите все файлы проекта и кликните на кнопку Commitchanges, чтобы загрузить файлы в репозиторий, и подождите, когда изменения вступят в силу.

Гайд: как разместить сайт бесплатно на GitHub Pages 11

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

Гайд: как разместить сайт бесплатно на GitHub Pages 12

На этом публикация готового сайта на GitHub Pages завершена. Далее мы будем рассказывать о разработке сайта с нуля для тех, кто не хочет создавать html-вёрстку и css-стили самостоятельно.

Шаг № 4 — редактируем страницу с помощью markdown-разметки

Пока в нашем репозитории есть только файл README.md, но и с его помощью можно сделать простой сайт. Расширение .md — сокращение от слова markdown. Markdown-разметку используют наряду с HTML для форматирования текста и добавления изображений на страницу.

Для редактирования файла нажмите на значок карандаша.

Гайд: как разместить сайт бесплатно на GitHub Pages 13

Чтобы освоить возможности Markdown, изучите официальный гайд от GitHub.Здесь же мы просто покажем пример использования разметки для сайта.

Мы добавили заголовки первого и второго уровней с помощью #, сделали список со ссылками на проекты и вставили на страницу фото нашего героя. Во вкладке Preview можно посмотреть, как это будет выглядеть на странице.

Гайд: как разместить сайт бесплатно на GitHub Pages 14
Гайд: как разместить сайт бесплатно на GitHub Pages 15
Все совпадения считать случайными. Tproger такой один!

Чтобы сохранить все внесённые изменения, пролистайте вниз и нажмите на кнопку Commit changes. Через пару минут изменения отобразятся на странице.

Гайд: как разместить сайт бесплатно на GitHub Pages 16

Шаг № 5 — добавляем тему оформления

Кажется, нашей странице не хватает стилей. Но даже если вы не хотите постигать азы CSS, это не проблема. Можно выбрать одну из готовых тем GitHub, полный список которых доступен по ссылке. Например, Cayman — как на Tproger. Чтобы использовать тему, нужно скопировать из файла README.md для выбранной темы строку формата remote_theme: название_темы. В нашем случае эта строка выглядит так:

Гайд: как разместить сайт бесплатно на GitHub Pages 17

Затем нужно вернуться на страницу нашего репозитория и добавить в него новый файл. Для этого нажмите Add file, а затем — Create new file.

Гайд: как разместить сайт бесплатно на GitHub Pages 18

Новый файл пусть будет называться _config.yml. Вставьте в него скопированную строчку с именем темы и нажмите кнопку Commit new file, чтобы применить изменения.

Гайд: как разместить сайт бесплатно на GitHub Pages 19

Подождите несколько минут, пока изменения вступят в силу. Готово — шрифты и фон заиграли новыми красками! С этим уже можно работать дальше. Например, добавить контакты для связи, описание пет-проектов, хард- и софт-скилы.

Гайд: как разместить сайт бесплатно на GitHub Pages 20

Разместить или создать свой сайт на GitHub Pages может любой человек, даже далёкий от вёрстки и программирования. Этот инструмент поможет вам без каких-либо затрат публиковать в интернете лендинги, резюме и портфолио работ.

Следите за новыми постами
Следите за новыми постами по любимым темам
7К открытий11К показов