Просмотр HTML на GitHub в браузере без загрузки проекта

Быстрый ответ

Для просмотра ваших HTML-файлов прямо в браузере можно использовать сервис GitHub Pages или веб-сервис http://htmlpreview.github.io/?. Вот пример ссылки, представляющей мгновенный результат:

http://htmlpreview.github.io/?https://github.com/your-username/repo/blob/main/file.html

В этом URL-адресе замените your-username, repo, main и file.html на соответствующие данные вашего аккаунта на GitHub.

Настройка GitHub Pages

Чтобы отобразить ваш HTML в действии, активируйте функцию GitHub Pages в настройках вашего репозитория:

1. В настройках репозитория перейдите на вкладку "Pages".
2. Определите, где будет размещаться ваш HTML, это может быть ветка main, директория docs или специально созданная ветка gh-pages.

3. Если хотите начать с нуля, создайте ветку gh-pages с параметром --orphan.

   После настройки, ваш сайт будет доступен по адресу (убедитесь, что заменили заглушки на свои данные):

https://your-username.github.io/repo/

Обратите внимание, что изменения могут занять до 10 минут.

Форкование, клонирование и рендеринг

Хотите отредактировать пример и увидеть его во всей красе? Следуйте этому простому четырехступенчатому плану:

1. Создайте форк интересующего репозитория.
2. Клонируйте репозиторий на локальный компьютер, внесите нужные изменения.
3. Отправьте изменения обратно в ветку gh-pages вашего форка.
4. Готово! Теперь вы можете наслаждаться вашим творением по уникальному URL GitHub Pages.

Не забывайте: важно ознакомиться с лицензией, чтобы избежать нарушения авторских прав!

Добавление изысканности странице с помощью тем GitHub Pages

Мечтаете о том, чтобы ваша веб-страница была непревзойденной? Оформите её, используя темы Jekyll:

1. В репозитории перейдите в раздел "Настройки", затем выберите вкладку "Pages".
2. Прокрутите страницу до раздела "Theme Chooser" и выберите понравившийся дизайн.
3. Как только вы выберете тему, GitHub автоматически применит её к вашей странице. Просто и удобно.

Визуализация

Рассматривайте GitHub как своё творческое пространство (🚧), а ваш HTML-файл как картину (🎨), которую можно показать миру:

• Обычно, чтобы просмотреть файл, его нужно было скачать и открыть в браузере.
• Но с GitHub Pages вы можете увидеть ваш творческий результат прямо на вашем рабочем месте.

Так можно сделать ваше творение видимым:

1. Создайте HTML-файл (🎨) в вашем репозитории.
2. Активируйте GitHub Pages (🖼️) в настройках репозитория.
3. И вот оно! Теперь ваш файл доступен как веб-страница (🌐).

Предварительный просмотр: 🚧🔍💻 — Просмотр без загрузок, мгновенный результат.

За пределами GitHub Pages

Прощай, RawGit, здравствуй, альтернативы!

RawGit ушёл на заслуженный отдых, но его место заняли достойные замены! Вот две внимания заслуживающие альтернативы, которые пришли ему на смену:

• raw.githack.com обеспечивает файлы с правильными заголовками Content-Type.
• jsDelivr превращает ваш GitHub репозиторий в бесплатную сеть доставки контента (CDN).

Подробнее об этом расскажет наш спикер на видео

Обеспечение стабильной работы

Чтобы ваш сервис GitHub Pages работал без сбоев, учтите следующее:

• Приватные репозитории могут использовать GitHub Pages, если у вас есть подписка на платный план.
• Пользовательские домены могут улучшить ваше веб-присутствие.
• Включение обязательного использования HTTPS повышает безопасность и позиции в поисковой системе.

Полезные материалы

1. GitHub Pages — представьте и посмотрите предварительный просмотр ваших HTML-страниц прямо из репозитория GitHub.
2. GitHub & BitBucket HTML Preview — просмотр HTML-страниц из репозиториев GitHub и BitBucket без необходимости скачивания.
3. raw.githack.com — корректная доставка raw.githubusercontent файлов для удобства тестирования веб-страниц.
4. Discover gists – GitHub — быстрый поиск интересных снимков кода для D3, HTML, CSS, и JavaScript.
5. RawGit — до 2019 года обслуживал исходные файлы с GitHub полностью соответствующими типами контента.
6. JSFiddle – Code Playground — тестируйте свой HTML, CSS, и JavaScript код, работая совместно с репозиториями GitHub.