Как добавить css файл в github
Обновлено: 04.07.2024
Самая короткая инструкция о том, как сохранить файлы в GitHub и ничего не сломать. И самое главное — никакой консоли, всё через окошки и с помощью мышки. Для этого используем GitHub Desktop.
Внимание! GitHub Desktop не работает на Windows 7 x32, поэтому если у вас эта версия системы, обновитесь до Windows 10 или воспользуйтесь программой GitKraken на свой страх и риск.
В этой статье идёт рассказ о системах контроля версий. Если вы совсем ничего о них не знаете, прочитайте статьи «Словарь терминов для Git и GitHub» и «Введение в системы контроля версий», чтобы понять терминологию и разобраться, зачем мы вообще это делаем.
Если у вас ещё нет аккаунта на GitHub, то о его создании есть отдельная статья в блоге Академии.
Создание репозитория
Если вы никогда не пользовались гитхабом, нужно будет создать репозиторий для работы над проектом.
На главном экране GitHub Desktop выбираем пункт «Create a New Repository on your hard drive».
Нужно будет ввести название репозитория, его описание и выбрать папку на компьютере, куда будут сохраняться файлы.
После этого нажимаем на Create repository, ждём несколько секунд и готово — на компьютере появилась папка, которой можно пользоваться для разработки вашего проекта.
Клонирование репозитория
Если у вас уже какой-нибудь репозиторий на Гитхабе, его можно клонировать. Клонировать — это скачать все файлы к себе на компьютер, чтобы можно было их изменять и потом загружать обратно.
Выбираем Add -> Clone Repository…
В открывшемся окне выбираем один из имеющихся репозиториев. В данном случае он называется zaverstai, но у вас может быть любой другой.
После этого файлы репозитория начнут скачиваться — если их много, то это займет некоторое время.
Работа с репозиторием. Меняем файлы и сохраняем обратно
Вне зависимости от того, создали вы репозиторий или клонировали его, так выглядит GitHub Desktop с открытым репозиторием, в котором мы пока ничего не меняли.
Слева — поле для измененных файлов, справа — служебная информация. Слева снизу — поле для коммитов.
Если не усложнять, то склонированный репозиторий это просто каталог на компьютере. Можно нажать «Show in Finder» на Mac или «Show in Explorer» в Windows и откроется папка, где лежат все файлы, которые есть в репозитории.
Давайте добавим какой-нибудь файл. Например, я добавил в локальный репозиторий (скопировал в папку) файл index.html, который взял отсюда. Вы можете загрузить файл с кодом вашего проекта или изменить уже существующий.
Сразу после добавления или изменения файла в окне GitHub Desktop будет видно, что изменилось — если мы добавили целый новый файл, то все строчки будут с плюсиками и зелёные. Это значит, что они были добавлены в файл и GitHub Desktop раньше их никогда не видел.
Загружаем новый репозиторий на GitHub
Если вы не создавали новый репозиторий, а склонировали старый, то можете пропустить этот пункт.
После того, как мы добавили какой-то код в свежесозданный репозиторий, нужно сделать коммит, то есть зафиксировать все сохранённые изменения и дать им название. Текст должен быть лаконичным и в то же время сообщать о том, что делает коммит. Например, «добавляет имя наставника в Readme», «вводит функцию сортировки изображений», «правит ошибку в поиске городов на карте». Вводим имя жмём большую синюю кнопку «Commit to main»
Изменения, которые мы внесли и сохранили, пока локальны. Их нужно послать на GitHub. Чтобы опубликовать свежесозданный репозиторий на GitHub, нажмите Publish repository.
Появится подтверждение о публикации репозитория — проверяем название и описание, если нужно, ставим галочку о том, что код приватный, и публикуем.
Добавляем код и коммитим изменения
Репозиторий создан и загружен на GitHub, теперь нужно добавить немного кода.
Когда вы допишете код в файлы, которые находятся в репозитории, вы сможете просмотреть все их изменения в окне GitHub Desktop. Вот здесь, например, мы изменили «второй» на «третий» в тексте страницы — и изменения сразу видны, можно проверить, что всё исправленное будет загружено.
Дальше действуем по проверенной схеме — коммитим изменения.
В центре главного экрана появится предложение запушить коммит в удалённый репозиторий. Соглашаемся и жмём Push origin.
В этой статье была показана работа только с основной веткой репозитория. Если вы хотите разобраться, как создавать новые ветки (и зачем это нужно) и добавлять их в основную ветку, прочитайте статью «Работа с git через консоль». Это более сложная статья, поэтому можете сделать небольшой перерыв и вернуться к ней позже.
В какой-то момент, как и все наверное, я решил сделать простой сайт-визитку для себя, с дальнейшим превращением ее в блог и портфолио. Брать какую-то CMS или конструктор не хотелось. Не серьезно для IT-шника пилить сайт на Wordpress :-D Вспомнив, старую статью о GIthub Pages, которую я где-то видел, решил погуглить что это такое и с чем едят (Github как бы уже кажется достаточно гиковским). Итого все оказалось довольно просто и я дальше расскажу, как без особо труда и бесплатно можно захостить html+css+js страницу на Github.
Для того, чтобы проследить за действиями, достаточно базовых знаний git и html.
Первым делом регистрируемся.
Создаем репозиторий
После входа создаем свой первый репозиторий.
Выберем второй вариант и назовем свой проект test-page.
Инициализируем его локально и пушим нашу первую страницу
После создания github сам любезно покажет вам, как запушить ваши первые файлы в этот репозиторий.
Бегло пройдемся по этим bash командам, чтобы вы могли сделать подобное и в Windows.
Вот такой у нас результат в веб версии и консоли.
Создаем и заливаем нашу страничку
Подошли к самой интересной части. Создадим нашу страничку в корне репозитория на нашей машине. Каждый делает это в своем любимом редакторе. Я открою Sublime Text. Чтобы файл бы доступен, без указания его прямого названия, его необходимо назвать index.html.
Рассказывать про html я тут не буду, т.к. вы легко найдете урок лучше. Допустим простенькую страничку мы уже написали.
Теперь нам нужно залить ее на сервер. Мы это уже делали выше, надо только повторить с этим файлом.
В этом случае мы не написали какой именно файл добавить в индекс, а поставили точку. Это говорит гиту, что он должен индексировать все файлы в этом каталоге рекурсивно. Удобно, когда вы добавили множество страниц, стилей и JS-кода.
В гитхабе мы видим, что наш файл успешно загрузился и можем приступить к включению Github Pages, чтобы он начал хостить их как сайты и давать доступ браузеру по ссылке.
Для этого переходим в настройки репозитория на сайте (шестеренка справа) и выбираем Github Pages source нашу master ветку.
Сегодня мы хотим разместить нашу простую HTML-страницу в интернете таким образом, чтобы она стала доступна всем.
Если бы мы писали полноценное веб-приложение с какой-то логикой, например, с регистрацией и авторизацией пользователей, отправкой и сохранением информации, то нам требовалось бы достаточно комплексное решение с серверами и, возможно, базами данных. Конечному посетителю в любом случае будет приходить HTML, но на стороне сервера могут происходить самые разные сложные операции.
Но у нас простой случай: есть один HTML-файл и один CSS-файл, нет никакой бизнес-логики или взаимодействий. Достаточно чтобы какая-то машина, подключённая к интернету, отдавала содержимое этих файлов в браузер пользователя по запросу.
По сути это та же операция, что происходит у вас на компьютере, когда вы просто открываете свой локальный HTML-файл в браузере:
- Операционная система делает запрос в жёсткий диск или оперативную память.
- Жёсткий диск или оперативная память отдают содержимое файла.
- Операционная система направляет содержимое файла в программу «браузер».
- Браузер обрабатывает файлы (потому что знает как это делать, ведь файлы написаны по стандартам HTML и CSS) и формирует внешний вид.
Если вы проходите наши курсы по порядку, в рамках программ обучения (например, «Бэкенд JS-программист» или «Фронтенд JS-программист»), то в скором будущем вас ожидает курс по Git. Один из уроков там будет посвящён GitHub.
GitHub — это хранилище кода. Кроме этого GitHub предоставляет бесплатный хостинг для статических файлов — как раз то, что нам нужно. Этот сервис называется GitHub Pages.
Для полноценной работы с GitHub необходимо хотя бы базовое понимание Git. Но если вы совсем не знакомы с этой темой — ничего страшного! Прямо сейчас, чтобы разместить страницу на GitHub Pages, нам достаточно следовать простому алгоритму.
(Если вы умеете работать с Git и собираетесь делать всё локально, то при создании репозитория советую выбрать "Initialize this repository with a README" — в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать. В противном случае нужно будет инициализировать репозиторий локально и добавить удалённый репозиторий).
Вам ответят команда поддержки Хекслета или другие студенты.
Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Как новичку мне было сложно понять, каким образом создать связь между репозиториями. То есть локально у нас есть набор файлов проекта. Нужно каким-то образом выложить их на гитхаб. По сути это обычное копирование, но в git это работает не так очевидно. Пробившись несколько дней, я написал свою пошаговую инструкцию для новичков.
Два способа
Существует два способа для связи с гитхабом. Они далеко не так очевидны для новичков. Основной нюанс заключается в том, какой именно будет использован гитхабовский репозиторий: совершенно пустой (не инициализированный) или уже рабочий. Именно это будет определять два разных варианта работы.
Второй способ используется для совершенно пустого гитхабовского репозитория. Если уже есть локальный репозиторий, то можно вручную связать его с гитхабом без клонирования.
Здесь очень важнный момент. Если вы отметите любые опции (добавить .gitignore, лицензию и/или readme), то фактически это будет означать инициализацию репозитория. То есть это уже не пустой репозиторий, а наполненный и инициализировнный. В этом случае для связки придётся вначале клонировать удаленный. Это первый способ.
Если же вы не отметили ни одной опции, то гитхаб создаст совершенно пустой репозиторий без инициализации. И вот такой репозиторий можно связать с уже существующим локальным. Это второй способ.
Установка Git
Я всё ставил с официального сайта Git. Там же на сайте есть руководство Book, где описаны все начальне шаги. Поэтому будем считать, что git установлен и настроен.
Рассмотрим два способа отдельно.
Первый способ
Наш проект размещается в каталоге /demo/ . Было бы неплохо сохранить этот каталог и для дальнейшей работы. Для того, чтобы обезопасить себя, переименуем его /demo-temp/ любым файловым менеджером. То есть теперь каталога /demo/ у нас нет.
Запускаем git-bash и клонируем удаленный репозиторий на локальную машину:
Появится каталог /demo/ который создал git. Он должен быть пустой, кроме подкаталога «.git» — это служебный каталог, и его трогать не нужно.
Теперь копируем в каталог /demo/ содержимое нашего проекта, которое мы сохранили в /demo-temp/ . Всё, что мы сюда скопируем, будет вылождено на GitHub, поэтому желательно удалить все ненужные файлы. Если какие-то служебные файлы требуются для проекта, то их можно указать в файле .gitignore.
Это добавит все файлы для отслеживания git'ом. Проверить состояние (до и после add) можно командой
Пока мы работаем с локальным репозиторием. То есть нужно настроить его так, чтобы он оказался в том виде, который отправится на гитхаб.
Для удобства можно сразу выставить метку версии (опять же любой вариант):
Теперь нужно обновить метки на удаленном репозитории (если вы их задали).
Здесь также нужно будет ввести логин и пароль.
Всё, синхронизация выполнена! Временный каталог /demo-temp/ можно удалить или сохранить как старый резервный вариант.
Если мы зайдем на страницу репозитория на гитхабе, то увидим свой проект.
Для настройки push, если требуется, пишем:
Второй способ
Наш проект может размещатся в любом каталоге. Для него нужно инициализировать git. Это стандартная процедура:
Теперь для проекта git работает и его можно использовать по своему усмотрению: добавлять версии, смотреть логи, делать ветки и т.п.
Для связи с GitHub'ом следует указать удаленный репозиторий:
Этот код указывает адрес удаленного и отправляет все изменения на гитхабовский сервер. Если мы зайдем на страницу репозитория на гитхабе, то также увидим свой проект.
Читайте также: