Перейти к содержимому

Как добавить картинку в репозиторий github

  • автор:

Как шарить картинки через Гитхаб

Илья жалуется на облачные хранилища за то, что не показывают нормально картинки. Нормально значит средствами браузера по прямой ссылке.

Действительно, это проблема. Картинку, расшаренную через какой-нибудь условный Дропбокс, невозможно открыть без мата. Сначала прогрузится верхняя панель, потом тулбар, скрипты и виджеты, а в конце, может быть, дойдет до картинки.

Еще хуже обстоят дела с документами. Интерфейс рисует их прямо на странице: медленно, с тормозами, огромным потреблением памяти. Нет глупее поступка, чем шарить файлы через облачные сервисы.

Я пишу этот пост чтобы, во-первых объяснить причины такого поведения, а во-вторых, предложить достойное решение.

Ни один облачный сервис, будь то Дропбокс, Гугл-диск, Яндекс-диск, Мейл-облако, не даст прямую ссылку на файл. Виноваты в этом не программисты и даже не менеджеры. Просто сервис с прямыми ссылками становится убыточным и рискует закрыться.

Если дать пользователям анонимно ссылаться на файл в сети, это мгновенно превратит сервис в хостинг картинок для форумов и борд. А это противоречит бизнес-целям сервиса. Ведь он задумывался не как хостинг, а хранилище личных данных. Возникает разница между целью и результатом.

Может, вы помните, в Дропбоксе была особая папка public, содержимое которой видно любому анониму. Пользователи шарили из нее картинки для блогов и соцсетей. Особо одаренные держали там статичные сайты. Какой-нибудь условный Вася постил с Дропбокса смешную фотку на Пикабу, и сервис раздавал ее сотни тысяч раз. Теперь представьте, что фотка не одна, а сто, и таких Вась тысячи.

Дропбокс, как известно, хостится на Амазоне и выплачивает огромные деньги за трафик. При этом им нужно окупить расходы на инфраструктуру, офис и Гвидо Ван Россума лично. Поэтому минимизация трафика и запрет на прямые ссылки – неизбежное следствие.

Конечно, открывая картинку в интерфейсе Дропбокса, я всецело на стороне пользователя. Но другой частью разума понимаю, что шаринг по прямой ссылке превратит сервис в файло-помойку.

Внезапно, самый удобный способ пошарить картинку сегодня – это Гитхаб! Для этого не нужно пихать файл в репозиторий. В Гитхабе, кстати, не дураки сидят: все статичные медиа-файлы из репозитория они раздают с заголовком Content-Disposition: attachment , что говорит браузеру скачать файл, а не открыть для просмотра.

Однако, если залить картинку в любой раздел проекта, например, ишью, пулл-реквест, вики или комментарий, она будет доступна по прямой ссылке без каких-либо проблем, анонимно и круглосуточно. Достаточно перетянуть файл в текстовое поле, картинка тут же подгрузится, в тексте появится ее уменьшенная копия со ссылкой на оригинал.

Я иногда пользуюсь этим способом, если в тексте много фотографий. Блог у меня на Гитхабе, однако заливать в репозиторий много бинарных файлов нехорошо. Поэтому я создаю в проекте блога ишью с именем, например “Baltimore photos”, забрасываю туда фотки и копирую ссылки. Посмотреть в действии можно в моем рассказе про Балтимор. Обратите внимание на адреса картинок. А вот ссылка на тот самый ишью с фотками.

Я не скажу точно, какие ограничения накладывает Гитхаб на такой хостинг. Скорее всего, система учитывает домены и считает трафик, но еще ни разу не сталкивался с ограничениями. Конечно, этот способ не подойдет для аудитории какого-нибудь Варламова. Но для блога и небольших сообществ – вполне.

Наконец, Гитхаб – отличный способ организовать рабочий процесс. Не кидайтесь картинками через Телеграм. Заведите проект, в нем тасочку, добавьте метки, ответственных. Все файлы и комментарии должны оседать в таске, чтобы через год открыть и все вспомнить.

Предположим, студенты должны прислать работы к конкурсу. Создайте проект в Гитхабе (приватный, если нужно). Каждый участник открывает таску со своим именем, подливает файл. Он доступен по прямой ссылке. Все комментируется, трекается, хранится неограниченно долго, на почту приходят письма.

Мне кажется, проще и удобней сегодня ничего нет.

Нашли ошибку? Выделите мышкой и нажмите Ctrl/⌘+Enter

Комментариев пока нет

  • Ivan Grishaev’s blog
  • ivan@grishaev.me

chrisryana / pasteImage.md

В этом кратком руководстве вы узнаете, как создать отдельную ветку в своем репозитории для размещения скриншотов и демонстрационных картинок для использования в файле Readme.md master-ветки.

1. Клонируйте репозиторий

Чтобы предотвратить любую потерю работы, лучше всего клонировать репозиторий в отдельном месте для выполнения этой задачи.

2. Создайте новую ветку

Создайте новую ветку в репозитории, используя в терминале команду git checkout —orphan assets

Это создаст и переключит вас на новую ветку под названием «assets». Флаг —orphan создает новую ветку пустой, без привязки к родительской ветке. В ней не будет коммитов. Однако она сохранит рабочее дерево.

3. Удалите все файлы из дерева

git rm -rf .

Важно: обязательно убедитесь что находитесь в нужной ветке «assets» с помощью команды git branch

Обратите внимание на точку в конце. Это часть команды, означающая, что нужно удалить все файлы.

4. Добавьте свои изображения и передайте изменения

Переместите в папку проекта все необходимые файлы и введите в терминал команду git add . . Теперь можно закоммитить изменения: git commit -m «Добавлены демонстрации» .

5. Отправьте изменения в удаленный репозиторий

git push origin assets

6. Используйте изображения в Readme

Теперь вы можете использовать ссылку ![alt text](https://raw.githubusercontent.com/username/projectname/commit/img.png) в вашем readme.

  • alt text – любой текст описывающий изображение. Лучше указать, тк если указана неверная ссылка, будет легко обнаружить это.
  • username – логин на гитхаб
  • projectname – название репозитория
  • commit – уникальный hash коммита. Чтобы его узнать нужно ввести в терминал команду git log и скопировать безобразно длинную строку из букв и цифр.
  • img.png – имя файла изображения

7. Удалите ветку

Проверьте, что все изображения корректно отображаются в Readme. Если изображения нет, но и иконка поврежденного файла не отображается — все нормально. Значит файл достаточно большой и еще не загрузился. У меня такое было и занимало до 5-7 минут.

Теперь можно удалить ветку git push origin —delete assets

Все изображения должны отображаться��

Украсьте свой GitHub!

Если вы когда-нибудь заходили на чей-то GitHub и замечали, что на его домашней странице есть несколько причудливых картинок, крутых эмодзи и статистика, вы, возможно, задавались вопросом, как сделать такую страницу самостоятельно. Если это похоже на вас, продолжайте читать, потому что в этой статье я расскажу вам, как сделать ваш GitHub README привлекательным!

Как сделать свой собственный

Создание профиля GitHub README — это суперпростая задача, но ее немного трудно выполнить самостоятельно. Как только вы вошли в GitHub, инициализируйте новый репозиторий, перейдя по адресу . Назовите ваш новый репозиторий именем вашей учетной записи GitHub (подсказка: его можно найти, наведя курсор на значок вашего профиля в правом верхнем углу экрана) и нажмите «Создать репозиторий».

Для краткости отметьте пункт «Добавить файл README» при создании репозитория. README должен быть там, чтобы ваш новый необычный профиль был необычным.

Выделите его

Теперь, когда вы создали свой GitHub README, вам нужно знать несколько вещей о том, как сделать его красивым. В GitHub README используется язык Markdown. Вы можете использовать Markdown для добавления изображений, ссылок, рисунков, заголовков и многого другого.

Одна вещь, которая мне очень нравится на странице профиля GitHub — это заголовок. Это приятный личный штрих, который очень легко сделать с помощью таких программ, как PhotoShop, Sketch или даже Google Docs. А если вы хотите сделать что-то еще проще, посмотрите Canva Headers .

В заголовке может быть ваше имя, фотография, должность, местоположение и множество других вещей. Вот несколько примеров, которые мне очень нравятся:

Добавить картинки в README на GitHub очень просто. Если у вас есть файл, сохраненный локально, вы можете просто перетащить его в свою разметку, и он будет импортирован. Если вы хотите добавить ссылку в виде фотографии, вы можете использовать тег и добавить src с путем к фотографии, которую вы хотите добавить. Помните, что — это самозакрывающийся тег, в Markdown могут быть ошибки, поэтому не забудьте закрыть этот тег!

Расскажите людям о себе

Людям интересны другие люди, расскажите свою историю. Пара строк текста о вашей философии разработчика может в значительной степени показать потенциальному работодателю или сотруднику, кто вы есть! Еще лучше — дать список того, над чем вы сейчас работаете, что вам интересно узнать, и дать ссылки на несколько ваших проектов. Поиск соавторов по вашим текущим проектам — один из лучших способов налаживания связей.

Это еще одна прекрасная возможность рассказать интересный факт о себе. Убедитесь, что ваши пункты краткие и в точку. Добавьте эмодзи, чтобы было немного интереснее.

Подчеркивание своих навыков

Настоятельно рекомендуется отображать свои навыки прямо на домашней странице GitHub. Вы упорно работали над этими навыками, покажите их! Когда потенциальные работодатели или соавторы зайдут на вашу страницу GitHub, это даст им возможность быстро понять, на каких языках вы можете работать.

Есть несколько способов сделать это: вы можете разместить логотипы всех языков, инструментов и технологий, в которых разбираетесь.

Самый простой способ найти эти значки — использовать google images, а затем нажать на «tools», затем «color», затем «transparent». В результате вы получите большое количество изображений в формате .png, размер которых можно легко изменить в Markdown.

Некоторые другие замечательные источники для поиска логотипов или иконок — https://simpleicons.org/, а если вы ищете что-то более причудливое, загляните на https://shields.io.

Покажите свою работу

Еще один действительно хороший способ похвастаться своими навыками — это демонстрация своих репозиториев. Первый способ сделать это — закрепить свои лучшие репозитории прямо на домашней странице.

Чтобы изменить свои прикрепленные репозитории, перейдите на домашнюю страницу GitHub github.com/your-user-name и прокрутите страницу до раздела «Прикрепленные». Справа вверху от ваших текущих прикрепленных репозиториев есть текст с надписью «Настроить прикрепленные». Нажмите на него, и появится модальное окно со списком всех ваших работ. Отметьте те работы, которые вы хотите показать, вы можете разместить до шести репозиториев на своей домашней странице.

Если вы хотите поднять свой профиль новый уровень, обратите внимание на GitHub README Stats . GitHub README Stats — это инструмент, который позволяет отображать статистику на домашней странице GitHub в виде красиво отформатированных карточек. Вы можете передать множество параметров информации, таких как top_langs, что даст вам «карточку» для вашего README, отображающую ваши лучшие языки. Существует множество других аргументов, которые вы можете передать в URL статистики, и документация очень полезна.

Собираем все вместе

Теперь, когда вы стали мастером Markdown и чемпионом по созданию домашней страницы GitHub, переместите свой README в основную ветку и похвастайтесь своим новым красивым GitHub на LinkedIn! Помните, что вы всегда можете вернуться и отредактировать свой README в любой момент, поэтому обязательно протестируйте несколько различных настроек.

Персональный блог Толика Панкова

Стихи, рассказы, философия, IT, политика, панкизм, раздолбайство и болтовня.

После вечеринки с друзьями начальник СКП А. Бастрыкин раскурил «косяк» в компании неизвестного, одетого в костюм Микки-Мауса

Как добавить картинку в readme на GitHub

Posted on 13.05.2019 by Tolik Punkoff

Очередная заметка «от склероза». Товарищ is3@ljr посоветовал добавить скриншоты в readme проекта ASCII-капчи, а я ж, как обычно, мануалы читаю в последнюю очередь, и даже не знал о такой возможности. А она есть.

1. Грузим картинки на GitHub, желательно в отдельный каталог, например screnshoots . Лучше грузить скрины в сам репозиторий, хотя GitHub позволяет вставку картинок и с других сайтов.

2. Добавляем следующий код в README.md :

ASCII captcha on real HTML page:

![ASCII captcha on real HTML page](https://raw.githubusercontent.com/tolik-punkoff/ascii-captcha/master/screnshoots/on_page1.png)

User send wrong code:

![User send wrong code](https://raw.githubusercontent.com/tolik-punkoff/ascii-captcha/master/screnshoots/on_page2_wrong%20code.png)

Правда описание у меня нигде не всплыло, но наверное потому, что я использовал браузер в параноидальном режиме, без js.

This entry was posted in Блог and tagged it, разное. Bookmark the permalink.

Добавить комментарий Отменить ответ

Свежие записи

  • Форматы видео для рендеринга (размеры)
  • Позитив — Думай позитивно! (EP)
  • Расчлененная Пугачова, фанарт.
  • Самописный «Сапер» на VB 6.0
  • Мой друг прислал вам немного весны.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *