Github pages как разместить сайт

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

Для размещения статического веб-сайта можно воспользоваться сервисом GitHub Pages. Статический сайт состоит из HTML-страниц с неизменным содержимым. Такие сайты могут использоваться как визитки, портфолио, презентационные страницы.

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

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

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

• Нельзя использовать на сайте PHP либо другие серверные языки;
• Серверный код и серверные скрипты выполняться не будут;
• Cookies не используются.

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

1. Создайте аккаунт на GitHub. Предположим, your-account-name — название вашего аккаунта.
2. Cоздайте новый репозиторий для вашего проекта. При создании введите название репозитория (например, repo-name), выберите тип репозитория Public и нажмите на кнопку Create repository:
3. Перейдите в настройки (Settings) созданного репозитория:
4. В настройках репозитория найдите вкладку Options:
5. Пролистайте вниз и найдите раздел Github Pages. Установите в качестве источника файлов вашей страницы ветку master созданного репозитория:
6. Как только вы сохраните изменения, появится сообщение о том, что сайт готов к публикации по адресу вида your-account-name.github.io/repo-name:
7. Далее загрузите все файлы вашего проекта в ветку master созданного репозитория repo-name. При этом файл index.html должен находиться в корневой директории проекта:
8. Для проверки работы сайта просто перейдите по адресу https://your-account-name.github.io/repo-name – и вы увидите свою страницу, загруженную на Github Pages:

Как создать бесплатный сайт на GitHub Pages

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

Тогда эта статья для вас.

А зачем мне сайт?

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

Существует несколько способов по созданию простых и бесплатных сайтов для начинающих. В основном такие сайты делаются на базе GitHub и WordPress.

WordPress — это отличный вариант для новичков, которые не разбираются в сайтостроении. К сожалению, здесь есть одно «но». Если создавать бесплатный сайт на WordPress, то все увидят, что вы пользуетесь этой платформой, поскольку адрес сайта будет заканчиваться на wordpress.com, а внизу каждой страницы появится логотип WordPress.

Знакомясь с миром технологий, вы быстро заметите, что умение работать с GitHub даст вам явное преимущество. Ну, а если вы уже прочно обосновались в ИТ-вселенной, то, скорее всего, успели отметиться в каком-то GitHub-репозитории.

При размещении проектов на GitHub люди видят не только ваш код, но и то, что вы делаете и как. GitHub — это настоящий круговорот идей. Так почему бы не создать свой сайт на GitHub и не разместить его в самом репозитории? К тому же так вы добавите несколько коммитов к своему профилю!

Прокрутите до GitHub pages. Здесь вы увидите следующее:

Теперь в выпадающем меню Source выберите master branch или master branch/docs folder. Разница вот в чем: если вы будете размещать проект из папки docs, то эта папка (docs) обязательно должна присутствовать в ветке master, из которой запускается сайт!

Если вы совсем новичок, то, скорее всего, выберете master branch. То есть репозиторий будет размещен «как есть».

Далее следует уведомление, что сайт готов к размещению.

Проявите терпение. Подождите минуту-другую, а затем обновите страницу или попробуйте открыть нужную вам ссылку. Как только сайт будет размещен, вы увидите следующее:

Кликните по этой ссылке.

А вот и ваш бесплатный сайт!

Теперь попробуем создать сайт с нуля.

Я не знаю, с чего начать!

Сейчас поговорим об основах, а Bootstrap, верстку и т.д. прибережем до следующего раза.

Раз мы создаем сайт с нуля, то делать это будем в самом GitHub.

Для начала создадим новый репозиторий.

Укажите название репозитория, его краткое описание, отметьте галочкой Initialize this repository with a README и нажмите Create repository.

Теперь идем в Settings (правый верхний угол) и прокручиваем до раздела GitHub Pages. Открываем выпадающее меню, меняем его значение с None на master branch.

Сначала вы увидите вот это:

Подождите минуту-другую. Теперь вы видите это:

Кликните по ссылке.

Поздравляю: ваш сайт готов!

Чего-то не хватает

Да, сайт выглядит немного скучновато. Но здесь отображается содержимое вашего файла README.

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

Markdown дает вам множество разных возможностей. Например, вы можете добавить текст, картинки, ссылки, цвета или выполнить простое форматирование.

(Помните, что при добавлении изображений в README, нужно обязательно загружать их в репозиторий. Иначе GitHub не поймет, о чем речь!)

Теперь вернитесь в свой сайт и оцените результат.

Довольно часто для вступления в силу изменений нужно выждать несколько минут. Если вдруг ваш браузер постоянно откатывается к предыдущей версии сайта, то просто почистите историю в браузере за последние сутки.

Уже хорошо, но может быть еще лучше

Совсем новичкам, не разбирающимся в CSS, но мечтающим о красивом сайте, может понравиться тема Jekyll. Встроенные темы позволяют изменять внешний вид сайта без каких-либо усилий с вашей стороны. Jekyll и GitHub сделают за вас всю работу, а вам останется лишь нажать одну-две кнопки.

Давайте вернемся к GitHub Pages в Settings и нажмем Choose a theme.

Проверим, как изменится сайт при выборе первой из доступных тем. Для этого нажмите зеленую кнопку Select theme, немного подождите и еще раз откройте свой сайт.

Пару минут спустя видим результат:

Вот и все! Вы создали свой первый бесплатный сайт-визитку, блог или портфолио, разместили его в GitHub-репозитории и готовы представить свое творение миру!

Несколько примечаний:

* Если вдруг вам разонравилась текущая тема, то ее можно запросто удалить. В репозитории есть файл _config.yml, в котором размещается информация о теме. Удалите этот файл, и ваша тема удалится вместе с ним!

* Если вы хотите сменить тему или что-то в нее добавить, то опять же ищите файл _config.yml и меняйте там все, что захотите. Можете даже начать с темы Jekyll Now — это простой и уже готовый блог.

Размещение на GitHub Pages — Основы HTML, CSS и веб-дизайна

Мы уже изучили вкратце такие темы, как хостинг и HTTP-запросы в уроке Хостинг курса «Введение в веб-разработку». Стоит освежить память, перечитав тот урок, если следующие термины вам не сразу понятны:

Сегодня мы хотим разместить нашу простую HTML-страницу в интернете таким образом, чтобы она стала доступна всем.

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

Но у нас простой случай: есть один HTML-файл и один CSS-файл, нет никакой бизнес-логики или взаимодействий. Достаточно чтобы какая-то машина, подключённая к интернету, отдавала содержимое этих файлов в браузер пользователя по запросу.

По сути это та же операция, что происходит у вас на компьютере, когда вы просто открываете свой локальный HTML-файл в браузере:

1. Операционная система делает запрос в жёсткий диск или оперативную память.
2. Жёсткий диск или оперативная память отдают содержимое файла.
3. Операционная система направляет содержимое файла в программу «браузер».
4. Браузер обрабатывает файлы (потому что знает как это делать, ведь файлы написаны по стандартам HTML и CSS) и формирует внешний вид.

Всё, что мы хотим сделать, это перенести файлы с локального компьютера на удалённый, и сделать так, чтобы к нему можно было обращаться по протоколу HTTP через интернет. В итоге получится так:

GitHub

Если вы проходите наши курсы по порядку, в рамках программ обучения (например, «Бэкенд JS-программист» или «Фронтенд JS-программист»), то в скором будущем вас ожидает курс по Git. Один из уроков там будет посвящён GitHub.

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

Страницы, размещённые на GitHub Pages, могут быть доступны на их поддомене (например, https://guides.hexlet.io/ru/) или на домене второго уровня (например, мой блог https://rakh.im/ ), если у вас есть свой домен.

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

1. Зарегистрируйтесь на https://github.com/ , если ещё не сделали этого.
2. Создайте новый репозиторий с именем username.github.io , где username — ваш ник на GitHub.
3. Создайте новый файл. Когда репозиторий не пуст, то в верхнем правом углу есть кнопка «Create New File», но сейчас, когда ещё нет ни одного файла, создать первый можно по прямой ссылке https://github.com/username/username.github.io/new/master , где username — ваш ник.
4. Введите имя index.html и скопируйте туда содержание файла index.html, который у вас получился в предыдущем уроке.
5. Нажмите кнопку «Commit new file».
6. Повторите то же самое для файла style.css.
7. Подтвердите публикацию на GitHub Pages. В настройках репозитория: Settings -> Раздел Options -> Секция GitHub Pages.
8. Через несколько мгновений страница станет доступна по вашему адресу https://username.github.io

(Если вы умеете работать с Git и собираетесь делать всё локально, то при создании репозитория советую выбрать «Initialize this repository with a README» — в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать. В противном случае нужно будет инициализировать репозиторий локально и добавить удалённый репозиторий).

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Пошаговая инструкция: как сделать бесплатный сайт на GitHub Pages

Если вам нужен сайт, состоящий из статических HTML-страниц, то необязательно приобретать хостинг — можете воспользоваться GitHub Pages. В статье расскажем, что это за сервис, какие у него преимущества, и поделимся пошаговой инструкцией, которая поможет вам разместить сайт на GitHub.

GitHub Pages — что это?

Давайте начнём с азов— когда вы создаёте сайт, он остаётся на вашем компьютере. И, следовательно, посмотреть его можно только с вашего ПК. А значит для того, чтобы вашу веб-страницу смог открыть другой человек, нужно перенести файлы на его устройство. И, чтобы не переносить эти файлы на все устройства мира, придумали облачные хранилища для сайтов. Их также называют хостингом.

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

И здесь важно разобраться с терминами, потому что GitHub Pages очень тесно связаны с такими понятиями как «Git» и «GitHub».

Git — это самая популярная система контроля версий в мире. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux.

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

GitHub Pages — это бесплатный хостинг для статических файлов.

У GitHub Pages есть своя специфика работы (спойлер: она же и является главным преимуществом сервиса). Как мы сказали выше, обычный хостинг размещает файлы вашего сайта на своих серверах и скрывает всю его техническую часть от посторонних пользователей. GitHub Pages — бесплатен, поэтому технические файлы вашего сайта будут открыты. Для чего это нужно? Для того, чтобы все смогли насладиться красотой вашего кодинга �� .

Поэтому GitHub — это настоящий круговорот креативных идей. Кстати, многие работодатели просят в резюме указать ссылку на ваш аккаунт на этом ресурсе, чтобы посмотреть дату регистрации и проекты, которыми вы там занимались.

Из других преимуществ:

Это полноценный сайт с HTTPS. В логику простого сайта отлично укладывается множество простых страниц: небольшой сайт компании, личная страничка, простой блог, лендинг или сайт-визитка на GitHub.

За статическим сайтом не нужно следить,а значит не нужно отслеживать версионность CMS и другого ПО, которое легче взломать.

Возможность деплоя через Git. Благодаря тому, что это децентрализованная система, всегда есть резервная локальная версия сайта.

Так как же добавить сайт на GitHub, украсив им своё портфолио? Сейчас расскажем.

Инструкция: как сделать сайт на GitHub Pages с нуля

Шаг 1. Создаём новый репозиторий

Репозиторий — место, где будет «жить» ваш проект. Здесь вы сможете создать структуру проекта и хранить нужные для него файлы: наборы данных, фотографии, видео и так далее.

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

Далее в блоке «Your repositories» нажимаем кнопку «New repository», чтобы создать новый репозиторий. Ему можно задать имя в формате «login.github.io», где login — это ваш ник на ресурсе.

Также можете дать ему краткое описание. После отметьте галочкой «Initialize this repository with a README» и нажмите «Create repository».

Шаг 2. Настраиваем сайт

Перед нами открывается такое окно:

В верхней панели нажимаем на правую кнопку «Settings». Прокручиваем вниз до раздела «GitHub Pages». Открываем выпадающее меню и меняем значение с «None» на «branch: Main».

После нажимаем на кнопку «Save». Перед вами появится синее поле, на котором будет отображена ссылка на ваш сайт.

И…это всё — ваш сайт готов:

Да, пока что сайт на Гитхабе выглядит немного скучновато. Но здесь важно понимать, что все отображение страницы зависит от содержимого вашего файла README.

Шаг 3. Редактируем страницу

Как же залить сайт на GitHub? Чтобы внести изменения для файла, возвращаемся из вкладки «Setting» во вкладку «Code».

И здесь начинается ваше творчество — подкорректируйте README и добавьте туда все, что сочтете нужным. Вы также можете залить уже сделанный вами сайт, нажав на кнопку «Add file». Или попробовать создать сайт с нуля. Для этого кликните по иконке с карандашом и начните изменять README.

Markdown — удобный и быстрый способ разметки текста — предоставит вам множество возможностей. Например, вы можете добавить текст, картинки, ссылки, цвета или выполнить простое форматирование.

В качестве примера давайте напишем приветствие и добавим простую картинку:

И не забывайте, что при добавлении изображений в файл README, вы должны обязательно загружать их в репозиторий, чтобы GitHub не поймет, о чём речь.

Теперь прокручиваем страницу вниз и нажимаем на зелёную кнопку «Commit changes».

Вы можете перейти по вашей ссылке, чтобы оценить результат, или увидеть его в предпросмотре во вкладке «Code». Вот, что получилось у нас:

Шаг 4. Привязываем домен

Чтобы подключить свой домен к проекту на GitHub Page, нужно снова открыть настройки и перейти в раздел «GitHub Pages».

Здесь всё просто. Если у вас уже есть доменное имя для проекта, вставьте его в строку свой адрес и нажмите «Save».

Если же домена нет, нужно зарегистрировать его и вернуться к шагу выше ;). Сделать это можно в REG.RU. Не забывайте, что домен правильно подобранное доменное имя влияет по меньшей мере на три показателя:

• запомнят ли пользователи название вашего сайта;
• как быстро найдут его в интернете;
• будет ли сайт «в топе» в поисковых системах.

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

Шаг 5 (опциональный). Добавляем тему

С учетом, что это заняло буквально пару минут времени, выглядит уже хорошо, но даже такую простую страницу можно сделать лучше :).

Если вы совершенно не разбираетесь в CSS, но хотите красивый сайт — воспользуйтесь встроенными темами Jekyll. Они помогут изменить внешний вид страницы без каких-либо усилий — нужно только нажать на пару кнопок.

Для этого возвращаемся в раздел настроек на верхней панели («Settings»), снова переходим в раздел «GitHub Pages» и нажимаем «Choose a theme». Перед вами открывается несколько доступных тем.

Выберите понравившуюся и кликните на зелёную кнопку «Select theme». Не пугайтесь, если тема не обновляется сразу — подождите пару минут и ещё раз откройте свой сайт.

Вот и всё! Вот так быстро и просто можно создать статичный сайт и разместить его в GitHub-репозитории.

Надеемся, что наша пошаговая инструкция помогла вам разобраться с сервисом GitHub Pages. Обязательно поделитесь в комментариях отзывом о GitHub Pages и бесплатном хостинге от GitHub.

И, конечно же, регистрируйте красивые и лаконичные доменные имена для ваших проектов.