Как сделать github pages
Creating a GitHub Pages site
In this article
You can create a GitHub Pages site in a new or existing repository.
GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see «GitHub’s products.»
Note: Organization owners can restrict the publication of GitHub Pages sites from repositories owned by the organization. For more information, see «Managing the publication of GitHub Pages sites.»
Creating a repository for your site
If your site is an independent project, you can create a new repository to store your site’s source code. If your site is associated with an existing project, you can add the source code to that project’s repository, in a /docs folder on the default branch or on a different branch. For example, if you’re creating a site to publish documentation for a project that’s already on GitHub, you may want to store the source code for the site in the same repository as the project.
If the account that owns the repository uses GitHub Free or GitHub Free for organizations, the repository must be public.
If you want to create a site in an existing repository, skip to the «Creating your site» section.
Creating your site
Before you can create your site, you must have a repository for your site on GitHub. If you’re not creating your site in an existing repository, see «Creating a repository for your site.»
Warning: GitHub Pages sites are publicly available on the internet by default, even if the repository for the site is private or internal. If your project site is published from a private or internal repository owned by an organization using GitHub Enterprise Cloud, you can manage access control for the site. In an enterprise with managed users, all GitHub Pages sites are privately published. Otherwise, if you have sensitive data in your site’s repository, you may want to remove the data before publishing. For more information, see «About repositories» and «Changing the visibility of your GitHub Pages site.»
On GitHub, navigate to your site’s repository.
Decide which publishing source you want to use. For more information, see «About GitHub Pages.»
If your chosen publishing source already exists, navigate to the publishing source. If your chosen publishing source doesn’t exist, create the publishing source.
In the root of the publishing source, create a new file called index.md that contains the content you want to display on the main page of your site.
Configure your publishing source. For more information, see «Configuring a publishing source for your GitHub Pages site.»
Under your repository name, click
Settings. 
In the left sidebar, click Pages. 
Optionally, if you’re publishing a project site from a private or internal repository owned by an organization using GitHub Enterprise Cloud, choose the visibility for your site. Under «GitHub Pages», select the GitHub Pages visibility drop-down menu, then click a visibility. For more information, see «Changing the visibility of your GitHub Pages site». 
To see your published site, under «GitHub Pages», click your site’s URL. 
Note: It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub. If your don’t see your GitHub Pages site changes reflected in your browser after an hour, see «About Jekyll build errors for GitHub Pages sites.»
If your GitHub Pages site is built from a public repository, it is built and deployed with a GitHub Actions workflow run unless you’ve configured your GitHub Pages site to use a different CI tool. For more information about how to view the workflow status, see «Viewing workflow run history.»
Note: GitHub Actions workflow runs for your GitHub Pages sites are in public beta for public repositories and subject to change. GitHub Actions workflow runs are free for public repositories.
Note: If your site has not published automatically, make sure someone with admin permissions and a verified email address has pushed to the publishing source.
You can also add a theme to customize your site’s look and feel. For more information, see «Adding a theme to your GitHub Pages site with the theme chooser.»
To customize your site even more, you can use Jekyll, a static site generator with built-in support for GitHub Pages. For more information, see «About GitHub Pages and Jekyll.»
Как создать бесплатный сайт на 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-репозитории и готовы представить свое творение миру!
Гитхаб как хостинг
Если ваш сайт — это статические 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?
GitHub — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения в системе управления версиями Git. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.
Публикация контента
GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная система управления версиями — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция GitHub Pages, которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.
Базовая установка Github
Подготовка кода для загрузки
Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:
Дополнительно об интерфейсах командной строки
Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:
Примечание: вы также можете использовать графический пользовательский интерфейс Git для выполнения тех же задач, если вам неудобно работать с командной строкой.
Каждая операционная система поставляется с инструментом командной строки:
Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.
Создание репозитория для вашего кода
Загрузка файлов на GitHub
Больше информации о GitHub
Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:
Вы можете написать более подходящее сообщение вместо another commit, чтобы уточнить, что именно вы только что изменили.
Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи Git и GitHub.
Как создать бесплатный сайт на GitHub Pages
Хотите разместить онлайн-портфолио своих работ, но не умеете создавать сайты? А, может, подумываете о собственном блоге или сайте-визитке, но не знаете, с чего начать? Или же просто не хотите тратить время и деньги на хостинги, доменные имена и т.д.?
Тогда эта статья для вас.
А зачем мне сайт?
Сайт — это ваш способ коммуникации с миром. Если у человек есть собственный сайт, то это поднимает его значимость в глазах окружающих.
Существует несколько способов по созданию простых и бесплатных сайтов для начинающих. В основном такие сайты делаются на базе 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-репозитории и готовы представить свое творение миру!