Кто-то должен создать X для Интернета» — почему бы и нет? Все, что вам нужно, это учетная запись GitHub

На прошлой неделе Шиме Видас пожаловался в Твиттере, что на мобильном устройстве сложно вставить блок текста . Я предложил использовать pastebin.com, но перед вставкой требуется много нажатий. Затем Шиме пошутил, что мы должны создать pastebinzero.com, и все, что ему нужно, это полноэкранный режим.



Так что я потратил буквально минуту, чтобы построить это. В моем браузере ничего, кроме входа в GitHub. От настройки до написания кода с поддержкой автозаполнения и до хостинга. Вы можете увидеть его во всей красе на https://codepo8.github.io/pastebinzero и посмотреть код на https://github.com/codepo8/pastebinzero .

И вы тоже можете это сделать. Вот как.

Если вы хотите увидеть это в виде видео, посмотрите следующее двухминутное пошаговое руководство.

В противном случае, вот шаги для запуска, сборки и размещения любого проекта на основе HTML /CSS/JavaScript на GitHub.

  • Перейдите в свой профиль GitHub, нажмите «Репозитории» и нажмите кнопку «Создать». Анимация создания нового репозитория в GitHub
  • Вам нужно назвать репозиторий, так как позже это также будет частью URL -адреса. GitHub автоматически сообщит вам, доступно ли имя репо или нет. Убедитесь, что ваш репозиторий общедоступен, и нажмите «Создать репозиторий». Если вы не хотите показывать исходный код, а хотите, чтобы люди видели только результат, вы также можете сохранить его в тайне. Сгенерированные страницы GitHub всегда общедоступны. Анимация именования и создания нового репозитория
  • Это создало репозиторий, и вы получаете всю информацию о том, что делать дальше. А пока нажмите ссылку «создание нового файла». Анимация создания нового файла в репозитории GitHub
  • Назовите файл `index.html` и введите что-нибудь в качестве содержимого. Сейчас это не важно, так как этот редактор в порядке, чтобы сделать несколько быстрых исправлений, но не режет горчицу. Нажмите кнопку «Зафиксировать новый файл», и вы получите новый файл. Анимация создания индексного файла в репозитории
  • Перейдите на вкладку «Настройки» и выберите пункт меню «Страницы». Обязательно выберите ветку «main» в раскрывающемся меню и нажмите «Сохранить». Это делает то, над чем вы работаете, доступным в виде URL -адреса в Интернете. Анимация страниц публикации на GitHub
  • Вернитесь в раздел «Код» репозитория и нажмите кнопку «.». Это загружает код Visual Studio в браузер с открытым проектом. Теперь вы можете написать свой проект, используя всю мощь VS Code, включая автодополнение и IntelliSense. Анимация открытия кода VS в репозитории и редактирования файла
  • Когда вы закончите, перейдите к опции `Source Control` в коде VS, введите сообщение фиксации и нажмите галочку. Это зафиксирует изменения в репозитории. Анимация добавления сообщения фиксации и отправки файла
  • Вы можете увидеть, когда ваш продукт доступен онлайн, на вкладке «Действия» вашего репозитория. Проверьте рабочий процесс «Сборка и развертывание страниц». Он показывает желтый счетчик, пока страница не будет готова. Когда он превратится в зеленую галочку, ваша страница готова. Анимация процесса сборки, отображаемая на вкладке «Действия» GitHub.

Для демонстрации видео код доступен по адресу https://github.com/codepo8/greencircle , а версию в браузере можно увидеть по адресу https://codepo8.github.io/greencircle , где `codepo8` — мой пользователь GitHub. имя и `greencircle` имя репозитория

Почему не codepen, jsbin, codeandbox, jsfiddle…?

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

Многие из этих функций также доступны на других платформах, и мне очень нравится, что вы можете сразу увидеть результаты своих проектов по мере их кодирования. Но это похоже на отличное комплексное решение, требующее только одного входа в систему, которое мне в любом случае нужно для большей части моей работы. Кстати, если вы хотите, чтобы ваш проект сразу отображался внутри VS Code в браузере, вы также можете установить расширение Codeswing: https://ift.tt/TRh5XqO.

Leave a Comment

Ваш адрес email не будет опубликован.