Если вы твердо решили получить одну из современных it-профессий и начать осваивать это направление , то вам рано или поздно придется познакомиться с такой классной, полезной и одновременно удобной штукой, как GitHub (рус. Гитхаб).
В этой статье мы дадим вам общее представление о том, что это такое, какие возможности дает GitHub и для чего он нужен айтишнику.
Что такое GitHub
Википедия, которая как известно знает все, говорит на этот счет следующее:
GitHub - это крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. Веб-сервис основан на системе контроля версий Git и разработан на Ruby on Rails и Erlang компанией GitHub, Inc.
Ничего не понятно? Ок, тогда давайте разбираться более простым, человеческим языком!
Обычно над любым it-проектом работает целая команда веб-разработчиков. Как сделать так, чтобы все они имели доступ к проекту, могли вносить правки в код и работать одновременно, да еще и чтобы сам проект хранился на надежном хостинге?
Есть разные инструменты, но ничего лучше и удобнее чем Гитхаб пока еще в мире не придумали. Более 83 миллионов пользователей по всему миру говорят об этом красноречивее всего! Скоро вы тоже присоединитесь к их числу, как только узнаете этот веб-сервис и его возможности поближе!
GitHub многие называют социальной сетью для разработчиков. Это не просто место где разработчики делают свое дело. Этот веб-сервис предлагает своим пользователям массу возможностей, в том числе и для общения с единомышленниками.
Многие после окончания курсов размещают на GitHub свое резюме и быстро находят работу. Мы рекомендуем вам тоже немедленно завести аккаунт на GitHab, в будущем пригодится! В том числе и для поиска работы.
Возможно, при переходе по ссылке, вас оттолкнет вначале непонятный дизайн полностью на английском. Проделайте нехитрые манипуляции и все будет понятно, на родном русском языке. Что нужно сделать?
В правом верхнем углу нажмите на выпадающее меню с аватаркой пользователя.
- Выберите “Settings”.
- В левом меню “User settings” выберете “Preferences”.
- Пролистайте вниз и найдите “Language”, там выберите нужный вам язык.
- Нажмите “Save changes” в самом низу страницы и обновите страницу.
Ну и еще одним плюсиком Гитхаб является то, что для 95 % пользователей, с лихвой хватит его бесплатных возможностей, чем они и пользуются. Платные тарифы - это уже другой уровень, который может понадобится разве что крупному бизнесу.
Для чего айтишники используют GitHub
Итак, переходим к самому главному - для чего все айтишники в мире используют Гитхаб и что это им дает.
- Это универсальный и безумно удобный сервис для совместной разработки и хостинга it-проектов. Все для работы находится в одном месте и каждый участник команды, независимо от того, в каком городе или стране он находится, имеет туда доступ.
- В GitHub есть уникальная система контроля (управления) версий Git: сервис позволяет просматривать и контролировать любые изменения кода любым разработчиком и при необходимости, возвращаться к состоянию до изменений, если вдруг что-то пошло не так. Очень удобно!
- Разработчики могут использовать Гитхаб как профильную социальную сеть, в которой можно найти массу проектов с открытым кодом от других разработчиков, попрактиковаться в написании кода.
- Многие хранят здесь свое портфолио. Идеальная площадка для поиска работы. Как в России, так и зарубежом.
- Можно использовать GitHub для оттачивания своего мастерства как разработчика, для учебы и т.д. Например, подглядывать в открытых проектах интересные архитектурные решения, смотреть и учиться, как опытные разработчики пишут код, скачивать для себя огромное количество полезных в разработке и бесплатных инструментов. Все это потом сильно пригодится вам в работе!
- GitHub используют практически во всех it-компаниях, поэтому вам придется научиться работать с ним, если вы всерьез рассчитываете сделать карьеру в it. Он жизненно необходим проектам с частыми обновлениями, большим количеством версий, файлов, а также необходимостью синхронизации разработки и удобного развёртывания.
- Многие разработчики используют этот сервис как облачное хранилище с возможностью быстрой передачи заказчику.
Возможности GitHub
У этого веб-сервиса очень много возможностей. Чтобы научиться использовать их все потребуется время, желание учиться и какой-либо самоучитель/сайт/шпаргалка. Все это есть в свободном доступе в интернете.
В этой статье мы расскажем вам о 12 основных возможностях Гитхаб.
Редактирование кода на GitHub.com
Начнем с того, что и так известно большинству. При просмотре любого текстового файла на сайте GitHub, в любом репозитории, справа сверху можно видеть маленький карандашик. Если щёлкнуть по нему, можно будет отредактировать этот файл.
По завершении, нажмите Propose file change ("Предложить изменение файла") и GitHub создаст разветвление репозитория (fork) и запрос на внесение изменений (Pull Request). Поразительно, не правда ли? Он сам создает fork! Нет нужды делать форк и загружать к себе код, вносить локально изменения и отправлять обратно на GitHub c Pull Request'ом. Очень удобно, если нужно внести минимальные правки.
Вставка изображений
Описания проблем не ограничиваются только текстовыми комментариями. Знаете ли вы, что можно вставлять изображения прямо из буфера обмена? При вставке вы увидите, его загрузку (несомненно, в "облако") и превращение в разметку для отображения изображения. Изящно!
Форматирование кода
Если вам нужно написать блок кода, начните с трёх обратных одинарных кавычек — и GitHub попытается угадать, на каком языке программирования вы пишете.
Но если вы размещаете фрагмент кода на таких языках программирования, как Vue, Typescript или JSX, то можете явным образом указать язык, чтобы подсветка синтаксиса была правильной. Обратите внимание на ```jsx в первой строке:
...обеспечивающий правильное отображение фрагмента кода:
(это распространяется и на Gist, кстати. Если указать для гиста расширение .jsf, будет подсвечиваться синтаксис JSF).
Закрытие проблем при помощи "магических слов" в Pull Request’ах
Допустим, вы создаете Pull Request, исправляющий проблему #234. Вы можете вставить текст "исправляет проблему #234" в описание вашего запроса (или в любом месте любого комментария к запросу на изменение).
После этого слияние Pull Request’а автоматически закроет проблему. Круто, не так ли?
Ссылка на комментарии
Требовалось ли вам когда-нибудь создать ссылку на конкретный комментарий, а вы не знали, как это сделать? Эти дни давно прошли: для создания ссылки на комментарий нужно просто щелкнуть на дате/времени рядом с названием.
Смотрите, у gaearon'а теперь есть фотка!
Ссылка на код
Итак, вы хотите создать ссылку на конкретную строку кода. В таком случае, попробуйте следующее: щелкните на номере строки рядом с нужным кодом в открытом файле. Ух ты, видите? URL поменялся, в нём теперь виден номер строки!
Если удерживать нажатой клавишу SHIFT и нажать на номер другой строки, то – вуаля! – URL поменяется еще раз, и будет подсвечен диапазон строк.
Этот URL теперь будет указывать на данный файл и данный диапазон строк. Но погодите, он указывает на текущую ветку. А что, если файл поменяется? Наверное, вам нужна, в этом случае, постоянная ссылка на файл в его текущем состоянии. Всего один снимок экрана для всего вышеописанного:
Кстати, насчет URL'ов...
Использование URL GitHub в качестве командной строки
Перемещение по GitHub с помощью UI организовано очень удобно. Но иногда, чтобы попасть в определенное место, быстрее окажется просто набрать его в URL.
Например, если нужно перейти в ветку, над которой вы работаете и посмотреть отличия её от ветки master, можно просто ввести: /compare/имя_ветки после имени репозитория. После этого вы попадете на страницу различий для данной ветки:
Но это отличия от ветки master, если же вы работали до этого с веткой интеграции, то можно ввести в URL /compare/integration-branch...my-branch
Для любителей горячих клавиш: CTRL+L или CMD+L переводит курсор в строку URL (по крайней мере в браузерах Chrome и Firefox). Это, в сочетании с автодополнением браузера, значительно упрощает перемещение между ветками.
Совет от профи: воспользуйтесь стрелками для перемещения по предложениям автодополнения Chrome и нажимайте SHIFT+DELETE для удаления элементов из истории (например, после слияния ветки).
Создание списков для проблем
Хотите ли вы, чтобы в вашем описании проблемы присутствовал чекбокс?
И хотите ли вы, чтобы при просмотре проблемы из списка отображалась элегантная полоска вроде "2 из 5"?
Никаких проблем! Создавать интерактивные кнопки-флажки можно с помощью следующего синтаксиса:
- [ ] Screen width (integer)
- [x] Service worker support
- [x] Fetch support
- [ ] CSS flexbox support
- [ ] Custom elements
Синтаксис: пробел, дефис, пробел, открывающаяся квадратная скобка, пробел (или x), закрывающаяся квадратная скобка, пробел и какие-нибудь слова.
После этого вы сможете действительно ставить/убирать галочки с этих кнопок! Многим это, почему-то, кажется каким-то техническим волшебством.
Вы можете ставить галочки! И при этом исходный текст меняется! Страшно подумать, что они придумают дальше. А, и если эта проблема есть на панели проекта, то там тоже будет отображаться ход выполнения:
Если вам непонятно, что имеется в виду под "панелью проекта" – читайте ниже.
Панели проектов в GitHub
Для больших проектов чаще всего используют Jira. А для своих личных проектов обычно используют Trello. Оба этих инструмента всем очень нравятся.
GitHub предлагает свой собственный вариант, прямо на закладке Projects репозитория, поэтому имеет смысл продублировать набор задач, с которыми вы уже работаете в Trello.
Ничего веселого тут нет А теперь то же самое в проекте GitHub:
Постепенно ваши глаза привыкнут к неконтрастному изображению. Ради ускорения можно добавить все вышеуказанное в виде заметок (notes), то есть, они не являются "настоящими" проблемами (issues) GitHub. Но мощь управления задачами в GitHub состоит в интеграции с остальным репозиторием – так что, вероятно, лучше добавить существующие проблемы из репозитория на панель.
Нажмите Add Cards в верхнем правом углу и найдите то, что хотели бы добавить. Здесь пригодится специальный синтаксис поиска: например, наберите is:pr is:open и вы сможете перетащить любой открытый Pull Request на панель, или label:bug, если нужно исправить какие-то ошибки.
А ещё можно преобразовать существующие заметки в проблемы.
И, наконец, из формы существующей проблемы, добавить её в проект в правой панели.
Она попадёт в список triage данной панели проекта, так что вы сможете выбрать, в какой столбец её поместить. Когда описание "таска" находится в том же репозитории, что и реализующий этот таск код, это очень (ооооочень) удобно.
Это значит, что даже через много-много лет вы сможете выполнить команду git blame для какой-либо строки кода и выяснить всю подоплёку задачи, которая к этой строке привела, без того, чтобы отслеживать это всё в Jira/Trello/еще где-нибудь.
Gwiki
Для неструктурированного набора страниц – подобного Википедии – GitHub Wiki просто великолепна. Для структурированного же набора страниц – например, как ваша документация – уже не настолько.
Отсутствует возможность указать, что "вот эта страница – дочерняя по отношению к вот той", нет таких удобных вещей, как кнопки "Следующий раздел" и "Предыдущий раздел".
Большинство новичков тут бы точно заблудились, потому что "хлебных крошек" (специальных отладочных операторов – прим. перев.) тут тоже нет.
Чтобы попробовать Gwiki на деле, введите несколько страниц из NodeJS в качестве страниц вики, после чего создайте пользовательскую боковую панель, чтобы смоделировать реальную структуру сайта.
Эта боковая панель находится там постоянно, хотя текущая страница и не подсвечивается. Ссылки придется поддерживать вручную, но в целом все работает отлично.
Это вряд ли может соперничать с чем-то вроде GitBook (который используется в документации Redux) или сделанным на заказ веб-сайтом.
Но это уже добрых 80% от него и все прямо в вашем репозитории. Если вы уже переросли этап использования одного файла README.md и вам нужно несколько различных страниц для руководств пользователя или более подробной документации, имеет смысл остановиться на Gwiki.
Если же отсутствие структуры/навигации вам мешает, переходите на что-либо ещё.
GitHub Pag
Возможно, вы уже знали, что GitHub Pages можно использовать для размещения статического сайта. А если не знали, то знаете теперь. Однако этот раздел посвящен более узкому вопросу: использованию Jekyll для создания сайта.
В простейшем варианте, GitHub Pages + Jekyll могут визуализировать файл README.md с использованием приятной глазу темы.
Если нажать на закладку settings ("настройки") для этого сайта на GitHub, включить GitHub Pages и выбрать тему Jekyll...
То мы получим страницу в стиле темы Jekyll:
После этого можно создать целый статический сайт на основе, главным образом, легко редактируемых файлов разметки, по существу, превращая GitHub в CMS.
Использование GitHub в качестве CMS
Допустим, у нас есть веб-сайт с каким-то текстом, но нам не хотелось бы хранить этот текст в виде HTML-разметки. Вместо этого, мы хотели бы хранить где-то куски текста, чтобы их могли легко редактировать и обычные пользователи, не разработчики. Желательно, с каким-то вариантом управления версиями.
Возможно, даже с какой-нибудь процедурой рецензирования. Вот что можно сделать: использовать хранимые в репозитории файлы разметки для хранения текста. И использовать компонент в клиентской части, который бы извлекал эти куски текста и отображал их на странице.
Если вы поклонник React, то вот пример соответствующего компонента <Markdown>, который, при заданном пути к файлу разметки, извлечет его, выполнит синтаксический разбор и визуализацию в виде HTML.
class Markdown extends React.Component { constructor(props) { super(props);
// Конечно, вам нужно заменить это на свой URL this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';
this.state = { markdown: '', }; }
componentDidMount() { fetch(`${this.baseUrl}/${this.props.url}`) .then(response => response.text()) .then((markdown) => { this.setState({markdown}); }); }
render() { return ( <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} /> ); } }
Использовать подобный компонент можно следующим образом:
const Page = () => ( <div className="page"> <div className="about-us"> <Markdown url="about-us.md" /> </div>
<div className="disclaimer"> <p>A very important disclaimer:</p>
<Markdown url="disclaimers/home-page-disclaimer.md" /> </div> </div> );
Так что теперь GitHub играет роль, в некотором роде, вашего CMS, для тех кусков текста, которые вы хотели бы разместить. Вышеприведенный пример извлекает разметку только после того, как компонент будет загружен в браузере.
Если вам нужен статический сайт, то придется визуализировать его на сервере. Хорошая новость! Ничто не мешает вам извлечь все файлы разметки на сервере (при использовании любой устраивающей вас стратегии кэширования).
Если вы решите пойти этим путем, то вам имеет смысл воспользоваться API GitHub, чтобы получить список всех файлов разметки в каталоге.
Источник информации: https://javarush.com/groups/posts/1820-12-potrjasajujshikh-vozmozhnostey-github
Подписывайтесь на наш телеграмм, в котором мы публикуем анонсы новых курсов, новости, акции и скидки на обучении более чем 50 российских онлайн-школ и вы всегда будете в курсе того, что происходит на российском рынке онлайн-образования!
