Как использовать GitHub Pages? — Изучение веб-разработки | MDN

Что такое github pages

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

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

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

GitHub Pages сильно упрощают поиск работы для начинающих специалистов. Если вы освоите этот инструмент, то он выгодно выделит вас на фоне конкурентов. А HR—менеджеру будет проще и приятнее оценить ваши скиллы.

В этой статье о github pages вы узнаете:

1. Что такое GitHub Pages
2. Как установить Git
3. Как загрузить свой проект в GitHub Pages
4. Как подключить свой домен к проекту

Дополнительно об интерфейсах командной строки

Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:

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

Каждая операционная система поставляется с инструментом командной строки:

• Windows: Командную строку (Command Prompt) можно вызвать, нажав клавишу Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
• OS X: Терминал (Terminal) можно найти в Applications > Utilities.
• Linux: Обычно терминал можно вызвать с помощью Ctrl Alt T. Если это не сработает, найдите Terminal в панели приложений или меню.

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

Как загрузить свой проект в github pages

Сначала нужно зарегистрироваться на GitHub, если у вас еще нет аккаунта. Там стандартная форма регистрации. Затем создать новый репозиторий. Нажмите на «Your repositories», затем — «New».

Как подключить свой домен к проекту на github page

Перейдите в пункт «Settings», раздел «GitHub Pages». Поменяйте в пункте «Source» значение на «main». Нажмите «Save». Страница обновится, появится поле «Custom Domain». Впишите в него ваш домен.

Теперь нужно зайти в редактор DNS-записей вашего провайдера, создать запись типа А и задать ей значение «192.30.252.153». Пункт к этому месту разный у всех провайдеров, но у них есть неплохие инструкции.

Как установить git

Что пользоваться GitHub Pages, нужно установить Git и зарегистрироваться в нем.

Как установить git на linux

Для Fedora — yum: $ yum install git-coreДля Debian (Ubuntu и другие) — apt-get: $ sudo apt-get install git

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

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

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

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

Ограничения:

• Нельзя использовать на сайте PHP либо другие серверные языки — от сюда вытекает: если нужны формы например, обратной связи, то их придется создать в каких-нибудь конструкторах типа FormDesigner и затем уже встроить;
• Серверный код и серверные скрипты выполняться не будут;
• Cookies не используются.

Шаг 1. заводим аккаунт или авторизуемся на github

Идем на GitHub. Если есть аккаунт, то авторизуемся в нем нажав на «Sing in». Если аккаунта нет, заводим его нажав на «Sing up».

На открывшейся странице пишем рабочий email и жмем на Continue.

Шаг 2. создание репозитория

Чтобы создать репозиторий нажмите на кнопку «Create repository или New repository» При создании введите название репозитория (например, nzsd), его описание (не обязательно), выберите тип репозитория Public, поставьте галку на против пункта Add a README file и нажмите на кнопку Create repository:

Шаг 3. загрузка файлов в созданный репозиторий

Загрузите все файлы вашего проекта, нажав на «Add fille» и выберете «Upload files»

на открывшейся странице, прям берем и перетаскиваем все файлы мышкой.

Перетащатся только файлы которые в корне, в моем случае это файл index.html. Директории для изображений, стилей, скриптов, нужно создавать отдельно и затем уже в них загружать файлы. Для этого щелкните по «Add file» и выбираете «Create new file».

Введите название директории и после названия ставим закрывающийся слэщ «/», после чего она превращается в директорию и чтобы ее создать, нужно добавить в нее какой-нибудь файл, пишем к примеру empty и нажмите «Commit new file».

Таким же образом сражу создаем все необходимые директории. Дальше открываем каждую из них и загружаем в них файлы.

Шаг 4. публикация сайта в интернете

Перейдите в настройки (Settings) созданного репозитория:

В настройках репозитория найдите вкладку Pages, на ней установите в качестве источника файлов вашей страницы ветку main и директорию root (от корня проекта) созданного репозитория и сохраните.

Теперь ваш сайт опубликован и доступен по адресу вида your-account-name.github.io/repo-name.