Как бесплатно залить сайт на GitHub Pages
Допустим, вы сделали какой-то проект, например, собрали себе портфолио по шаблону, и теперь хотите выложить его в интернет. Если вы использовали только HTML и CSS, то необязательно платить деньги, чтобы загрузить сайт куда-то. Вы можете бесплатно выложить сайт на сервис GitHub Pages. Всё, что нужно — аккаунт на Гитхабе.
Создание репозитория
Для создания репозитория перейдите по ссылке https://github.com/new.
Важно, чтобы название репозитория было в виде «username.github.io», где username — имя вашего аккаунта на Гитхабе. В нашем примере это будет evgeniyshklyar.github.io .
Обязательно установите галку на пункте Add a README file.
Загрузка файлов
Репозиторий создан, теперь нужно загрузить файлы. Для этого можно воспользоваться VS Code, консолью или GitHub Desktop, но в нашем случае достаточно интерфейса Гитхаба.
Нажмите кнопку Add file — Upload files.
Затем перетащим файлы в появившееся поле для загрузки.
Добавим комментарий к нашему коммиту и нажмём кнопку «Commit changes».
Проверка работы сайта
Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в нашем случае это htmlacademy.github.io. Вуаля!
Шаг 4. Подключаем свой домен
Гитхаб позволяет использовать собственное доменное имя вместо стандартного username.github.io. Для этого, разумеется, вам сначала нужно приобрести его.
Предположим, что у вас уже есть домен. Давайте подключим его к репозиторию. Перейдём во вкладку Settings в интерфейсе репозитория, и в разделе Pages в поле Custom domain введём название нашего домена (например: html-academy.ru) и нажмём кнопку Save.
Теперь Гитхаб знает о нашем домене, однако, этого недостаточно — нужно изменить информацию о DNS-записях самого домена. Для этого нам необходимо перейти на сайт доменного регистратора, где домен был куплен. Интерфейс работы с DNS-записями разный у каждого регистратора, но суть примерно одинакова.
Нам нужно настроить A-запись домена. Для этого перейдём в панель управления DNS-записями, найдём (или добавим) A-запись и укажем 192.30.252.153 в качестве её значения. Ещё будет полезной памятка Гитхаба по настройке А-записей у DNS провайдера.
Всё готово! В течение нескольких часов вы сможете открыть свой сайт, используя ваш домен.
Получить более глубокие знания о работе с Git, попробовать на практике поработать с ветками, с локальным и удалённым репозиторием и изменениями можно на профессиональном онлайн-курсе.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
5 частых ошибок при работе с Git
Git — это важный и довольной понятный инструмент для контроля версий в разработке программного обеспечения, но иногда он может выдавать ошибки, которые сбивают с толку. Если вы столкнулись с одной из этих ошибок, попробуйте наше решение.
- 27 августа 2023
Работа с Git через консоль
Задача: форкнуть репозиторий в GitHub, создать ветку и работать с кодом.
Сразу появляется много вопросов — что такое GitHub, какие для этого нужны команды, зачем, а главное, как всем этим пользоваться? Давайте разберёмся.
Когда мы пишем код, мы постоянно туда что-то добавляем, удаляем, и иногда всё может ломаться. Поэтому перед любыми изменениями стоит сделать копию проекта. Если собирать проекты в папки с именами проект1 , проект1_финал и проект2_доделка , вы быстро запутаетесь и точно что-нибудь потеряете. Поэтому для работы с кодом используют системы контроля версий.
Система контроля версий — программа, которая хранит разные версии одного документа, позволяет переключаться между ними, вносить и отслеживать изменения. Таких систем много и все они работают по принципу компьютерной игры, где вы можете вернуться к месту сохранения, если что-то пошло не так.
Git — самая популярная система контроля версий. С Git можно работать через командную строку (или терминал). В каждой системе своя встроенная программа для работы с командной строкой. В Windows это PowerShell или cmd, а в Linux или macOS — Terminal. Вместо встроенных программ можно использовать любую другую — например, Git Bash в Windows или iTerm2 для macOS.
Как работает терминал: мы вводим команду и получаем ответ компьютера — или всё получилось, или где-то ошибка, или нужно ввести что-то ещё — например, пароль. Поэтому большая часть этой инструкции состоит из команд для терминала. Сначала будет непривычно, но вам понравится.
Но давайте по порядку — установим Git на компьютер.
- 7 августа 2023
GitHub Desktop: обзор и первая настройка
Самая короткая инструкция о том, как сохранить файлы в GitHub и ничего не сломать. И самое главное — никакой консоли, всё через окошки и с помощью мышки. Для этого используем GitHub Desktop.
Внимание! GitHub Desktop не работает на Windows 7×32, поэтому если у вас эта версия системы, обновитесь до Windows 10 или воспользуйтесь программой GitKraken.
В этой статье идёт рассказ о системах контроля версий. Если вы совсем ничего о них не знаете, прочитайте статьи «Словарь терминов для Git и GitHub» и «Введение в системы контроля версий», чтобы понять терминологию и разобраться, зачем мы вообще это делаем.
- 7 августа 2023
Как склеить коммиты и зачем это нужно
Когда вы открываете пулреквест и ваш код смотрят и комментируют другие, бывает нужно что-то исправить. Обычно такие изменения мы комментируем сообщением вроде «Увеличил шрифт на 2px » или «Поменял оттенок фона в шапке». Такие маленькие изменения интересны, только пока они в пулреквесте. Ревьювер (человек, который смотрит ваш код), может легко узнать, что и когда вы изменили, а не читать весь diff заново, а вы можете легко откатить коммит, если он не нужен. Но когда приходит время вливать пулреквест, эти маленькие коммиты теряют свою ценность. Поэтому лучше их склеить в один.
- 14 июня 2023
Основные команды для работы с Git
Работа с Git через терминал — это обязательная часть практики фронтендера. Однако для начинающих разработчиков этот инструмент может показаться сложным. Чтобы вам было проще учиться, мы собрали основные команды для работы с Git.
☝ В некоторых командах мы будем писать URL-адрес удалённого репозитория и название проекта в квадратных скобках, вот так — [ссылка на удалённый репозиторий] . Мы делаем это только для наглядности. Вам квадратные скобки ставить не нужно.
- 22 февраля 2023
Регистрация на GitHub
Создание нового аккаунта на GitHub состоит всего из 10 шагов — и вся регистрация занимает меньше пяти минут.
�� Обратите внимания, что интерфейс Гитхаба регулярно меняется, так что внешне он может отличаться, когда вы читаете эту статью.
Начало регистрации. Так выглядит главный экран Гитхаба, когда вы не зарегистрированы. Главное, что вам нужно заметить — большое поле для ввода почты и зелёная кнопка. Вводите свой адрес и переходите на следующий шаг.
Ввод почты. На следующем шаге начинается регистрация. Подтвердите свою почту с прошлого шага и нажмите Continue (Продолжить).
Пароль. Придумайте сложный пароль, чтобы его никто не взломал. Например, Гитхаб просит, чтобы в пароле было не меньше 15 символов или 8 символов, но тогда должны быть и латинские буквы, и цифры.
Имя профиля. Теперь выберите имя вашего профиля — оно будет использоваться в интерфейсе, в коммитах и комментариях. То есть именно так вас будет видеть любой пользователь Гитхаба. Для разработчика Гитхаб вместо визитки, так что выбирайте что-нибудь приличное, лучше, если ник будет совпадать с вашими никнеймами на других сайтах.
Если имя недоступно, Гитхаб вам об этом скажет. А если доступно — жмите Continue.
Рассылки. Дальше Гитхаб спросит, хотите ли вы подписаться на рассылку об обновлениях. Впечатайте латинскую У, если хотите, или n, если письма вам не нужны. Готовы спорить, мы знаем, что вы выберете.
Капча, чтобы проверить, что вы не робот. Нам при регистрации пришлось два раза выбрать спиральную галактику — не сильно сложно. А если вы робот — не причиняйте вред человеку своим действием или бездействием.
Подтверждение почты. После капчи вам придёт письмо с кодом на почту. Введите его на следующей странице.
Вот здесь. Главное — не ошибайтесь.
Общая информация о вас и вашей команде. Если вы регистрируете аккаунт для себя, выбирайте Just me. Второй пункт — студент вы или учитель. Выбирайте «Студент», если вы не учитель.
Интересы. Дальше Гитхаб спросит вас об интересах — то есть о том, зачем вы регистрируете аккаунт. Из вариантов:
- Совместная разработка и код ревью.
- Автоматизация. CI/CD, API и другие админские вещи.
- Безопасность. Двухфакторная аутентификация, ревью, сканирование кода и списки зависимостей.
- Приложения. Выбирайте, если будете использовать GitHub Mobile, CLI, Desktop.
- Управление проектами. Проекты, метки, ишьи, вики и другие управленческие дела.
- Управление командами. Организации, приглашения, роли, домены.
- Сообщество. Выбирайте, если Гитхаб интересен вам как соцсеть.
Вы можете выбрать несколько пунктов или пропустить и не указывать ничего, для этого пролистайте страницу вниз для кнопки Skip customization.
Выбор тарифа. На выбор бесплатный тариф или платный GitHub Pro. Практика показывает, что для большинства личных проектов хватит бесплатного тарифа. В сентябре 2022 в него входили:
- Безлимитное количество репозиториев.
- 2000 минут CI/CD в месяц.
- 500 мегабайт места в хранилище пакетов.
- Поддержка сообщества.
Выбор тоже можно пропустить, тогда у вас будет бесплатный тариф.
Всё готово. Теперь у вас есть аккаунт. Можете создать репозиторий и работать с ним, или склонировать чужой. А для работы у вас есть несколько удобных вариантов:
- 28 сентября 2022
Работа с Git в Visual Studio Code
Если вы вёрстаете сайты или пишете код в редакторе Visual Studio Code, то Git за пять минут настраивается прямо внутри редактора. Не нужно запоминать команды для консоли, не нужно тыкать в лишние приложения.
Следуйте инструкции и всё получится.
- 16 сентября 2022
Markdown за 5 минут
Маркдаун, он же markdown — удобный и быстрый способ разметки текста. Маркдаун используют, если недоступен HTML, а текст нужно сделать читаемым и хотя бы немного размеченным (заголовки, списки, картинки, ссылки).
Главный пример использования маркдауна, с которым мы часто сталкиваемся — файлы readme.md , которые есть в каждом репозитории на Гитхабе. md в имени файла это как раз сокращение от markdown.
Другой частый пример — сообщения в мессенджерах. Можно поставить звёздочки вокруг текста в Телеграме, и текст станет полужирным.
Версии маркдауна отличаются, поэтому перепроверьте, какую вы используете.
- 5 октября 2021
Шпаргалка по Git. Решение основных проблем
Поговорим о решении проблем с Git.
- 11 декабря 2020
Полезные команды для работы с Git
Работа с Git через терминал — это обязательная часть практики каждого современного фронтенд-специалиста. Однако, для начинающих это может показаться сложным. Чтобы упростить процесс обучения, мы собрали для вас все самые необходимые команды, которые пригодятся в работе с Git на первое время.
- 1 января 2020
Как загрузить существующий проект на GitHub
GitHub — это облачный инструмент управления Git. Git —распределенная система управления версиями; это значит, что она хранит весь репозиторий и историю там, где вы их поместите. GitHub часто используется в бизнесе или в процессе разработки ПО в качестве управляемого хостинга для резервного копирования репозиториев. Однако GitHub также позволяет вам общаться с коллегами, друзьями, организациями и т.д.
В этом руководстве вы узнаете, как поместить проект, над которым вы работаете, на GitHub.
Требования
Чтобы инициализировать репозиторий и отправить его на GitHub, вам потребуется:
- Бесплатная учетная запись GitHub
- Установка git на вашем локальном компьютере. Инструкции вы найдете в мануале Разработка проектов с открытым исходным кодом: начало работы с Git
1: Создание репозитория GitHub
Войдите в GitHub и создайте новый пустой репозиторий. Инициализировать README или нет, решать вам. На самом деле это не имеет значения, потому что мы все равно переопределим все в этом репозитории.
Примечание: В этом руководстве мы используем условное имя пользователя GitHub (sammy) и репозитория (my-new-project). Все эти фиктивные данные нужно заменить своими данными.
2: Инициализация Git в папке проекта
Перейдите в папку, которую хотите добавить в репозиторий, и выполните в своем терминале следующие команды.
Инициализация репозитория Git
Убедитесь, что вы находитесь в корневом каталоге проекта, который хотите отправить на GitHub, и запустите:
Примечание: Если у вас уже есть инициализированный проект, можете пропустить эту команду.
Этот шаг создает в папке вашего проекта скрытый каталог .git. Система git распознает его и использует для хранения всех метаданных и истории версий для данного проекта.
Добавление файлов в индекс Git
Следующая команда укажет git, какие файлы включать в коммит. Аргумент -A (то есть –all) означает «включить все».
Коммит добавленных файлов
git commit -m ‘Added my project’
Команда git commit создает новый коммит со всеми добавленными файлами. Параметр -m (или –message) задает сообщение, которое будет включено в коммит в качестве объяснения для будущей работы. В этом случае мы ввели простое сообщение ‘Added my project’.
Добавление нового удаленного репозитория
Примечание: Помните, что вам нужно заменить имя пользователя и репозитория.
git remote add origin git@github.com:sammy/my-new-project.git
В git «remote» относится к удаленной версии того же репозитория, который обычно находится где-то на сервере (в данном случае на GitHub). «origin» — это стандартное имя, которое git по умолчанию присваивает удаленному серверу (таких у вас может быть несколько). Команда git remote add origin добавит URL-адрес удаленного сервера по умолчанию для этого репозитория.
Загрузка на GitHub
git push -u -f origin main
Флаг -u (или –set-upstream) устанавливает удаленный репозиторий origin в качестве апстрим-ссылки. Это позволяет позже выполнять команды git push и git pull без указания origin.
Флаг -f (или –force) автоматически перезапишет все в удаленном каталоге. Здесь мы используем его, чтобы перезаписать стандартный файл README, автоматически инициализированный GitHub.
Примечание: Если вы не включили README по умолчанию при создании проекта на GitHub, флаг -f вам не нужен, его можно удалить из команды.
Итоги
В результате весь процесс состоит из следующих команд:
git init
git add -A
git commit -m ‘Added my project’
git remote add origin git@github.com:sammy/my-new-project.git
git push -u -f origin main
Заключение
Мы успешно настроили удаленное отслеживание изменений кода в GitHub!
Читайте также:
- Краткий справочник по Git
- Создание pull-запроса на GitHub
Как опубликовать проект на Github
Если вы не хотите потерять ваш проект и сохранить его на будущее, то удобно опубликовать его на GitHub.
Кроме того это полезно научиться делать, т.к. в реальном мире разработки системы хранения изменений в проекте используются повсеместно, поэтому начать знакомиться — полезно.
И т.к. вы представляете проект на конференции — то вам надо это сделать и добавить ссылку в конце презентации.
Регистрируетесь
Публикуете проект
1) Открываете проект в IDEA
2) Жмете сверху VCS -> Import into Version Control -> Share project on GitHub (или Git -> Github -> Share project on GitHub)
Repository name: AngryBirds Private: не ставить галочку (если поставить, то репозиторий будет виден только вам) Remote: origin Description: Игра про стрельбу птицами по свиньям написаная на Java Swing. 3.5) Если при логине вы получаете ошибку “Invalid authentication data. 404 Not Found — Not Found”, то попробуйте:
- в окне логина сверху справа Use Token, затем Generate — Ok на странице github (для создания токена для логина)
- скопируйте токент (длинная строка)
- вставьте его в поле в IDEA — теперь должно залогинить
4) Если снизу справа появилась ошибка “Can’t finish GitHub sharing process … initial push failed”, то:
5) VCS -> Git -> Remotes
6) Нажмите справа на карандашик и замените URL на https://USERNAME:PASSWORD@github.com/USERNAME/REPOSITORYNAME.git (поправив USERNAME, PASSWORD и REPOSITORYNAME)
7) Теперь сделайте push еще раз: VCS -> Git -> Push… -> Push
Сохраняйте в репозитории новые изменения (коммитьте их)
2) Жмите не на Commit , а на стеролчку справа и там — Commit and Push.
3) Если вы все же сделали обычный Commit , то просто выполните еще и это: VCS -> Git -> Push… -> Push
Чтобы посмотреть изменения которые вы ранее делали
1) Снизу слева жмете “9: Version Control”
2) Чуть повыше жмете Log (правее от Version Control: Local Changes Console)
3) Можете выбрать любой коммит, справа выбрать файл и нажав на него правой кнопкой и там Show Diff — увидите изменения в файле
А чтобы посмотреть какие локальные изменения вы сделали до сих пор — вместо Log вам нужно нажать на Local Changes
Убедитесь что вы не забыли закоммитить в том числе картинки
Если у вас есть картинки в проекте, то стоит их тоже закоммитить. Например можете рядом с папкой src создать папку data и складировать всё туда.
Чтобы было проще запускать ваш проект на другом компьютере или через миллион лет найдя репозиторий — как минимум измените пути картинок на относительные (т.е. с C:\\Users\\. \\image.png на data\\image.png ) и при запуске игры в идее убедитесь что в Run -> Edit Configurations. в запускаемом вами файле указана Working directory: равная пути к папке с вашим проектом, т.е. чтобы относительно этой рабочей папки ( Working directory: ) картинки действительно были доступны по пути data\image.png .
Еще лучше если вы соберете последнюю версию вашего проекта в самодостаточный .jar -файл и опубликуете его как релизную версию вашего проекта, подробнее здесь.
Сделайте описание вашего проекта
Чтобы сделать описание вашего проекта например в таком стиле — после публикации и изначального push -а:
1) Откройте ваш репозиторий на GitHub.com в браузере
2) Проверьте что вы залогинились
3) Нажмите сверху и немного правее чем исходные файлы кнопку Create new file (левее зеленой кнопки Clone or download )
4) Укажите названием файла README.md и обратите внимание что по мере редактирования файла вы можете посмотреть как он выглядит — достаточно переключиться на Preview , а потом обратно на Edit new file
5) Этот файл можно писать на языке разметки Markdown, что-то о нем можно почитать тут — Mastering Markdown.
Как вариант вам предлагается воспользоваться таким шаблоном:
- # AngryBirds — большие буквы отделенные чертой от последующего текста
-  — картинка из вашего репозиторий лежащяя по пути screenshots/screenshot1.png (текст в квадратных скобочках — описание которое появится если картинка не прогрузится)
- **W** — сделает текст внутри звездочек выделенным
- [Intellij IDEA](https://www.jetbrains.com/idea/) — ссылка ведущая на указанный адрес в интернете, но показанная как синяя надпись с текстом из квадратных скобок
# AngryBirds  Игра про стрельбу птицами по свиньям с двухмерной физикой на базе Java Swing. # Управление 1. **W**, **A**, **S**, **D** - двигать что-нибудь ввеох, влево, вниз и вправо соответственно 2. **ПРОБЕЛ** - запустить крутой фейерверк 3. Проведя мышкой с зажатой левой кнопкой можно оттянуть птицу и отпустив левую кнопку - выстрелить # Как поиграть - Либо скачать ```.jar```-файл последней версии со [страницы](https://github.com/USERNAME/REPOSITORYNAME/releases) с опубликованными релизами - Либо открыть проект в [Intellij IDEA](https://www.jetbrains.com/idea/) # Скриншоты    А это скриншот баги которая мне так понравилась, что теперь это фича:  Как скомпилировать проект в самодостаточный .jar -файл и опубликовать его в папку https://github.com/USERNAME/REPOSITORYNAME/releases — смотрите здесь.
Несколько примеров с неплохим описанием из которых можно вдохновиться хорошими идеями и примерами Markdown-разметки:
- https://github.com/wozniakty/PuzzleDash — README.md
- https://github.com/RothschildGames/release-cycles — README.md
- https://github.com/sdrdis/hotfix — README.md
- https://github.com/Nurgak/Cube-engine — README.md
- https://github.com/lutzroeder/digger — README.md
- https://github.com/hughsk/ludum-dare-27 — README.md
- Полярный Николай Вадимович
- Моя почта: PolarNick239@gmail.com
- +7 (911) 959-11-70
- быстро отвечаю в Telegram (ответ может быть в стиле «вечером отвечу»)
- можно писать в PolarNick
Загрузка проекта с помощью рекомендаций GitHub
В этом модуле вы узнаете, как выполнять следующие задачи:
- Указание места хранения кода
- Ввод кода в репозиторий
- Создание важных файлов Git, таких как .gitignore
- Определите важные дальнейшие действия по управлению репозиторием и добавлению привлечения сообщества
Предварительные требования
- Учетная запись GitHub