Как создать бесплатный веб-сайт с собственным доменным именем, хостингом и шифрованием SSL?

Создание веб-сайта — это серьезное вложение; Вы должны платить за каждый шаг создания веб-сайта.

Хотите создать бесплатный сайт для личного или профессионального роста? Вот способ создать свой следующий веб-сайт с собственным доменным именем, бесплатным пожизненным хостингом и абсолютно бесплатным шифрованием SSL. Вау! Что еще вы могли бы попросить?

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

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

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

Если вы знаете о GitHub, возможно, вы знаете о GitHub Pages. Это бесплатный сервис, который поставляется с каждой учетной записью GitHub. GitHub Pages позволяет каждому пользователю создать бесплатный веб-сайт и разместить его, но есть одно важное предостережение. Доменные имена этих бесплатных веб-сайтов по существу заканчиваются на github.io, что разрушает профессионализм вашего веб-сайта.

Что такое пакет разработчика для студентов GitHub?

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

GitHub предлагает фантастический набор удобных онлайн-инструментов для каждого студента, зачисленного на курс для получения степени или диплома, известный как GitHub Student Developer Pack. Пакет включает в себя профессиональные подписки и невероятные скидки на популярные инструменты, такие как Canva, Namecheap, Microsoft Azure, Discord, Name.com и StreamYard, среди множества других.

В этой статье мы будем использовать Namecheap для регистрации бесплатного пользовательского домена и использовать страницы GitHub для размещения нашего веб-сайта. Затем мы рассмотрим способы разработки и загрузки файлов HTML, CSS и JavaScript на страницы GitHub. Со временем мы также включим шифрование SSL для веб-сайта, но в первую очередь нам необходимо зарегистрироваться для получения пакета Student Developer Pack.

Как подать заявку на GitHub Student Developer Pack?

Процесс регистрации в пакете Student Developer Pack сводится к тому, чтобы иметь адрес электронной почты студента, предоставленный университетом. Адрес электронной почты учащегося обычно заканчивается доменным именем вашего университета, например, [email protected] Существуют и другие способы регистрации для получения пакета, но они требуют гораздо большего времени проверки, чем использование электронной почты учащегося. Если у вас есть готовый адрес электронной почты учащегося, вот как вы можете зарегистрироваться для получения пакета:

Шаг 1. Перейдите на сайт GitHub для обучения и нажмите «Войти».

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

Нажмите «Создать учетную запись» в окне «Войти».

Шаг 2: Затем зарегистрируйтесь, используя адрес электронной почты учащегося, и создайте учетную запись.

Шаг 3: При появлении запроса «Что лучше всего описывает ваш академический статус?» обязательно выберите «Студент».

Шаг 4: Теперь заполните необходимые поля информацией о названии вашей школы и цели использования GitHub.

Шаг 5 : Наконец, отправьте заявку, используя опцию «Отправить информацию».

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

Как подать заявку на GitHub Student Developer Pack без электронной почты студента?

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

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

Шаг 2. Теперь загрузите подтверждение своего академического статуса с помощью камеры или загрузите фотографии непосредственно на GitHub с помощью кнопки «Загрузить».

Шаг 3: Затем заполните все необходимые данные, такие как название учебного заведения и цель использования GitHub.

Шаг 4: Отправьте заявку.

Как зарегистрировать собственный домен с помощью Namecheap?

Я предполагаю, что ваша учетная запись GitHub Education запущена и работает. Следующие шаги включают использование Namecheap для регистрации вашего бесплатного пользовательского домена и размещения его на страницах GitHub. Выполните следующие действия, чтобы зарегистрировать предпочтительное доменное имя:

Шаг 1. Войдите в свою учетную запись GitHub Education и перейдите в раздел «Преимущества».

Вы должны увидеть Web Dev Kit и Virtual Event Kit.

Шаг 2: Перейдите в Virtual Event Kit и прокрутите вниз, чтобы найти Namecheap.

GitHub предлагает регистрацию доменного имени на 1 год в домене верхнего уровня .me, к которому вы можете получить доступ, нажав на опцию «Получить доступ».

Шаг 3: В следующем окне вам будет предложено авторизовать запрос на подключение от Namecheap к вашей учетной записи GitHub. Авторизуйтесь Namecheap и переходите к следующему шагу.

Вы должны увидеть сообщение «Мы успешно проверили ваш студенческий пакет с GitHub» после успешной авторизации.

Шаг 4: Найдите нужный домен через строку поиска и нажмите «Найти».

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

Шаг 5: Оформите заказ, используя адрес электронной почты GitHub Education, и выберите GitHub Pages в качестве метода хостинга.

После успешной регистрации собственного доменного имени и выбора страниц GitHub в качестве хостинга Namecheap автоматически создаст репозиторий в вашей учетной записи GitHub. Этот репозиторий полностью пуст и содержит только файл README.md.

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

Как создать бесплатный сайт и разместить его на GitHub Pages?

Как упоминалось выше, вам нужно будет создать все файлы HTML, CSS и JavaScript, связанные с вашим сайтом. Если вы занимаетесь веб-разработкой и знаете, как кодировать свой путь, вы можете загрузить свои файлы в свой репозиторий GitHub и запустить свой веб-сайт. Вы можете перейти к разделу этой статьи, посвященному загрузке кода веб-сайта на страницы GitHub.

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

Шаг 1: Перейдите в раздел HTML5 UP и перейдите к понравившемуся дизайну веб-сайта. Вы можете выбрать любую другую готовую тему на любой платформе. Здесь я выбрал «Massively» из HTML5 UP, но вы можете бесплатно загрузить и настроить любой дизайн веб-сайта по своему выбору.

Шаг 2: Извлеките загруженный zip-файл вашего любимого дизайна веб-сайта.

В извлеченной папке вы должны увидеть файлы с именами index.html и generic.html, а также такие папки, как ресурсы и изображения.

Шаг 3: Теперь откройте извлеченные файлы с помощью Visual Studio Code и выберите файл index.html.

Шаг 4: Загрузите и установите расширение «Live Server» в Visual Studio Code, если оно у вас еще не установлено.

Шаг 5: Выберите файл index.html, нажмите правую кнопку мыши и выберите опцию «Открыть на Live Server». Эта опция позволяет визуализировать изменения в HTML-файле в браузере в режиме реального времени.

Как настроить дизайн вашего сайта?

Я не буду называть этот процесс далее «Шагами» по настройке вашего веб-сайта. Настройка файлов HTML полностью зависит от ваших предпочтений, но вот как я настроил дизайн «Massively» из HTML5 UP и преобразовал его в портфолио. Вы можете черпать вдохновение из этого или полностью настроить свой веб-сайт самостоятельно. Выбор за вами!

Изменение тегов заголовка и абзаца

Начав процесс настройки, я изменил тег заголовка «Massively». Тег заголовка вашего HTML-файла будет определять его имя при открытии на вкладке браузера. Заголовок по умолчанию для Massively должен быть «Massively by HTML5 UP», и я рекомендую изменить его на что-то похожее на ваш веб-сайт.

Я изменил заголовок на «Самьяк Госвами | Tech Content Writer», так как он идеально подходил для моего портфолио. Затем я изменил раздел «Введение» на веб-сайте, в котором говорилось: «Это массово» (содержится в теге H1), и сделал его «Портфолио Самьяка» по понятным причинам. Впоследствии я изменил текст ниже в тегах абзаца на «Витрина моих проектов и моих способностей».

Переходя к разделу Навигация (Nav) в индексном файле, я пропустил две из трех кнопок навигации, содержащихся в теге List. Я хотел создать одностраничный веб-сайт со всеми деталями на одной странице, но вы можете изменить количество кнопок навигации по своему выбору.

Позже я изменил текст «Это массово» на кнопке навигации на «Мои статьи».

Изменение ссылок и значков социальных сетей

Вы также должны увидеть различные значки социальных сетей на живом сервере, таких как Twitter, Facebook, Instagram и GitHub. Я решил отказаться от Twitter и Facebook и оставить Instagram и LinkedIn для своего случая.

Вы можете изменить значки социальных сетей и их ссылки, перейдя в раздел «Навигация» (Nav) и прокрутив до списка тегов с Twitter, Instagram и т. д., написанными внутри них.

Обратите внимание, что к этим значкам социальных сетей не прикреплены ссылки, поскольку тег href оставлен пустым. Вы можете добавить ссылки в тег href, заменив «#» на предпочитаемую ссылку.

Изменение содержимого домашней страницы

Сначала я изменил тег H2 на «Меня зовут Самьяк Госвами», а затем изменил тег «Абзац» на «Я технический энтузиаст…». Я бы посоветовал вам изменить тег H2 на что-то, что соответствует содержанию вашей домашней страницы и тегу абзаца, объясняющему это.

Сейчас мы подходим к самой важной части этой настройки; изменение содержимого плиток статей.

Для этого перейдите в раздел «Сообщения» в индексном файле, и вы должны увидеть несколько фрагментов кода, содержащихся в тегах статьи. Вы можете добавить ссылки в свои истории, изменив раздел href, как это сделали мы при добавлении ссылок на значки социальных сетей.

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

Повторите процесс для каждой статьи, добавив ссылки, изменив имена и добавив описание ко всем своим статьям.

Добавление изображений на ваши веб-сайты

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

Для этого перейдите в папку, в которую вы ранее распаковали zip-файл «Massively». Откройте извлеченную папку и перейдите в папку «Изображения». Вы должны увидеть разные изображения с именами bg, pic01, pic02 и так далее. Это изображения, связанные с нашими статьями в теге Article.

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

Я предлагаю вам проверить и изменить другие разделы вашего веб-сайта, которые не важны. Вот портфолио, которое я создал, используя описанные выше шаги: samyakgoswami.me.

Как загрузить код своего сайта на GitHub Pages?

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

Вот как вы можете загрузить свой сайт на страницы GitHub:

Шаг 1: Войдите в свою учетную запись GitHub и перейдите в раздел «Мои репозитории».

Шаг 2: Вы должны увидеть репозиторий с именем your_username.github.io. Зайдите в этот репозиторий.

Шаг 3: Вы должны увидеть возможность создать свой собственный файл или загрузить файлы в репозиторий GitHub.

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

После загрузки файлов зафиксируйте код и подождите, пока GitHub обработает ваши файлы.

Шаг 5: Перейдите в «Настройки»> «Страницы GitHub», чтобы увидеть статус вашего сайта. Вы должны увидеть сообщение «Ваш веб-сайт опубликован в your_custom_domain».

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

Как включить шифрование SSL на страницах GitHub?

HTTP — небезопасный способ управления запросами пользователей на вашем сайте. Любой человек со злым умыслом и хорошими техническими знаниями может перехватить взаимодействие между пользователем и вашим сайтом. С другой стороны, HTTPS обеспечивает всем вашим посетителям гораздо более безопасный сеанс просмотра. GitHub Pages предлагает бесплатное шифрование HTTPS, и вот как вы можете им воспользоваться:

Прокрутите до раздела Страницы в репозитории.

Вы должны увидеть опцию «Enforce HTTPS» в конце окна. Шифрование SSL должно начать действовать, как только вы отметите флажок Enforce HTTPS.

Если вы обнаружите, что опция Enforce HTTPS недоступна для вашего домена, вы можете включить шифрование SSL, выполнив следующие действия:

Шаг 1 : Войдите в свою учетную запись Namecheap и перейдите в раздел «Список доменов».

Шаг 2: Теперь перейдите в раздел «Управление доменом», а затем в раздел «Расширенный DNS».

Вы должны увидеть некоторые существующие записи CNAME и A.

Добавьте следующие записи A с хостом как «@» и IP-адресом как «185.199.108.153». Следующий с именем хоста «@» и IP-адресом «185.199.109.153».

Следуйте за тенденцией, пока у вас не будет 4 записей A до IP-адреса «185.199.111.153».

Удалите все предыдущие записи A.

Шаг 3: Затем добавьте запись CNAME с хостом в виде «www» и значением в качестве вашего имени пользователя GitHub (точка) github (точка) io.

Удалите предыдущие записи CNAME. В конце концов, ваши настройки DNS должны иметь 4 записи A и 1 запись CNAME.

Шаг 4: Теперь перейдите на страницы GitHub в разделе «Настройки». Опция Enforce HTTPS теперь должна быть доступна для вашего домена.

Подводя итоги

GitHub дает фантастическую возможность каждому студенту создать бесплатный веб-сайт и управлять им. Хотя вы не можете использовать GitHub Pages для размещения больших объемов трафика, он ставит все галочки для небольшого статического веб-сайта. Бесплатное пользовательское доменное имя, хостинг и шифрование SSL делают его еще более замечательным.

Теперь вы можете прочитать «Как выбрать веб-хостинг для вашего нового веб-сайта».

Вот несколько инструментов мониторинга скорости страницы, которые уведомят вас, когда ваш сайт выйдет из строя.