Как поделиться кодом многостраничного сайта

Эта функция действительно очень полезна для развертывания статических веб-сайтов (HTML, CSS, JavaScript, React, Vue), таких как личные портфолио, проектная документация или все, что вы хотите развернуть.

. подсказка Он также позволяет настроить собственный домен для вашего веб-сайта.

Приготовьтесь к глубокому погружению в ⭐-

1. Создайте репозиторий GitHub

Чтобы развернуть свой веб-сайт с помощью страниц GitHub, сначала необходимо создать репозиторий GitHub в своей учетной записи.

. информация Примечание. Если у вас нет учетной записи GitHub, вы можете создать ее на официальном сайте GitHub (нажмите здесь)

Теперь нажмите кнопку Создать в своей учетной записи GitHub.

Выберите любое имя для своего репозитория ��, но помните, что оно будет отображаться в URL-адресе вашего веб-сайта.

Для этого блога я назову свой репозиторий — my-hackernoon-repo

Затем нажмите кнопку Создать репозиторий.

2. Клонируйте этот репозиторий на свой локальный компьютер

После создания репозитория вы будете перенаправлены на страницу репозитория. Там вы получите ссылку HTTPS/SSH , с помощью которой вы сможете клонировать свой репозиторий на свой компьютер.

Теперь запустите приведенную ниже команду на своем компьютере/ноутбуке

После выполнения вышеуказанной команды ваша командная строка будет выглядеть так ��

Теперь откройте папку репозитория в текстовом редакторе. Я использую VSCode.

3. Создайте свой статический веб-сайт

Теперь вы можете создать свой веб-сайт в своей папке. Для этого блога я создаю только файл index.html.

. информация Создайте файл index.html, он будет точкой входа на наш веб-сайт.

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

Что будет выглядеть так �� в браузере.

4. Отправьте свой код в репозиторий GitHub

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

До тех пор вы должны делать то же самое и с другим репозиторием GitHub.

Чтобы убедиться, что все работает правильно, откройте страницу репозитория GitHub и проверьте, есть ли там ваш файл index.html или нет. Если он есть, значит, вы готовы двигаться вперед.

5. Откройте настройки вашего репозитория

Пришло время развернуть наш веб-сайт и сделать его доступным для всего мира ��.

1. Перейдите на вкладку Настройки вашего репозитория.
2. Затем в разделе Код и автоматизация нажмите Страницы .

Теперь вы будете перенаправлены на страницу конфигурации страниц GitHub. Здесь GitHub попросит вас развернуть ваш сайт и создать для него URL-адрес.

Для развертывания нашего сайта доступны два источника для развертывания нашего сайта —

1. Действия GitHub
2. Развертывание из ветки

Здесь мы рассмотрим GitHub Actions. Выберите Действия GitHub в раскрывающемся списке источников.

Нажмите кнопку Настроить под карточкой Статический HTML.

Он создаст файл static.yml для действий GitHub. Теперь нажмите кнопку начать фиксацию .

Перейдите в раздел Страницы на вкладке Настройки вашего репозитория. и ТАДА ��, ваш сайт запущен.

. подсказка Примечание. Как видите, URL-адрес веб-сайта основан на вашем имени пользователя GitHub и имени репозитория.

Нажмите на свой URL, чтобы увидеть онлайн-версию вашего веб-сайта.

6. Добавьте несколько новых страниц

Одной страницы недостаточно для любого веб-сайта, верно? поэтому теперь мы добавляем еще одну страницу на наш веб-сайт под названием about.html page.

Не стесняйтесь создавать код по своему выбору.

Я буду использовать приведенный ниже код для своей страницы about.html .

Затем давайте создадим кнопку на главной странице ( index.html ), чтобы одним щелчком мыши открывать страницу сведений.

7. Пора обновить наш сайт

Новая страница создана, теперь давайте развернем ее.

На этот раз нам также нужно отправить наш код на GitHub. Давайте сделаем это, используя приведенные ниже команды (команды Git такие же, как указано в шаге 4). Здесь одна команда pull является дополнительной, потому что мы создали файл static.yml для развертывания с помощью github-actions .

Как только это будет сделано, подождите несколько минут, вернитесь к URL-адресу своего веб-сайта, перезагрузите его, и ваши изменения должны появиться!

Вот мой сайт обновлений.

Подведение итогов

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

Как поделиться сгенерированной html страницей?

Как поделиться сгенерированной html страницей на любом сайте, к тому-же я её редактировал средствами браузера, допустим перевёл на другой язык?

Печать в PDF не годится, т.к. удаляет фоновую картинку и прочее. К тому-же поделиться нужно так, чтобы пользователь открыл эту страницу в браузере, а не скачивал её на диск с последующим открытием. Очень давно видел расширение для хрома, которое создаёт копию страницы (допустим содержимое корзины интернет магазина) у себя в облаке и позволяет делиться ссылкой на неё. Однако сейчас не могу его найти.

Публикация вашего веб-сайта

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

Какие существуют варианты?

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

Получение хостинга и доменного имени

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

• Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его. — уникальный адрес по которому люди могут найти ваш веб-сайт, например http://www.mozilla.org или http://www.bbc.co.uk . Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у регистратора доменов.

Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.

Кроме того, вам потребуется File Transfer Protocol (FTP)-клиент (более подробно см. Сколько это стоит: программное обеспечение), чтобы передать файлы веб-сайта на сервер. Существует множество FTP-клиентов, но, как правило, вам нужно войти на веб-сервер, используя данные, предоставленные вашей хостинговой компанией (например: имя пользователя (логин), пароль, имя хоста). Затем FTP-клиент отобразит файлы на вашем компьютере в одной половине окна и файлы на хостинговом сервере в другой половине, так вы сможете перетаскивая копировать файлы с вашего компьютера на сервер и обратно.

Советы по поиску хостингов и доменов

• Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите «веб-хостинг» и «доменные имена». Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его.
• Ваш домашний или рабочий Интернет-провайдер может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов — свяжитесь с ними и узнайте!
• Также есть несколько бесплатных сервисов, таких как Neocities, Blogspot, и WordPress. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов — вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
• Иногда компании предлагают одновременно и хостинг и домен.

Использование онлайн инструментов, таких как GitHub или Google App Engine

Некоторые сервисы позволяют вам опубликовать сайт:

— это «социальная сеть программистов». С помощью неё можно загружать репозитории с вашими разработками для хранения в Git — систему контроля версий. По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому — участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете. — это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите как разместить ваш веб-сайт на Google App Engine чтобы узнать больше информации.

В отличие от других хостингов, эти услуги обычно бесплатны, но взамен вы получите ограниченный набор инструментов.

Использование облачных IDE, таких как CodePen

Существует ряд веб-приложений, эмулирующих среду веб-разработки, позволяющих вводить HTML, CSS и JavaScript, а затем отображать результат этого кода в виде сайта — и все это на одной вкладке браузера. Вообще говоря, эти инструменты достаточно просты, отлично подходят для обучения, хороши для того, чтобы делиться кодом (например, если вы хотите поделиться техникой с коллегой или обратиться за помощью в отладке к коллегам из другого офиса) и бесплатны (основные функции). Они размещают вашу отрендереную страницу на уникальном веб-адресе. Однако, основные функции довольно ограничены, и приложения обычно не предоставляют хостинговое пространство для таких файлов, как изображения и т.д.

Попробуйте один из этих и посмотрите, какой из них вам больше нравится:

Публикация с помощью GitHub

А теперь, давайте рассмотрим, как опубликовать свой сайт на страницах GitHub. Мы не хотим сказать, что этот метод является единственным и наиболее верным, но это бесплатно, достаточно просто, а также затрагивает определённые навыки, которые точно будут полезны для вашего дальнейшего обучения.

Основная настройка

1. Прежде всего, установите Git на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
2. Далее, создайте аккаунт в GitHub. Это просто и легко.
3. После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
4. Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите New repository.

На этой странице, в поле Repository name, введите username.github.io, где username это ваше имя пользователя. Так, например, наш друг valerii15298 введёт valerii15298.github.io.

Нажмите Create repository и вы окажетесь на следующей странице:

Загрузка ваших файлов на GitHub

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

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

У всех операционных систем есть командная строка:

• Windows: Командная строка. Чтобы открыть её нажмите клавишу Windows, затем введите Командная строка в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
• OS X: Terminal можно найти в Приложения > Утилиты.
• Linux: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите Терминал в панели приложений или меню.

Сначала это может показаться немного страшным, но не волнуйтесь — вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.

Укажите в командной строке каталог test-site (или другое название каталога, содержащего ваш сайт). Для этого используйте команду cd (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием test-site на рабочем столе:

Как поделиться кодом многостраничного сайта

Публикация страницы в интернете

В прошлых советах я рассказал, как с нуля сделать простую веб‑страницу с базовым оформлением. Сегодня расскажу, как загрузить и опубликовать страницу в интернете, чтобы её могли увидеть другие люди.

Предположим, что в конце последнего совета у нас получилась такая страница‑визитка — файл index.html с разметкой и стилями:

Как страница попадает в интернет

Страницу можно открыть на своём компьютере, если перетянуть ХТМЛ ‑файл в браузер.

Чтобы другие люди могли открыть страницу, нужно, чтобы они так же могли обратиться к какому‑то компьютеру и «перетянуть» файл оттуда себе в браузер. Такой компьютер называется сервером.

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

Большинство сайтов живут на арендованных серверах. Позволить собственные сервера и инфраструктуру могут немногие компании

Проще и надёжнее арендовать готовый настроенный сервер и загрузить туда страницу.

Большинство сайтов живут на арендованных серверах. Позволить собственные сервера и инфраструктуру могут немногие компании

Аренда сервера

Услугу по аренде сервера называют хостингом. Видов хостингов много, они отличаются ценами и специализацией: кто‑то сдаёт простые сервера для несложных сайтов, а кто‑то предлагает мощные серверные кластеры для огромных проектов.

Для размещения нашей страницы подойдёт самый простой хостинг. Стоит выбрать что‑то недорогое, без переплаты за избыточные мощности и с удобным понятным интерфейсом.

Бывают и бесплатные хостинги, но с ними нужно быть осторожнее. Обычно бесплатность компенсируется низкой надёжностью и встроенной рекламой сомнительного содержания. Хороший бесплатный вариант — это Гитхаб Пейджс, но разобраться с ним может быть сложнее, чем с обычными хостингами.

Популярные и зарекомендовавшие себя в рунете хостинги — Рег.ру, Таймвеб и Бегет.

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

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

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

Сначала регистрируемся, ищем в меню «Виртуальный хостинг», выбираем самый простой тариф:

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

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

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

На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф

В разделе «Сайты» добавляем сайт. Сайт в терминах хостинга — это, условно, выделенное в памяти место с файлами, данными и уникальным адресом. Адрес сайта называют доменом и на этом шаге он может выглядеть сложно и непонятно, чуть позже мы приведём его в порядок.

На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф

В Таймвебе первый сайт создаётся сам при регистрации, ничего добавлять не надо:

Наконец, в разделе «Файловый менеджер» загрузим файл нашей страницы в папку сайта.

Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу

В зависимости от хостинга, названия папок для загрузки файла могут быть public_html или www . Эти папки могут находиться сразу в файловом менеджере или в папке с названием сайта. Если в нужной папке уже лежит файл с названием index, его нужно удалить.

Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу

Всё. Сайт уже доступен в интернете, но пока его адрес сложный и неудобный. Разберёмся, как сделать адрес удобным и красивым.

Адрес сайта

На один сайт может вести сколько угодно доменов

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

На один сайт может вести сколько угодно доменов

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

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

Цена аренды зависит от доменной зоны — текста после точки в адресе. Адрес в распространённой русской зоне .ru обойдётся дешевле, чем в более солидной коммерческой зоне .com и гораздо дешевле, чем в экстравагантной зоне .xxx .

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

Домены удобно арендовать у той же компании, что и хостинг. В Таймвебе купить домен можно во вкладке «Домены и поддомены», кнопкой «Зарегистрировать домен»:

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

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

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

Когда домен подобран и оплачен, его привязывают к сайту через раздел «Сайты» в панели управления. Вскоре после привязки, сайт начнёт открываться по нужному домену.

Сайт на хостинге можно изменять и обновлять. Например, изменить главную страницу и загрузить её новую версию, или добавить больше страниц. В рамках тарифа можно добавлять новые сайты, покупать и привязывать больше доменов. Только не забывайте вовремя продлевать аренду хостинга и доменов, чтобы всё работало без перебоев.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.