Как использовать github как хостинг
Cоздание сайта на GitHub
Для запуска сайта необязательно покупать хостинг, можно воспользоваться бесплатным сервисом GitHub Pages.
Для создания репозитория заходим на сайт GitHub и в блоке Your repositories нажимаем кнопочку New repository.
Здесь необходимо заполнить параметры нового репозитория. Важно, чтобы название репозитория было в виде username.github.io, где username — ваш ник на GitHub.
Если вы зарегистрированы в качестве организации, ваш репозиторий должен иметь имя organization.github.io, где organization — название вашей компании на GitHub.
Обязательно ставим галочку на Initialize this repository with a README. А затем нажимаем кнопку Create repository.
Репозиторий создан, теперь нужно загрузить файлы сайта. Воспользуемся интерфейсом GitHub. Нажимаем кнопку Upload files.
Затем перетащим файлы в появившееся поле для загрузки. Добавим комментарий к нашему коммиту и нажмём кнопку Commit changes.
Файлы успешно загружены.
Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в моем случае это shevelevdesign.github.io.
Гитхаб позволяет использовать ваше доменное имя вместо стандартного username.github.io.
Для этого переходим во вкладку Settings в интерфейсе репозитория, и в разделе GitHub Pages в поле Custom domain введём название нашего домена и нажимаем кнопку Save.
Далее необходимо изменить информацию о DNS-записях домена.
Нам нужно настроить A-запись домена, для этого переходим в панель управления DNS-записями вашего регистратора, и добавим следующие A-записи:
Всё готово! В течение нескольких часов сайт начнет открываться с нового домена.
Все способы подключения собственного домена подробно описаны в памятке GitHub.
Размещение на GitHub Pages — Основы HTML, CSS и веб-дизайна
Хостинг
Мы уже изучили вкратце такие темы, как хостинг и HTTP-запросы в уроке Хостинг курса «Введение в веб-разработку». Стоит освежить память, перечитав тот урок, если следующие термины вам не сразу понятны:
Сегодня мы хотим разместить нашу простую HTML-страницу в интернете таким образом, чтобы она стала доступна всем.
Если бы мы писали полноценное веб-приложение с какой-то логикой, например, с регистрацией и авторизацией пользователей, отправкой и сохранением информации, то нам требовалось бы достаточно комплексное решение с серверами и, возможно, базами данных. Конечному посетителю в любом случае будет приходить HTML, но на стороне сервера могут происходить самые разные сложные операции.
Но у нас простой случай: есть один HTML-файл и один CSS-файл, нет никакой бизнес-логики или взаимодействий. Достаточно чтобы какая-то машина, подключённая к интернету, отдавала содержимое этих файлов в браузер пользователя по запросу.
По сути это та же операция, что происходит у вас на компьютере, когда вы просто открываете свой локальный HTML-файл в браузере:
Всё, что мы хотим сделать, это перенести файлы с локального компьютера на удалённый, и сделать так, чтобы к нему можно было обращаться по протоколу HTTP через интернет. В итоге получится так:
GitHub
Если вы проходите наши курсы по порядку, в рамках программ обучения (например, «Бэкенд JS-программист» или «Фронтенд JS-программист»), то в скором будущем вас ожидает курс по Git. Один из уроков там будет посвящён GitHub.
GitHub — это хранилище кода. Кроме этого GitHub предоставляет бесплатный хостинг для статических файлов — как раз то, что нам нужно. Этот сервис называется GitHub Pages.
Страницы, размещённые на GitHub Pages, могут быть доступны на их поддомене (например, https://guides.hexlet.io/) или на домене второго уровня (например, мой блог https://rakh.im/), если у вас есть свой домен.
Для полноценной работы с GitHub необходимо хотя бы базовое понимание Git. Но если вы совсем не знакомы с этой темой — ничего страшного! Прямо сейчас, чтобы разместить страницу на GitHub Pages, нам достаточно следовать простому алгоритму.
(Если вы умеете работать с Git и собираетесь делать всё локально, то при создании репозитория советую выбрать «Initialize this repository with a README» — в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать. В противном случае нужно будет инициализировать репозиторий локально и добавить удалённый репозиторий).
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Гитхаб как хостинг
Если ваш сайт — это статические HTML-страницы, то необязательно приобретать хостинг, можно воспользоваться сервисом GitHub Pages. Для этого у вас должен быть аккаунт на Гитхабе. Как зарегистрироваться можно посмотреть в предыдущей статье.
Шаг 1. Создание нового репозитория
Для создания репозитория заходим на сайт Гитхаба и в блоке «Your repositories» нажимаем кнопку «New repository».
Теперь нам нужно заполнить параметры нового репозитория. Важно, чтобы название репозитория было в виде «username.github.io», где username — имя вашего аккаунта на Гитхабе. В нашем примере это будет «htmlacademy.github.io». Обязательно установим галочку «Initialize this repository with a README». А затем нажмём кнопку «Create repository».
Форма создания репозитория
Шаг 2. Загрузка файлов
Репозиторий создан, теперь нужно загрузить файлы. Для этого необязательно клонировать репозиторий к себе на компьютер или постигать другие нюансы работы с Гитом — можно воспользоваться интерфейсом Гитхаба. Давайте нажмём кнопку «Upload files».
Интерфейс репозитория в Гитхабе
Затем перетащим файлы в появившееся поле для загрузки.
Интерфейс загрузки файлов в репозиторий Гитхаба
Добавим комментарий к нашему коммиту и нажмём кнопку «Commit changes».
Загрузка файлов в репозиторий
Готово! Файлы загружены в репозиторий.
Интерфейс репозитория в Гитхабе с загруженными файлами
Шаг 3. Проверка работы сайта
Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в нашем случае это htmlacademy.github.io. Вуаля!
Сайт работает
Шаг 4. Подключаем свой домен
Гитхаб позволяет использовать собственное доменное имя вместо стандартного username.github.io. Для этого, разумеется, вам сначала нужно приобрести его — как это сделать, можно посмотреть в другой статье.
Предположим, что у нас уже есть домен, подключим его к репозиторию: перейдём во вкладку «Settings» в интерфейсе репозитория, и в разделе «GitHub Pages» в поле «Custom domain» введём название нашего домена (например: html-academy.ru) и нажмём кнопку «Save».
Настройки своего домена в GitHub Pages
Теперь Гитхаб знает о нашем домене, однако, этого недостаточно — нужно изменить информацию о DNS-записях самого домена, для этого нам необходимо перейти на сайт доменного регистратора, где домен был куплен. Интерфейс работы с DNS-записями разный у каждого регистратора, но суть примерно одинакова.
Нам нужно настроить A-запись домена, для этого перейдём в панель управления DNS-записями, найдём (или добавим) A-запись и укажем «192.30.252.153» в качестве её значения. Ещё будет полезной памятка Гитхаба по настройке А-записей у DNS провайдера.
Смена DNS-записи домена
Всё готово! В течение нескольких часов вы сможете открыть свой сайт, используя ваш домен.
Без Гита и жизнь не та
Но нужно уметь работать не только с ним. Практика в HTML, CSS и JavaScript — в интерактивныхк курсах. Без воды.
Нажатие на кнопку — согласие на обработку персональных данных
Как создать бесплатный сайт на GitHub Pages
Jul 29, 2019 · 6 min read
Хотите разместить онлайн-портфолио своих работ, но не умеете создавать сайты? А, может, подумываете о собственном блоге или сайте-визитке, но не знаете, с чего начать? Или же просто не хотите тратить время и деньги на хостинги, доменные имена и т.д.?
Тогда эта статья для вас.
А зачем мне сайт?
Сайт — это ваш способ коммуникации с миром. Если у человек есть собственный сайт, то это поднимает его значимость в глазах окружающих.
Существует несколько способов по созданию простых и бесплатных сайтов для начинающих. В основном такие сайты делаются на базе GitHub и WordPress.
WordPress — э т о отличный вариант для новичков, которые не разбираются в сайтостроении. К сожалению, здесь есть одно «но». Если создавать бесплатный сайт на WordPress, то все увидят, что вы пользуетесь этой платформой, поскольку адрес сайта будет заканчиваться на wordpress.com, а внизу каждой страницы появится логотип WordPress.
Знакомясь с миром технологий, вы быстро заметите, что умение работать с GitHub даст вам явное преимущество. Ну, а если вы уже прочно обосновались в ИТ-вселенной, то, скорее всего, успели отметиться в каком-то GitHub-репозитории.
При размещении проектов на GitHub люди видят не только ваш код, но и то, что вы делаете и как. GitHub — это настоящий круговорот идей. Так почему бы не создать свой сайт на GitHub и не разместить его в самом репозитории? К тому же так вы добавите несколько коммитов к своему профилю!
Начинаем!
Существует целых два возможных сценария для создания сайтов. Вы либо создаете сайт с нуля, либо уже имеете некий прототип (или готовый сайт), но не знаете, как бесплатно разместить его на GitHub.
Начнем со второго варианта.
У меня есть файлы, но я не знаю, что с ними делать!
А вот здесь все предельно просто — работу за вас сделает GitHub!
Репозиторий — это место, где «живет» ваш проект. Здесь вы создаете структуру проекта, храните папки, файлы, изображения, видео, таблицы, Jupyter notebook, наборы данных и т.д.
Если у вас есть файл index.html, то GitHub сразу поймет, что от него хотят.
Теперь самое время переключиться на GitHub Pages. Зайдите в свой GitHub-репозиторий и нажмите Settings.
Прокрутите до 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-репозитории и готовы представить свое творение миру!
GitHub Pages — что это и как использовать? Инструкция для новичков
Хотите узнать, что такое GitHub Pages и как их использовать? Мы написали инструкцию о том, что такое GitHub Pages, которую поймут даже новички. Видеоинструкция в конце.
В этой статье о GitHub Pages вы узнаете:
Что такое GitHub Pages
Git — это самая популярная система контроля версий в мире. GitHub Pages — это бесплатный хостинг для статических файлов.
Если вы создали сайт и оставили его у себя на ПК, то посмотреть его можно только с вашего ПК. Чтобы открыть его с другого устройства, нужно перенести файлы сайта на другое устройство. Чтобы не переносить эти файлы на все устройства в мире, их нужно загружать в облачные хранилища. Облачные хранилища для сайтов называются хостингами.
Стандартные хостинги платные. И они скрывают технические файлы сайта от всех, кроме владельцев. GItHub Pages — это бесплатный хостинг с открытой структурой. Это значит, что загрузить туда свои файлы может кто угодно. И любой пользователь может посмотреть все загруженные файлы проекта.
GitHub Pages сильно упрощают поиск работы для начинающих специалистов. Если вы освоите этот инструмент, то он выгодно выделит вас на фоне конкурентов. А HR—менеджеру будет проще и приятнее оценить ваши скиллы.
Хотите получить больше советов о том, как начинающему программисту найти работу? Прочитайте нашу статью.
Как установить Git
Что пользоваться GitHub Pages, нужно установить Git и зарегистрироваться в нем.
Как установить Git на Windows
Скачайте установочный файл с официального сайта и запустите его.
Как установить Git на Linux
Для установки Git как бинарного пакета, используйте стандартный менеджер приложений.
Как установить Git на macOS
Скачайте и установите Homebrew Затем пропишите в терминале команду «brew install git».
Как загрузить свой проект в GitHub Pages
Сначала нужно зарегистрироваться на GitHub, если у вас еще нет аккаунта. Там стандартная форма регистрации. Затем создать новый репозиторий. Нажмите на «Your repositories», затем — «New».
Заполните все пустые поля.
Название: заполняйте по форме «username.github.io». Username — название вашего аккаунта на GitHub. Отметьте галочкой пункт «Initialize this repository with a README». Нажмите на «Create repository».
Отлично, вы создали репозиторий. Теперь нужно загрузить в него файлы. Нажмите в правом верхнем углу на кнопку «Upload files». Перетащите в открывшееся окно файлы своего проекта и нажмите на кнопку «Commit changes». Отлично! Вы загрузили файлы.
Можете проверить работоспособность проекта. Для этого перейдите по ссылке: «https://github.com/username/github.io». Username — название вашего аккаунта.
Как подключить свой домен к проекту на GitHub Page
Перейдите в пункт «Settings», раздел «GitHub Pages». Поменяйте в пункте «Source» значение на «main». Нажмите «Save». Страница обновится, появится поле «Custom Domain». Впишите в него ваш домен.
Теперь нужно зайти в редактор DNS-записей вашего провайдера, создать запись типа А и задать ей значение «192.30.252.153». Пункт к этому месту разный у всех провайдеров, но у них есть неплохие инструкции.
Хотите лучше разобраться в том, как работает GitHub? Обратитесь к специалисту!