Створення власного веб-сайту безкоштовно: покрокова інструкція
Розробка веб-сайту часто вимагає значних фінансових вкладень. Вартість може включати реєстрацію домену, хостинг, розробку, а також SSL-шифрування. Звучить дорого, чи не так?
Але що, якщо я скажу вам, що існує спосіб створити абсолютно безкоштовний веб-сайт, включно з унікальним доменним іменем, безстроковим хостингом та SSL-захистом? Так, це можливо!
Сьогодні веб-сайт – це не просто розкіш, а необхідність, яка сприяє вашому зростанню як професіонала чи особистості. Наявність власного веб-ресурсу може відкрити нові горизонти.
Зазвичай, кожен етап створення сайту, від реєстрації доменного імені до забезпечення безпечного з’єднання, вимагає певних витрат. І, на жаль, деякі з них можуть бути регулярними.
Проте, якщо ви студент, у вас є чудова можливість обійти ці витрати. Чи знали ви, що можете скористатися безкоштовними інструментами для створення та розміщення свого веб-сайту?
Можливо, ви вже чули про GitHub Pages. Цей сервіс, доступний кожному користувачеві GitHub, дозволяє безкоштовно створити та розмістити веб-сайт. Однак, стандартні доменні імена на GitHub Pages закінчуються на “github.io”, що не завжди виглядає професійно.
Що таке GitHub Student Developer Pack?
Навряд чи хтось сприйматиме ваш веб-ресурс всерйоз, якщо ваше доменне ім’я надто довге або незвичне. Але не хвилюйтесь, наша мета – показати вам, як отримати власний домен безкоштовно.
GitHub надає студентам унікальну можливість скористатися пакетом інструментів під назвою GitHub Student Developer Pack. Він включає професійні підписки та знижки на різноманітні популярні сервіси, серед яких Canva, Namecheap, Microsoft Azure, Discord, Name.com, StreamYard та багато інших.
У цій інструкції ми скористаємося Namecheap для реєстрації безкоштовного домену та GitHub Pages для хостингу. Ми також навчимося створювати та завантажувати HTML, CSS і JavaScript файли на GitHub Pages та активуємо SSL-шифрування для нашого сайту. Але спочатку нам потрібно зареєструватися у Student Developer Pack.
Як подати заявку на GitHub Student Developer Pack?
Щоб отримати доступ до Student Developer Pack, вам знадобиться студентська електронна адреса, надана вашим навчальним закладом. Зазвичай, вона закінчується на доменне ім’я вашого університету, наприклад, [email protected]. Існують й інші способи реєстрації, але вони, як правило, займають більше часу.
Якщо у вас є студентська пошта, виконайте наступні кроки:
Крок 1: Перейдіть на офіційний сайт GitHub Education та натисніть “Увійти”.
Якщо ви вже зареєстровані, увійдіть, а якщо ні, створіть новий обліковий запис, виконавши наступні кроки.
Крок 2: Зареєструйтеся, використовуючи свою студентську електронну адресу.
Крок 3: На запитання про ваш академічний статус, оберіть “Студент”.
Крок 4: Введіть дані про ваш навчальний заклад та мету використання GitHub.
Крок 5: Надішліть заявку.
Після схвалення вашої заявки GitHub надішле вам підтвердження на електронну пошту. Обробка зазвичай займає декілька днів.
Як подати заявку на пакет GitHub Student Developer Pack без електронної пошти студента?
GitHub також надає можливість подати заявку за допомогою студентського квитка або іншого документу, що підтверджує ваше навчання. Однак цей процес може зайняти більше часу і мати вищий відсоток відмов. Якщо ви вирішили скористатися цим методом, виконайте наступні кроки:
Крок 1: Створіть обліковий запис на GitHub, використовуючи особисту електронну адресу.
Крок 2: Завантажте підтвердження вашого академічного статусу (студентський квиток).
Крок 3: Введіть необхідні дані, такі як назву навчального закладу та цілі використання GitHub.
Крок 4: Надішліть заявку.
Реєстрація власного домену через Namecheap
Тепер, припустимо, що у вас вже є обліковий запис GitHub Education. Наступний крок – реєстрація доменного імені на Namecheap. Ось як це зробити:
Крок 1: Увійдіть в GitHub Education та перейдіть до розділу “Переваги”.
Ви побачите розділи з веб-розробкою та віртуальними подіями.
Крок 2: Знайдіть Namecheap у розділі Virtual Event Kit.
GitHub надає можливість безкоштовної реєстрації домену .me терміном на 1 рік. Для цього натисніть “Отримати доступ”.
Крок 3: Надайте Namecheap доступ до вашого облікового запису GitHub, а потім підтвердіть, що ваш студентський пакет перевірено.
Крок 4: Знайдіть потрібний домен та перевірте його доступність.
Якщо домен вільний, ви зможете придбати його безкоштовно.
Крок 5: Оформіть замовлення, використовуючи свою електронну адресу GitHub Education та оберіть GitHub Pages як метод хостингу.
Після успішної реєстрації домену Namecheap автоматично створить репозиторій у вашому обліковому записі GitHub. Цей репозиторій буде порожнім, за винятком файлу README.md.
Ви можете знайти цей репозиторій у розділі “Ваші репозиторії” на GitHub. GitHub Pages не пропонує готових інструментів для створення веб-сайту, тому вам доведеться розробити його власноруч.
Як створити безкоштовний веб-сайт та розмістити його на GitHub Pages?
Вам потрібно створити файли HTML, CSS та JavaScript для вашого веб-сайту. Якщо ви знайомі з веб-розробкою, ви можете завантажити готові файли на свій репозиторій GitHub.
Якщо ви новачок, не хвилюйтеся! Ми допоможемо вам створити базовий веб-сайт на HTML:
Крок 1: Перейдіть на 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-файлів залежить від ваших уподобань. Ось приклад того, як я налаштував шаблон “Massively” від HTML5 UP:
Зміна тегів Title і Paragraph
Я змінив тег заголовка (title) на “Samyak Goswami | Tech Content Writer”, що відповідає тематиці мого портфоліо.
Далі я змінив заголовок (H1) на “Портфоліо Сам’яка” та текст в абзацах на “Вітрина моїх проектів та моїх здібностей”.
У розділі навігації (Nav) я залишив одну кнопку, змінивши її текст на “Мої статті”.
Зміна посилань та іконок соціальних мереж
Я залишив лише Instagram та LinkedIn, додавши посилання на свої профілі.
Зміна вмісту головної сторінки
Я змінив заголовок H2 на “Мене звати Сам’як Ґосвамі” та текст в абзаці на “Я технічний ентузіаст…”.
Далі я додав посилання на свої статті у розділі “Публікації”, змінив їх заголовки та описи.
Додавання зображень
Щоб додати власні зображення, я замінив стандартні файли у папці “Зображення”.
Ви також можете змінити назви файлів, але тоді вам доведеться змінити їх і в HTML коді.
Ось моє портфоліо: samyakgoswami.me.
Завантаження коду сайту на GitHub Pages
Тепер настав час опублікувати ваш веб-сайт. Ось як це зробити:
Крок 1: Увійдіть у свій обліковий запис GitHub та перейдіть до “Мої сховища”.
Крок 2: Знайдіть репозиторій з назвою your_username.github.io.
Крок 3: Завантажте файли у цей репозиторій.
Крок 4: Перетягніть всі файли та папки у сховище.
Після завантаження зафіксуйте зміни.
Крок 5: Перейдіть до Налаштування > Сторінки GitHub. Там має бути повідомлення про те, що ваш сайт опубліковано.
Як увімкнути SSL-шифрування на GitHub Pages?
HTTPS забезпечує безпечне з’єднання між користувачем та вашим веб-сайтом. GitHub Pages пропонує безкоштовне шифрування HTTPS. Ось як його увімкнути:
Перейдіть до розділу “Сторінки” у вашому репозиторії та увімкніть “Застосувати HTTPS”.
Якщо опція неактивна, зробіть наступне:
Крок 1: Увійдіть у свій обліковий запис Namecheap і перейдіть до розділу “Список доменів”.
Крок 2: Перейдіть до “Керування доменом”, а потім до розділу “Розширений DNS”.
Додайте 4 записи A з хостом “@” та IP-адресами “185.199.108.153”, “185.199.109.153”, “185.199.110.153” та “185.199.111.153”. Видаліть попередні записи A.
Крок 3: Додайте запис CNAME з Host як “www” та Value як “your_username.github.io”. Видаліть попередні записи CNAME.
Крок 4: Поверніться до GitHub Pages та увімкніть “Застосувати HTTPS”.
Висновок 👈
GitHub надає студентам чудову можливість створити та керувати безкоштовним веб-сайтом. Хоча ви не можете використовувати GitHub Pages для ресурсів з великим трафіком, він чудово підійде для невеликого статичного сайту. Безкоштовний домен, хостинг та SSL-шифрування – роблять його ще привабливішим.
Прочитайте статтю про те, як вибрати веб-хостинг для вашого нового веб-сайту.
Також, посилання на інструменти, які допоможуть вам відстежувати швидкість вашого сайту.