Как настроить github pages

Github pages: что это такое и как этим пользоваться? Наглядный мануал

Что такое GitHub Pages? Это реальная возможность разместить свой веб-проект бесплатно в интернете. GitHub Pages очень тесно связаны с такими терминами , как:

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

Что это такое — GitHub Pages

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

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

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

Нужно это для того, чтобы вы могли всем презентовать красоту вашего ко д инга. Чтобы любой потенциальный работодатель или HR-менеджер мог посмотреть , как вы организовали свой ресурс или какую-то его отдельную функцию.

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

Инструкция, как начать пользоваться GitHub Pages

Для того чтобы начать пользоваться GitHub Pages , нужно проделать описанные ниже шаги. Итак, инструкция по GitHub Pages:

Нужно пройти регистрацию на веб-ресурсе GitHub, она не сложнее , чем регистрация на любом другом сайте.

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

Внутри репозитория нужно создать новый файл. Допустим , это может быть index.html.

Если вы сразу хотите перенести свой проект на GitHub Pages, то создавайте там соответствующие файлы и переносите туда их данные. slotsoft https://slotsoft.one Допустим , если вы создали файл index.html на GitHub, то заполните его соответствующим кодом. Новые файлы создаются при помощи кнопки «Commit new file».

Подтвердите публикацию своего проекта , и он через какое-то время станет доступным по адресу «https://login.github.io».

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

Заключение

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

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Источник

guides

Для размещения статического веб-сайта можно воспользоваться сервисом 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:

1. Загрузите все файлы вашего проекта в ветку master созданного репозитория repo-name. При этом файл index.html должен находиться в корневой директории проекта:

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

1. В настройках репозитория найдите вкладку Options:

1. Пролистайте вниз и найдите раздел Github Pages. Установите в качестве источника файлов вашей страницы ветку master созданного репозитория:

Источник

Getting Started with GitHub Pages

GitHub Pages are public webpages hosted and easily published through GitHub. The quickest way to get up and running is by using the Jekyll Theme Chooser to load a pre-made theme. You can then modify your GitHub Pages’ content and style remotely via the web or locally on your computer.

Create Your Website

Once you’ve signed in, you’ll create a new repository to get started.

On the new repository screen, you need to give this repository a special name to generate your website.

Your website’s files will live in a repository named username.github.io (where “username” is your actual GitHub user name). To begin setting up your site, you have to open the Settings tab

If you scroll down on the settings page, you’ll see the GitHub Pages section near the bottom. Click the Choose a theme button to start the process of creating your site.

Once you’ve clicked the button, you’ll be directed to the Theme Chooser. You’ll see several theme options in a carousel across the top of the page. Click on the images to preview the themes. Once you’ve selected one, click Select theme on the right to move on. It’s easy to change your theme later, so if you’re not sure, just choose one for now.

Here’s where you’ll write your own content (You can keep the default content for now, if you’d like).

Once you’re finished editing, scroll down to the bottom of the page and click Commit changes.

GitHub does all the work to direct visitors to username.github.io to view your new website. This can take up to 10 minutes. After some time has passed, you can open a new tab in your browser to go to your site!

Making Changes

One of the first things you can do is remove the default title of your index page, and add a friendlier message to it. Since this is a very quick change – and your first one – you’re going to make it on the default branch: main .

View the _config.yml file by navigating to it in the Code tab. You can edit the file by clicking on the pencil icon.

Currently your site has no set title, so we’re falling back to the name of the repo. To change this, I’m going to add the line “title: Welcome to the Octocat’s homepage!” to this file. Feel free to do the same, except for your own username.

Under this title, you can add a message about the purpose of the page and describe what you want people to do while they’re here. I’m going set mine to “Feel free to bookmark this to keep an eye on my project updates”

After you’re done making this small change, scroll to the bottom of the page to make your second commit. You have two places to write about this change: a subject and an extended description. The extended description is optional, so let’s leave a descriptive message in the subject.

When you’re done, click Commit changes and your updates will go live in just a few seconds!

Next Steps

Just because you’ve made some changes into your project doesn’t mean you should stop! Check out these other guides to learn how to contribute to other projects or perfect the way you work on projects:

Last updated July 24, 2020

GitHub is the best way to build and ship software.
Powerful collaboration, code review, and code management for open source and private projects.

Источник

Гитхаб как хостинг

Если ваш сайт — это статические 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 — в интерактивныхк курсах. Без воды.

Нажатие на кнопку — согласие на обработку персональных данных

Источник