Что такое github pages
Как создать бесплатный сайт на 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: что это такое и как этим пользоваться? Наглядный мануал
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 — это ва ш ник на ресурсе.
Заключение
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
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.
Как использовать 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 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? Обратитесь к специалисту!