Atom как открыть репозиторий
Обновлено: 20.05.2024
Привет
Использую Atom для написания сайта. Недавно узнал о Github Pages, хотелось бы сделать так, чтобы у меня на компьютере локально лежали файлы, я их редактировал и они синхронизировались с репозиторием github и соответственно обновлялся сам сайт работающий на Pages. Можно так сделать?
Если можно, то описание для чайников.
- Вопрос задан более трёх лет назад
- 1442 просмотра
Решения вопроса 1
Пока ты спишь - твой конкурент совершенствуется
Ответ написан более трёх лет назад
Артём Белоусов @flygrounder
В случае с Atom разумнее использовать именно плагин от тех же разработчиков
Артём Белоусов: я увидел слово "чайник" и предложил удобный юзерфрендли клиент для гита, с которым реально разберется любой. даже если человек не знает ни одной команды гита.
Артём Белоусов @flygrounder
iBird Rose: Поверьте, плагин был разработан с той же целью, а вообще лучше бы и команды изучить)
Кирилл Яшин @Kirill_Iashin Автор вопроса
Значит я чайник без носика, уже полчаса втыкаю в эту софтину и не могу понять что делать..
Репозиторий я клонировал на компьютер, ок, открываю любой css, редактирую, в софтине пишет типа были изменения, но когда смотрю страницу в браузере на предмет своих изменений, там все по прежнему
Кирилл Яшин @Kirill_Iashin Автор вопроса
Артём Белоусов: обязательно изучу, не всё сразу :)
хотелось бы уже с чего-то начать..ничего не получается, руки медленно опускаются..
Артём Белоусов: ты написал свой ответ про этот плагин. я написал свой ответ про клиент для гита. дальше дело за автором вопроса.
Кирилл Яшин @Kirill_Iashin Автор вопроса
iBird Rose: после редактирования, в GitHub Desktop, изменения посмотреть можно, но с самим github нет синхронизации. Даже не через Pages, просто в репо открываю файл и изменений нет
Кирилл Яшин: эти изменения нужно закоммитить. кнопка "Commit to master". потом нажать "sync", чтобы изменения ушли в репозиторий.
Кирилл Яшин @Kirill_Iashin Автор вопроса
iBird Rose: тьфу ты. Все получилось. Спасибо
Кирилл Яшин: про него не я говорил. ответ Артём Белоусов выше. пиши в комменты к его ответу)
Кирилл Яшин @Kirill_Iashin Автор вопроса
Ответы на вопрос 1
Артём Белоусов @flygrounder
Python/Django
В atom последних версий вшит плагин github, посмотрите его.
Ответ написан более трёх лет назад
Кирилл Яшин @Kirill_Iashin Автор вопроса
Я правильно лезу вообще?
Из материала вы узнаете, как настроить синхронизацию всех настроек и плагинов для текстового редактора Atom с помощью плагина sync-settings и GitHub gist. Будет полезно и интересно тем, кто давно искал способ единожды настроить текстовый редактор для WEB-разработческих нужд и легко дублировать настройки на все другие свои компьютеры. А так же всегда иметь возможно актуализировать эти настройки и установленные плагины.
Для настройки нам понадобиться
Я окончательно отказался с Sublime 3 на Atom. Да, на Sublime 3 то же можно настроить нечто подобное, можно использовать Dropbox, можно что-то еще костылить. Но я начинал свой путь еще с Notepad++ и уже устал за столько лет вечно что-то настраивать и конфигурировать. Я просто хочу чтобы все работало в 2 клика.
Кстати, когда есть необходимость на автозамену сразу в 500+ файлов, Notepad++ до сих пор нет равных, надо отдать должное старичку.
Создание персонального GitHub token
Перейдите по ссылке для создания нового token, введите свой пароль, в списке доступов отметьте gist — Create gists, нажмите кнопку Generate token и скопируйте выданный вам token. Он пригодиться нам чуть позже, скопируйте его куда-то понадежнее.
Создание GitHub Gist ID
- В поле Gist Description — Atom settings sync
- В поле File name — Atom-sync-accesses.txt
- В поле содержания файла введите gist token= [ваш token] и gist каждое параметр с новой строчки. Чуть позже мы добавим сюда для gist id.
- Нажмите на кнопку Create secret gist. Вы создадите приватный gist, доступный только вам.
Теперь обратите внимание на адрес страницы, на которую вы попали. Сразу после вашего login будет идти ваш gist id, скопируйте его.
Теперь отредактируйте уже созданный вами файл, нажав на кнопку Edit и добавьте значение к gist id.
Мы создали файл с доступами для того, чтобы вы всегда знали где можете их подсмотреть. А так как у вас приватный gist, то никто кроме вас их не узнает.
Настраиваем Atom
Устанавливаем и запускаем Atom. Несколько полезных горячих клавиш, которые могут сразу вам пригодиться
- Alt — открывает/закрывает верхнее меню
- Ctrl + \ — открывает/закрывает sidebar с папками и файлами
- Ctrl + , — открывает раздел меню Settings
Перейдите в раздел меню File->Settings, нам потребуется раздел Install, найдите и установите пакет sync-settings.
Сразу после установки вверху справа появиться красное, предупреждающе о необходимости настроить sync-settings окно. Перейдите в настройки пакета. Но, да же если вы случайно закрыли окно, просто в File->Settings в разделе Packages найдите нужный вам пакет и перейдите в его настройки от туда.
Заполните ваш gist id и gist token. Никаких кнопок Save нет, все сохраниться само. На этом настройка закончилась. В будущем, вы всегда будете пользоваться вашим gist id и gist token, создаются они только один раз.
Отправка настроек на GitHub
Откройте консоль команда клавишами Ctrl + Shift + P, начните вбивать sync, вы увидите команду Sync Settings: Backup , это команда отправит ваши настройки на GitHub.
Получение настроек из GitHub
Вы установили Atom а новом компьютере, установили и настроили на нем sync-settings. В консоле команд запустите Sync Settings: Restore. ВОт и все, все настройки и список плагинов попал к вам. Может понадобиться некоторое время для скачивания и установки, а для некоторых плагинов перезагрузка.
Если у вас MacBook, вместо Ctrl жмите Command.
Если вам понравился или был полезным этот материал, то хотел бы посоветовать мои другие статьи на эту тему —
Если вы новичок и еще не работали с консолью, но уже хотите работать с Git и GitHub, то вместо поиска подходящего GUI, советую вам присмотреться к редактору Atom.
Atom — отличный редактор кода с богатым функционалом и очень гибкой настройкой. Так как он разрабатывался командой GitHub, то вполне логичным и долгожданным стало появление в стартовой сборке версий 1.18+ одноименного пакета “GitHub”, позволяющего работать с репозиториями и системой контроля версий напрямую из редактора без установки дополнительных программ, в том числе даже GitHub Desktop.
Работа с пакетом в е дется через панели Git и GitHub. Их можно открыть через меню редактора: Packages -> GitHub -> Toggle Git Tab, или сочетанием клавиш Ctrl + Shift + 9 для Git и Ctrl + Shift + 8 для GitHub.
Подключение удаленного репозитория
Для примера создадим новый репозиторий.
Войдите в свой аккаунт на GitHub и выберите пункт “New repository” в меню справа или нажмите зеленую кнопку “New repository” в разделе “Your repositories”.
Чтобы связать локальный репозиторий с удаленным, нам необходим специальный URL этого репозитория на GitHub.
В созданном репозитории нажмите кнопку “Clone or download” и скопируйте URL.
Откройте командную строку редактора Crtl + Shift + P и введите команду “GitHub: Clone” или воспользуйтесь сочетанием клавиш Alt + G и затем =.
Команда PUSH
Кликнув на дереве локального рипозитория слева, создадим новую папку с именем “css” сочетанием клавиш Shift + A (или пункт “New folder” в контекстном меню). Обратите внимание — на панели Git создание пустой папки не отображается, т.е. папка без содержимого не будет добавлена в коммит, а значит и в репозиторий на GitHub. Добавим в нее несколько новых файлов — клавиша “A” или пункт “New file” в контекстом меню.
В разделе “Unstaged Changes” создание файлов отображается зелеными значками. Желтыми значками будут отображаться изменения в уже проиндексированных файлах. Красными значками будут отображаться удаленные файлы.
Отправим наши изменения в удаленный репозиторий на GitHub. В разделе “Unstaged Changes” нажмите кнопку “Stage All”. Все учтенные изменения будут перенесены в раздел “Staged Changes”. Если вы хотите добавить только некоторые — выберите нужные и нажмите клавишу Enter. При необходимости вы можете вернуть их обратно кнопкой “Unstage All”.
Инструкция по установке, настройке и использованию самого передового на сегодняшний день редактора кода
Mar 4, 2015 · 7 min read
Не так давно все переходили с какого-нибудь TextMate на SublimeText и это было реально своевременно круто. Но когда в индустрию редакторов кода вошёл GitHub, сразу стало понятно за кем будущее.
Atom — это быстроразвивающийся редактор кода от GitHub с открытым исходным кодом и растущим сообществом. Абсолютно бесплатный, ультра современный, легко настраиваемый через человекопонятный интерфейс, но пока что чуть медленный — в этом весь Atom.
На мой взгляд, на сегодняшний день это лучший редактор кода, который способен изменить индустрию и остаться в ней на очень долгое время.
Для установки вам необходимо быть обладателем одной из описанных на сайте Atom систем:
OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux
Так как я работаю на Mac, то большая часть инструкции будет для него, иногда с информацией для Windows.
Скачайте дистрибутив и установите его как полагается в вашей системе. На Mac OS X нужно перенести приложение в папку приложений (Applications), на Windows запустить установочный дистрибутив.
После этого откройте Atom и давайте перейдём к настройке.
Для того, что бы всё было удобно, я расскажу вам как настроить сам Atom, вашу систему, какие пакеты поставить, что они дают, как их использовать и какую тему подсветки синтаксиса выбрать.
Настройка Atom
После установки Atom сразу готов к работе и настроен в соответствии с последними тенденциями. Вам нужно настроить всего две вещи.
Добавьте разметку отступов
Зайдите в настройки Atom → Preferences → Settings и поставьте галочку на Show Indent Guide. Это включит отображение специальных полосочек, которые помогают видеть вложенность кода.
(UPDATE: не актуально) Настройте правильную работу autocomplete
Autocomplete — это инструмент для автоматического написания кода. Зайдите в Atom → Open Your Keymap и вставьте в конец документа следующий код:
Настройка Mac OS X
В современных редакторах кода можно раздвигать курсор на несколько строк. Что бы это делать на Mac, нужно выключить пару стандартных сочетаний клавиш. Зайдите в системные настройки → System Preferences → Keyboard → Shortcuts → Mission Control и снимите галочки на двух пунктах:
Mission Control
Занимает сочетание клавиш ^↑
Application windows
Занимает сочетание клавиш ^↓
Теперь, когда будете играться с кодом, попробуйте по нажимать Shift-Ctrl-↑ и Shift-Ctrl-↓. Вы можете редактировать несколько строк одновременно. Также можно вставлять дополнительные курсоры в любые места в коде зажав Cmd и просто кликая в необходимое место.
Установка пакетов
Packages — это небольшие, но очень удобные дополнения, которые расширяют возможности Atom.
Для установки пакетов зайдите в Atom → Preferences → Install и через строку поиска найдите и установите следующие пакеты:
Atom-color-highlight
Подсвечивает цветовые величины в коде
Autocomplete-css
Упрощает написание CSS
Autocomplete-paths
Упрощает написание путей к файлам проекта
Autocomplete-plus
Упрощает автоматическое написание кода
Emmet
Незаменимый инструмент дзен коддера, ускоряет написание HTML кода в разы
Выбор темы подсветки кода
Моя любимая тема Twilight не поставляется с Atom, скорей всего потому, что эта тема пришла из другого редактора кода TextMate. Несмотря на новизну Atom, к сожалению, я пока не нашёл для себя ни одной нормальной темы поставляемой с ним.
Для установки Twilight, нужно опять зайти в установку как в прошлый раз, только в этот раз в строке поиска нужно выбрать Themes, вместо Packages. Найти Twilight и установить.
После того, как пакеты и темы поставлены, перезагрузите Atom для того, что бы всё точно заработало (полностью закройте программу и откройте снова).
Что бы попробовать новые установки и настройки в действии давайте сделаем несколько упражнений.
Emmet в действии
Создайте новый файл и сохраните его, назовите “index.html”, естественно без кавычек. Для правильной работы всех помощников Atom, так называемых сниппетов (snippets) и для правильной подсветки кода (syntax highlighting) обязательно нужно указывать правильное расширение файла (.html в данном случае).
Итак, пишем в документе восклицательный знак и нажимаем Tab. Emmet развернёт вам базовую структуру HTML.
Подробней об использовании Emmet читайте в документации на официальном сайте.
Autocomplete Paths в действии
Положите в папку, в которой лежит ваш index.html какие-нибудь картинки, для удобства, создайте дополнительную папку images и положите картинки в неё.
В index.html между тэгами <body> и </body> напишите “img”, и нажмите Tab. У вас появится немного кода и курсор будет стоять внутри кавычек атрибута src. Атрибут src обозначает source (источник, исходник) тэга img, что обозначает image (изображение). В значении атрибута scr вам нужно указать путь к картинке, для этого напишите название папки “images” и далее слэш “/”. Autocomplete Paths предложит вам выбрать название картинок из указанной папки.
Autocomplete CSS в действии
Создайте новый файл и сохраните его, назовите “style.css”, без кавычек. Для того, что бы увидеть autocomplete в действии создайте CSS селектор. Напишите html и откройте фигурную скобку “
Теперь на новой строке внутри скобок начните писать, например “font”. Вы увидите выпадающие предложения по написанию кода. Перемещайтесь по ним стрелочками, выбирайте нужное нажатием Enter.
Atom Color Highlight в действии
Конечно, всё, что я показал выше доступно в некоторых других редакторах кода. Возможно, некоторые знатоки скажут, что это всё не имеет смысла. Это не так.
Вся современность Atom — тема для отдельного поста, а пока я надеюсь вы получили базовые знания и заряженный сетап для изучения вёрстки.
Жду вас у себя на курсе основ HTML и CSS в Moscow Coding School для быстрой прокачки.
Меня зовут Захар День, я дизайнер и веб-разработчик, занимаюсь созданием цифровых продуктов (приложений) от идеи до реализации, развиваю в Школе дизайна НИУ ВШЭ кафедру «Дизайн и программирование», наши студенты уже работают в таких компаниях, как: Сбербанк Технологии, Aic, Ценципер, Тинькофф Банк, Wylsacom, и некоторых других. Подробнее о результатах этой деятельности смотрите в нашем видео «Hello, World!».
Я также являюсь создателем курса-бестселлера в Moscow Coding School, который прошли сотрудники многих известных компаний: Look At Media, Kaspersky Lab, МТС, Avito, Leo Burnett, BBDO, Ad Index, Readymag, Yandex, и т.д. Подробнее об этом вы можете прочитать в моей статье «Мой путь от самообразования до преподавания за последние пять лет».
Вы можете узнать подробней обо мне в моих Facebook и Instagram, также я иногда пишу статьи на Medium. Публичные стримы будут проходить на YouTube, подпишитесь и нажмите на колокольчик, если вы хотите, чтобы вам пришло оповещение. Также, я публикую информацию на моём сервисе Hack Exchange, на странице Hack Exchange в Facebook и в Vk.
Делитесь знаниями с друзьями. Знания должны быть доступны!
На сегодняшний день редакторы кода совершенно не персонализированы. Что я имею в виду?
Рассмотрим например браузер Google Chrome. Когда вы открываете новый ноутбук, ставите на него Chrome, логинетесь под своим Google аккаунтом, к вам в браузер попадают все ваши закладки, расширения и прочая полезная информация. Это очень радует и бесспорно удобно.
Когда вы ставите любой редактор кода, вам надо с нуля ставить все пакеты, менять настройки и т.п., если только вы не сохранили файл конфигурации и не позанимались прочими гиковскими занятиями.
На много удобней было бы иметь аккаунт (а он уже есть на GitHub), к которому были бы привязаны настройки Atom. Я поднял эту тему на Atom Discuss и получил в ответ гиковское решение, которое работает. Хотя хорошим UX там пока не пахнет.
Синхронизация настроек Atom
Через установку пакетов как описано выше установите sync-settings.
Зарегистрируйтесь или войдите на GitHub. И создайте новый personal access token. Для этого перейдите по ссылке, введите название токена, например Atom Configuration, снимите все галочки, кроме gist, и нажмите Generate Token.
Вы увидите длинный шифр из цифр и букв. Рядом с ним будет написано, что вы его видите в первый и последний раз, так что не переходите никуда с этой страницы, пока всё не доделаете.
Скопируйте токен (шифр) и идите в меню Atom → Preferences Packages → sync-settings → Settings и там вставляйте скопированный токен в поле Personal Access Token.
Теперь идите на сервис GitHub Gist и если вы там не залогинены, то логиньтесь. Создавайте новый Gist — это как экземпляр кода. Всё что нужно для создания пустого гиста — поставить любой символ, например пробел, в большом белом поле для написания кода. После этого кнопки Create Secret Gist и Create Public Gist станут доступными для нажатия. Выбирайте любую, которую считаете нужной. Я храню свою конфигурацию в Public доступе.
После создания гиста, в адресе будет его Gist Id. В моём случае ссылка на мой гист с конфигурацией Atom выглядит так:
Где “10250d74c35cd9fcc630” — это Gist Id, который нужно скопировать и вставить в настройки sync-settings в поле Gist Id.
Перезагрузите Atom. Нажимайте Ctrl-Alt-U. Вы должны увидеть оповещение:
sync-settings: Your settings were successfully uploaded.
Если не увидели, попробуйте в верхнем меню Atom выбрать Packages → Synchronize Settings → Upload. Должно сработать.
Когда вам понадобится загрузить все настройки в новый Atom, вам нужно будет установить sync-settings скопировать Gist Id и Personal Access Token и в меню выбрать Packages → Synchronize Settings → Download или нажать Ctrl-Alt-D.
Читайте также: