Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>6 дек 2022</li>

3 <li>0</li>

4 </ul>Это как Tilda и WordPress, только ещё круче.

5 Шеф-редактор Skillbox Media "Код". Пишет о разработке, софт-скиллах и культовых личностях в IT. Обожает Swift, продукты Apple и мемы про код.

6 Продолжаем изучать главный сервис для хранения IT-проектов. В этой статье разберёмся, как разместить на GitHub полноценный сайт с бесплатным хостингом и несложным дизайном. Это может быть полезно разработчикам, фрилансерам, бизнесу и всем, кто хочет публично рассказать о своих проектах и услугах.

7 GitHub Pages - это часть платформы GitHub, заточенная специально под размещение сайтов в интернете.

8 Изначально его придумали для рабочих нужд программистов, чтобы они могли публиковать свой код в интернете и смотреть, как он работает. А потом его оценили и обычные пользователи - например, на базе Pages часто делают сайты-визитки, портфолио, лендинги и другие проекты.

9 Устроено там всё просто: вы загружаете исходники сайта, а на выходе получаете ссылку на готовый ресурс в Сети. Вам не нужно думать о домене, хостинге и безопасности - все эти заботы сервис берёт на себя.

10 У Pages есть и другие фишки:

11 <ul><li>Адаптивность.Сайт одинаково хорошо выглядит на смартфонах и компьютерах.</li>

12 <li>Шаблоны оформления.Можно использовать стандартную тему или поискать бесплатные решения от разработчиков на GitHub.</li>

13 <li>Поддержка плагинов.Вы можете подключить к сайту комментарии, формы авторизации или слайдер с публикациями.</li>

14 <li>Удобный редактор кода.Он позволяет разработать и опубликовать сайт с нуля прямо в веб-версии GitHub - вам не нужно скачивать среду разработки и другой софт.</li>

15 - </ul>Сайт-визитка, созданная на основе GitHub PagesИсточник:<a>medium.com</a>А теперь, как и обещали, подробная инструкция по настройке и публикации сайта. Поехали.

15 + </ul>Сайт-визитка, созданная на основе GitHub PagesИсточник:<a>medium.com</a>А теперь, как и обещали, подробная инструкция по настройке и публикации сайта. Поехали.

16 Шаг 0

17 Тут особо и говорить нечего, разберётесь сами ?

18 Скриншот: Skillbox MediaШаг 1

19 Репозиторий - это место, где будет лежать исходный код вашего сайта. Можно сравнить его с файловой системой на компьютере, только вместо личных данных - HTML-разметка, скрипты, картинки и другое содержимое веб-страницы.

20 Для начала - откройте раздел c репозиториями. Нажмите на иконку аккаунта в правом верхнем углу и выберитеYour repositories:

21 Скриншот: Skillbox MediaЧтобы добавить новый репозиторий, нажмите кнопкуNewв правом верхнем углу:

22 Скриншот: Skillbox MediaТеперь ваша задача - задать базовые настройки будущего сайта: имя, описание и видимость в интернете. Можно сделать всё как на скриншоте:

23 Скриншот: Skillbox MediaГотово! У вас есть репозиторий, куда можно загрузить файлы уже написанного сайта или создать его с нуля. Едем дальше.

24 Шаг 2

25 Настало время превратить ваш репозиторий в настоящий сайт с собственным адресом в интернете. Чтобы это сделать, открываем проект и заходим в настройки:

26 Скриншот: Skillbox MediaВ меню слева выбираем разделPages. Затем переходим к пунктуBranchи меняем значениеNoneна Main - это значит, что сайт будет собираться из главной ветки репозитория. После этого нажмитеSaveи подождите пару минут - когда GitHub сформирует сайт, наверху появится ссылка:

27 Скриншот: Skillbox MediaПоздравляем, сайт готов! Можно открыть ссылку и посмотреть, что получилось:

28 Скриншот: Skillbox MediaТак как наш сайт состоит пока всего из одного файла, в нём ещё мало чего интересного - только название и описание. Но дальше - больше :)

29 Если хотите сделать сайт красивым, но не разбираетесь в сложной разметке, можно использовать бесплатный дизайн от Jekyll. Вот как это сделать:

30 Шаг 0.Выбираем любую тему на <a>странице поддерживаемых тем GitHub</a>. Например, нам понравилась Cayman - она выглядит современно и минималистично.

31 Шаг 1.В файлеReadmeвыбранной темы скопируйте строчку remote_theme: название_темы.

32 Скриншот: Skillbox MediaШаг 2.Откройте репозиторий вашего сайта и создайте файл _config.yml. Для этого нажмите:Add file→Create new file.

33 Скриншот: Skillbox MediaШаг 3.Вставьте скопированную строчку и сохраните файл, нажав на кнопкуCommit Changesвнизу страницы. Подождите несколько секунд и наслаждайтесь мощью современного веб-дизайна:

34 Скриншот: Skillbox MediaВажная оговорка: так как Jekyll не понимает обычного человеческого языка, для работы с готовыми темами надо освоить текстовую разметку Markdown. Она очень простая и учится за пару часов - например, чтобы выделить текст жирным, нужно поставить по краям звёздочки -*таким образом*.А заголовки разного уровня оформляются так:

35 # Заголовок первого уровня #

36 ### Заголовок третьего уровня ###

37 ###### Заголовок шестого уровня ######

38 Как видите, сделать собственный сайт на GitHub не так уж и сложно. Основу мы уже заложили, а теперь можно развивать веб-ресурс, постепенно добавляя контент: публикации, картинки, слайдеры, ссылки, комментарии, воздушные шарики - да всё что угодно.

39 Причём делать это - сплошное удовольствие: GitHub Pages оказался столь же удобным, как и весь GitHub. Как будто блюзу обучаешься: выучил четыре аккорда блюзового квадрата - и можно играть хоть Би Би Кинга, хоть Мадди Уотерса.

40 А можно пойти ещё дальше, углубиться в тему - и делать совсем уж крутые вещи, чтоб все ахнули и даже деньги платить начали. Хотите разобраться во всём этом больше - почитайте наши статьи про<a>HTML</a>,<a>CSS</a>и <a>JavaScript</a>: на этих языках работает весь современный интернет.

41 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>