Github pages: что это такое и как этим пользоваться? Наглядный мануал
Git — это одна из самых популярных систем контроля версий веб-продуктов. GitHub — это веб-ресурс, репозиторий, хранилище кода, контроль версий, сервер, бесплатный хостинг, сообщество, помощь, обучение — все в одном месте. GitHub Pages — это раздел в ресурсе GitHub и по совместительству бесплатный хостинг, то есть место, где вы можете бесплатно разместить свой веб-ресурс и сделать его доступным для других пользователей.
Что это такое — GitHub Pages
GitHub Pages — это бесплатный хостинг, это возможность открыть свой ресурс, не тратя на это денег. У GitHub Pages есть своя специфика работы. Обычный хостинг размещает файлы вашего сайта на своих серверах и скрывает всю его техническую часть от посторонних пользователей, оставляя ее доступной только владельцу ресурса. На GitHub Pages технические файлы вашего сайта будут открыты. Для чего это нужно?
GitHub Pages — это то, что даст вам преимущество на фоне ваших конкурентов. К примеру, вы знаете, что иметь аккаунт на GitHub — это обязательно для хорошего программиста. Многие работодатели просят в резюме указать ссылку на ваш аккаунт на этом ресурсе, чтобы просмотреть дату регистрации и проекты, которыми вы там занимались. А без аккаунта на GitHub у вас не будет доступа к GitHub Pages.
Инструкция, как начать пользоваться GitHub Pages
Зайдя в аккаунт, нужно будет создать новый репозиторий. Ему можно задать имя в формате «login.github.io», где login — это ва ш ник на ресурсе.
Заключение
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Как использовать 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.
Гитхаб как хостинг
Если ваш сайт — это статические 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 — в интерактивныхк курсах. Без воды.
Нажатие на кнопку — согласие на обработку персональных данных
Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
What is GitHub Pages?
Ready to get started? Build your own site from scratch or generate one for your project.
You get one site per GitHub account and organization,
and unlimited project sites. Let‘s get started.
Create a repository
Head over to GitHub and create a new public repository named username.github.io, where username is your username (or organization name) on GitHub.
If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.
What git client are you using?
Download GitHub Desktop
GitHub Desktop is a great way to use Git and GitHub on macOS and Windows.
Download GitHub Desktop
Clone the repository
Go to the folder where you want to store your project, and clone the new repository:
$ git clone https://github.com/username/username.github.io
Clone the repository
Click the «Set up in Desktop» button. When the GitHub desktop app opens, save the project.
If the app doesn’t open, launch it and clone the repository from the app.
Clone the repository
After finishing the installation, head back to GitHub.com and refresh the page. Click the «Set up in Desktop» button. When the GitHub desktop app opens, save the project.
If the app doesn’t open, launch it and clone the repository from the app.
Hello World
Enter the project folder and add an index.html file:
$ echo «Hello World» > index.html
Create an index file
Grab your favorite text editor and add an index.html file to your project:
Push it
Add, commit, and push your changes:
Commit & publish
Enter the repository, commit your changes, and press the publish button.
…and you’re done!
Fire up a browser and go to https://username.github.io.
Use a theme, or start from scratch?
Repository Settings
Head over to GitHub.com and create a new repository, or go to an existing one.
Click on the Settings tab.
Theme chooser
Scroll down to the GitHub Pages section. Press Choose a theme.
Pick a theme
Choose one of the themes from the carousel at the top.
When you’re done, click Select theme on the right.
Edit content
Use the editor to add content to your site.
Commit
Enter a commit comment and click on Commit changes below the editor.
Create an index file
Head over to GitHub.com and create a new repository, or go to an existing one.
Click on the Create new file button.
Hello World
Name the file index.html and type some HTML content into the editor.
Commit the file
Scroll to the bottom of the page, write a commit message, and commit the new file.
Repository Settings
Click on the Settings tab and scroll down to the GitHub Pages section.
Then select the main branch source and click on the Save button.
…and you’re done!
Fire up a browser and go to http://username.github.io/repository.
Now that you’re up and running, here are a few things you should know.
Blogging with Jekyll
Using Jekyll, you can blog using beautiful Markdown syntax, and without having to deal with any databases. Learn how to set up Jekyll.
Custom URLs
Want to use your own custom domain for a GitHub Pages site? Just create a file named CNAME and include your URL. Read more.
Guides
Learn how to create custom 404 pages, use submodules, and learn more about GitHub Pages.
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.
