Как выложить на github pages
Как разместить сайт на GitHub Pages
На GitHub Pages можно бесплатно разместить статичный HTML сайт, состоящий из HTML/CSS/JS файлов, к которому можно подключать различные библиотеки – одним словом, все, что мы называем фронтендом.
Если вы начинающий верстальщик или фронтенд разработчик, то необязательно приобретать платный хостинг, до тех пор, пока вы не начнете зарабатывать.
Какая польза от GitHub Pages?
Во-первых это отличное место для размещения своего портфолио как фрилансеру, так и соискателю работы для демонстрации его заказчикам или работодателям. У вас всегда под руками будет ссылка в интернете на ваше портфолио, разве это не здорово?
А ещё это решает такую проблему у новичков, как отсутствие реальных работ в портфолио. Придумайте сами себе лендинг, сделайте его и разместите в папке корневого репозитория, добавьте ссылку в свое портфолио.
Во-вторых, в процессе работы с заказчиком, можете дать ему ссылку на папку с проектом, чтобы заказчик видел, как продвигается работа над его сайтом.
Как разместить сайт на GitHub Pages через командную строку?
Шаг1. Создание нового репозитория
Первым делом создайте аккаунт на GitHub.com и в разделе «Your repositories» нажмите кнопку «New». В текстовом поле Repository Name, пропишите «login.github.io», где login — username вашего аккаунта на GitHub.
Шаг2. Клонирование репозитория
Выполните команду клонирования:
git clone https://github.com/login/login.github.io
В папке с проектом на компьютере появится папка с названием «login.github.io».
Шаг3. Добавьте файл index.html
В командной строке введите:
cd login.github.io
echo «Privet» > index.html
В папке «login.github.io» автоматически создастся index.html. Вместо этого, вы сами можете в папку положить свой index.html, например с вашим портфолио.
Шаг4. Отправить изменения на GitHub Pages
Шаг5. Всё готово!
Запустите браузер и перейдите по адресу:
Редактор Visual Studio Code, уже имеет интегрированный терминал – очень удобно делать верстку и пользоваться командной строкой в одной программе.
Как разместить сайт на GitHub Pages через интерфейс?
У вас уже создан репозиторий (смотрите в первом способе), теперь надо загрузить файлы, нажмите кнопку «Upload files».
Сюда перетащите подготовленные файлы.
При ручной загрузке, можно загрузить только файлы, но не папки. Как внутри репозитория создать папку? Нажмите «Create new file».
Напишите в поле название папки со слэшем на конце – folder/ и ещё какое-нибудь название, которое потом удалите.
Заключение
Если вы планируете кандидировать на вакансию верстальщика / фронтенд-разработчика в IT компанию, то нужно обязательно уметь работать с GitHub. Поэтому лучший способ показать, что вы с гитхабом на ты – это разместить на GitHub Pages портфолио, а на Gist-е какие-нибудь ваши наработки по верстке и скриптам.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Как использовать 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
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
Уровень: для новичков
Как опубликовать сайт в интернете бесплатно
Итак, у нас есть заготовка сайта-портфолио, которую нужно опубликовать в интернете. Для этой задачи используем платформу GitHub. Это популярная платформа для разработчиков, которая позволяет бесплатно опубликовать простой сайт.
Для начала зарегистрируемся на Гитхабе. Откроем главную страницу. Здесь в форме нужно ввести логин, электронную почту и пароль для создания учётной записи. Нажимаем «Зарегистрироваться».
Регистрируемся на Гитхабе
Далее нужно подтвердить свой аккаунт, выбрать тарифный план (для нас подойдёт бесплатный) и затем подтвердить электронную почту.
Регистрируемся на Гитхабе
Добавляем репозиторий
Создаём репозиторий
Загружаем файлы
Перетащим файлы в появившееся поле для загрузки.
Загружаем файлы
Добавляем описание
Готово! Сайт-портфолио залит на Гитхаб.
Сайт-портфолио на Гитхабе
Настраиваем репозиторий
Ура, сайт в интернете!
Если вы захотите доработать сайт и опубликовать изменения, действовать вам нужно так. Сначала вы вносите изменения. Давайте для примера отредактируем текст на главной странице.
Редактируем текст на главной странице
Загружаем изменённый файл
Через несколько секунд изменения появятся на сайте.
Сайт готов!
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.
