Створення веб-сайту – серйозна інвестиція; ви повинні платити за кожен крок створення веб-сайту.
Хочете створити безкоштовний веб-сайт для особистого чи професійного розвитку? Ось спосіб абсолютно безкоштовно розробити свій наступний веб-сайт із власним доменним іменем, довічним безкоштовним хостингом і шифруванням SSL. Вау! Що ще ви можете попросити?
Зрозуміло, що наявність веб-сайту значно підвищує ваші показники зростання, і сьогодні це більше інвестиція, ніж розкіш. Це стосується не лише компаній, але й окремі особи можуть отримати значну користь завдяки особистому веб-сайту.
Незалежно від того, реєструєте доменне ім’я, розміщуєте вміст свого веб-сайту, створюєте веб-сайт або вмикаєте шифрування SSL, ви повинні бути готові спорожнити свої кишені. Крім того, деякі з цих витрат повторюються і тривають вічно.
Що, якби я сказав вам, що ви можете створити безкоштовний веб-сайт, виконуючи всі вищезазначені найважливіші кроки зі створення веб-сайту, і це теж безкоштовно? Як би дивно це не звучало, але ви можете робити все це безкоштовно, якщо ви студент.
Якщо ви знаєте про GitHub, ви можете знати про сторінки GitHub. Користуватися сервісом, який постачається з кожним обліковим записом GitHub, можна безкоштовно. GitHub Pages дозволяє кожному користувачеві створити безкоштовний веб-сайт і розмістити його, але є величезне застереження. Доменні імена цих безкоштовних веб-сайтів по суті закінчуються на github.io, що руйнує професіоналізм вашого веб-сайту.
Що таке GitHub Student Developer Pack?
Менша кількість користувачів сприйме ваш веб-сайт серйозно, а надто довге доменне ім’я ніколи не буде гарною ідеєю. Але привіт! Ми тут не для того, щоб говорити про переваги чи застереження сторінок GitHub. Я пообіцяв спосіб, який дозволить вам створити безкоштовний веб-сайт із власним доменним іменем, і ось як ви можете це зробити.
GitHub пропонує кожному студенту, який навчається на здобуття наукового ступеня чи диплому, фантастичний набір із зручними онлайн-інструментами, відомий як GitHub Student Developer Pack. Пакет включає професійні підписки та вражаючі знижки на такі популярні інструменти, як Canva, Namecheap, Microsoft Azure, Discord, Name.com і StreamYard, серед безлічі інших.
У цій статті ми будемо використовувати Namecheap, щоб зареєструвати безкоштовний власний домен і використовувати сторінки GitHub для розміщення нашого веб-сайту. Потім ми розглянемо способи розробки та завантаження файлів HTML, CSS і JavaScript на сторінки GitHub. Згодом ми також увімкнемо шифрування SSL для веб-сайту, але перш за все нам потрібно зареєструватися для пакета розробників для студентів.
Як подати заявку на 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 і перейдіть до розділу «Переваги».
Ви повинні побачити набір веб-розробників і набір віртуальних подій.
Крок 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?
Як згадувалося вище, вам потрібно буде створити всі файли HTML, CSS і JavaScript, пов’язані з вашим веб-сайтом. Якщо ви захоплюєтеся веб-розробкою та знаєте, як кодувати, ви можете завантажити свої файли у свій репозиторій GitHub і запустити свій веб-сайт. Ви можете прокрутити до розділу цієї статті, який стосується завантаження коду веб-сайту на сторінки GitHub.
Але якщо ви мало або зовсім не знаєте про веб-розробку, ми допоможемо вам. Ви можете скористатися наведеними нижче кроками та створити власний веб-сайт за допомогою базового HTML:
Крок 1: Перейдіть до HTML5 ВГОРУ і перейдіть до дизайну веб-сайту, який вам подобається. Ви можете вибрати будь-яку іншу готову тему з будь-якої платформи. Тут я вибрав «Massively» від HTML5 UP, але ви можете завантажити та налаштувати будь-який дизайн веб-сайту на свій вибір.
Крок 2. Розпакуйте завантажений zip-файл вашого улюбленого дизайну веб-сайту.
Ви повинні побачити файли з іменами index.html і generic.html, а також папки, як-от активи та зображення, у розпакованій папці.
Крок 3: Тепер відкрийте видобуті файли за допомогою коду Visual Studio та виберіть файл index.html.
Крок 4. Завантажте та встановіть розширення «Live Server» у Visual Studio Code, якщо у вас його ще немає.
Крок 5: Виберіть файл index.html, клацніть правою кнопкою миші та виберіть опцію «Відкрити в Live Server». Ця опція дозволяє візуалізувати зміни у файлі HTML у вашому браузері в реальному часі.
Як налаштувати дизайн свого сайту?
Я не буду називати цей процес «Кроками» налаштування вашого веб-сайту. Налаштування файлів HTML повністю залежить від ваших уподобань, але ось як я налаштував дизайн «Massively» з HTML5 UP і перетворив його на портфоліо. Ви можете черпати натхнення з цього або повністю налаштувати свій веб-сайт самостійно. Вибір за вами!
Змінення тегів Title і Paragraph
Починаючи процес налаштування, я змінив тег заголовка на «Масово». Тег заголовка вашого HTML-файлу визначає його назву під час відкриття на вкладці браузера. Назва за умовчанням для Massively має бути «Massively by HTML5 UP», і я рекомендую змінити її на те, що нагадує ваш веб-сайт.
Я змінив тег title на «Samyak Goswami | Tech Content Writer», оскільки він ідеально підходив для мого портфоліо. Далі я змінив вступний розділ веб-сайту, де було написано: «Це масово» (міститься в тезі H1) і зробив його «Портфоліо Сам’яка» зі зрозумілих причин. Згодом я змінив текст у тегах абзаців на «Вітрина моїх проектів і моїх здібностей».
Перейшовши до розділу Навігація (Nav) у файлі індексу, я пропустив дві з трьох навігаційних кнопок, які містяться в тезі List. Я хотів створити односторінковий веб-сайт із усіма деталями на одній сторінці, але ви можете змінити кількість навігаційних кнопок відповідно до свого вибору.
Пізніше я змінив текст «Це масово» на кнопці навігації на «Мої статті».
Змінення посилань і значків соціальних мереж
Ви також повинні бачити різні піктограми соціальних мереж на живому сервері, як-от Twitter, Facebook, Instagram і GitHub. Я вирішив опустити Twitter і Facebook і залишити Instagram і LinkedIn для свого випадку використання.
Ви можете змінити піктограми соціальних медіа та їхні посилання, перейшовши до розділу «Навігація» (навігація) і прокрутивши до списку тегів із Twitter, Instagram тощо.
Зверніть увагу, що до цих значків соціальних мереж немає посилань, оскільки тег href залишається порожнім. Ви можете додати посилання до тегу href, замінивши «#» на бажане посилання.
Змінення вмісту домашньої сторінки
Спочатку я змінив тег H2 і зробив його «Мене звуть Сам’як Ґосвамі», а потім змінив тег «Абзац» на «Я технічний ентузіаст….». Я б запропонував вам змінити тег H2 на щось, що відповідає вмісту вашої домашньої сторінки та тегу абзацу, який це пояснює.
Зараз ми придумуємо найважливішу частину цього налаштування; зміна вмісту плиток статей.
Щоб зробити це, перейдіть до розділу «Публікації» у файлі індексу, і ви побачите кілька фрагментів коду, що містяться в тегах статті. Ви можете додати посилання на свої історії, змінивши розділ href, як ми робили під час додавання посилань на значки соціальних мереж.
Пізніше ви можете змінити назву статей, змінивши вміст у тегах H2. Ви також можете додати опис до своїх статей за допомогою тегу абзацу.
Повторіть процес для кожної статті, додавши посилання, змінивши назви та додавши опис до всіх своїх статей.
Додавання зображень на ваші веб-сайти
Ви, мабуть, помітили, що попередній перегляд дуже відрізняється від зображень на веб-сайті HTML5 UP. Це пов’язано з плоскими та м’якими фотографіями у настроюваному файлі. Давайте оживимо наш веб-сайт, додавши на нього власні зображення.
Оригінальні зображення
Для цього перейдіть до папки, куди ви раніше розпакували zip-файл «Massively». Відкрийте розпаковану папку та перейдіть до папки «Зображення». Ви повинні побачити різні зображення з назвами bg, pic01, pic02 тощо. Це зображення, пов’язані з нашими статтями в тезі Стаття.
Ви можете додати власні зображення та змінити файл індексу за допомогою імен цих зображень або додати зображення та назвати їх так само, як зображення за замовчуванням. Надання зображенням ідентичних імен позбавляє нас від модифікації коду та згодом багато часу.
Змінені зображення
Я пропоную вам перевірити та змінити інші розділи вашого веб-сайту, які не є важливими. Ось портфоліо, яке я створив за допомогою згаданих вище кроків: samyakgoswami.me.
Як завантажити код свого веб-сайту на сторінки GitHub?
Після того, як нарешті створили код і розробили свій веб-сайт, настав час завантажити його на сторінки GitHub і опублікувати в Інтернеті.
Ось як ви можете завантажити свій веб-сайт на GitHub Pages:
Крок 1: увійдіть у свій обліковий запис GitHub і перейдіть до розділу «Мої сховища».
Крок 2. Ви повинні побачити репозиторій під назвою your_username.github.io. Зайдіть у це сховище.
Крок 3. Ви повинні побачити опцію створити власний файл або завантажити файли до репозиторію GitHub.
Крок 4: Виберіть усі п’ять файлів і папок; активи, зображення, елементи, загальні, індекси та перетягніть їх у сховище.
Після завантаження файлів зафіксуйте код і зачекайте, поки GitHub обробить ваші файли.
Крок 5: перейдіть до Налаштування> Сторінки GitHub, щоб переглянути статус свого веб-сайту. Ви повинні побачити підказку «Ваш веб-сайт опубліковано у вашому_власному_домене».
Тепер ви можете перейти на свою веб-адресу та перевірити веб-сайт самостійно. Пам’ятайте, що веб-сайту може знадобитися деякий час, перш ніж його запрацює.
Як увімкнути шифрування SSL на сторінках GitHub?
HTTP є небезпечним способом керування запитами користувачів на вашому веб-сайті. Будь-хто зі злими намірами та добрими технічними знаннями може перехопити взаємодію між користувачем і вашим веб-сайтом. З іншого боку, HTTPS надає всім вашим відвідувачам набагато безпечніший сеанс перегляду. Сторінки GitHub пропонують безкоштовне шифрування HTTPS, і ось як ви можете ним скористатися:
Перейдіть до розділу Сторінки в сховищі.
У кінці вікна ви повинні побачити опцію «Застосувати HTTPS». Шифрування SSL має запрацювати, щойно ви встановите прапорець Enforce HTTPS.
Якщо ви виявите, що параметр «Застосувати 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 із Host як «www» і Value як ім’я користувача GitHub (крапка) github (крапка) io.
Видаліть попередні записи CNAME. Зрештою, у ваших налаштуваннях DNS має бути 4 записи A та 1 запис CNAME.
Крок 4. Тепер перейдіть на сторінки GitHub у розділі «Налаштування». Параметр Enforce HTTPS тепер має бути доступним для вашого домену.
Підведення підсумків 👈
GitHub дає фантастичну можливість кожному студенту створити безкоштовний веб-сайт і керувати ним. Хоча ви не можете використовувати сторінки GitHub для розміщення великого трафіку, він встановлює всі прапорці для невеликого статичного веб-сайту. Безкоштовне спеціальне доменне ім’я, хостинг і шифрування SSL роблять його ще чудовішим.
Тепер ви можете прочитати «Як вибрати веб-хост для вашого нового веб-сайту».
Ось кілька інструментів моніторингу швидкості сторінки, які сповіщатимуть вас, коли ваш веб-сайт не працює.