Як створити сайт? Які потрібні знання та інструменти?

Головна » Як створити сайт? Які потрібні знання та інструменти?

Складність: Легко

Будь який ресурс в мережі інтернет використовує як мінімум одну технологію для форматування контенту. В загальному вигляді сайт можна розділити на верстку, фронтенд та бекенд. Однак першочерговими будуть домен та хостинг.

Домен або доменне ім’я коротка красива назва сайту, або адреса сайту. Це просто текстовий запис, який є точкою входу відвідувачів на сайт.

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

Розмітка це інструменти які слугують для вказівок браузеру що, де, та як саме потрібно відобразити.

Фронтенд це частина функціоналу яка виконуєтся на стороні користувача, тобто прямо в браузері відвідувача, зазвичай це допоміжний функціонал, який слугує для спрощення взаємодії користувача з сайтом.

Бекенд це частина яка виконуєтся на сервері, зазвичай на бекенд покладають всю бізнес-логіку, тобто той функціонал який і є продуктом. Тобто всі розрахунки, комунікація з сторонніми сервісами (3rd part services), реєстрація та авторизація користоувачів, прийняття оплат, тощо. Дуже часто бекенд виконує функції шаблонізатора, тобто дозволяє розділити розмітку на маленькі частинки і вбудовувати ці частинки у відповідні місця. Використання підходу шаблону дозволяє створити декілька загальних блоків, та перевикористовувати їх. Наприклад, можна ствоирит меню, в окремому файлі, а на всіх сторінках просто підключити цей файл. Це спросить редагування та підтримку, якщо на сайті десять сторінок то з шаблонізатором не треба змінювати меню на всіх десяти сторінках, достатньо змінити меню лише у файлі з меню.

Домен

Доменне ім’я зазвичай платне, однак, є специфічні доменні імена, наприклад прив’язані до області, і такі доменні імена можуть бути безкоштовними, однак реєстратор має право запитати документи які можуть затвердити належність особи або організації до регіону або області.

Хостинг

Як і у випадку з доменним ім’ям хостинг це платна послуга, але є безкоштовні хостинги, зазвичай вони надають обмежені можливості (наприклад досить мало місця на диску) або поблікують свою рекламу (не завджи автоматично, це може бути код який власник сайту зобов’язан встановити власноруч). Або є платні хостинги які надають безкоштовні послуги лише повним групам людей або установ.

Розмітка

Створити розмітку контенту можна за допомогою таких інструментів як:

HTML;
XHTML (розширенний варіант HTML);
XML (станом на 2023 рік технологія досить не популярна, однак ще можна зустріти багато місць використання).

В більшості випадків можна зустріти перші два варіанти, як в чистому вигляді, так і у змішанному, один з одним, вигляді. Розмічена сторінка зазвичай виглядає як сайт двохтисячних років, однак цього вже достатньо для певної стилізації тексту, формування блоків, об’єднання блоків у сітку, яку можна наповнювати корисним контентом.

Стилі

Для того щоб додати більш сучасного вигляду використовуются каскадні таблиці стилів CSS (Cascading Style Sheets). CSS виступає як фарба для вже існуючого каркасу створенного за допомогою HTML. CSS використовуєтся не лише для встановлення кольорів, або позиціонування блоків. Завдяки CSS можна робити такі речі як:

встановлювати чи буде елемент відображений на сторінці;
відступи блоків;
переходи (наприклад поява кнопки, зображення або блоку);
анімації;
тіні;
еффекти (наприклад наведення миші на елемент);
робити адаптивний (респонсивний) дизайн;
та багато іншого.

Не зважаючи на досить великий перелік того що може надати нам CSS він все ще не є мовою програмування. Правильніше за все сприймати стилі як інструмент для налаштування того що зроблено за допомогою HTML.

CSS може бути як написанний власноруч так і використанний з відкритих бібліотек, накшталт Bootstrap, Foundation, тощо. Також можливий варіант генерації CSS стилів за допомогою препроцессорів таких як SASS або SCSS.

Front-end

Для створення динамічного функціоналу використовують JavaScript (не те саме що Java). JavaScript є повноцінною мовою програмування, яка виконуєтся браузером. В чистому вигляді використовуєтся досить не часто, це пов’язано з певною складністю мови. Однак станом на 2023 рік має чи не найбільшу кількість бібліотек або фреймворків, до яких можна знайти тисячі, якщо не мільйони плагінів та готових рішень.

Використовуючи HTML + CSS + JavaScript можна створити найпростішу сторінку, яка може містити якийсь контент та інформацію. Цих знань буде достатньо щоб створити лендінг пейдж, або простий сайт-візитку.

Back-end

Для створення середніх та великих сайтів є сенс використовувати серверні мови програмування. Навіть якщо нема потреби в реєстрації/авторизації, розрахунках або комунікації зі сторонніми сервісами функції шаблонізації будуть завжди в нагоді коли на сайті більш ніж одна сторінка. Для бекенду можуть бути використані такі мови програмування як:

PHP;
ASP.NET (станом на 2023 рік актуальним є ASP.NET MVC Core);
Node JS;
Ruby (зазвичай використовуєтся Ruby on rails);
Python;
та багато інших

Зазвичай, мови програмування не використовують в базовому вигляді (як то кажуть, з коробки). Це пов’язано з тим що мова програмування пропонує лише інструменти для створення чогось більш конкретного. Є досить велика кількість проектів з відкритим похідним кодом (безкоштовних проектів) які створені на певній мові програмування та вже реалізують той чи інший функціонал, це фреймворки (Framework) та так звані системи керування контентом або простіше кажучи CMS (Content Management system). Головна відмінність фреймворків від CMS це рівень абстракції. Тобто CMS (ЦМС) надає готовий функціонал для створення, редагування, та керування сторінками, можливо адміністраторами, користувачами тощо. Фреймворк в свою чергу надає просунутий функціонал для написання власної системи.

CMS

Сучасні CMS надають можливість для простого вертання сторінок завдяки візуальним білдерам. Візуальний білдер це модуль (плагін, або розширення) яктй надає змогу створювати сторінки уникаючи написання HTML та CSS в ручну, все що потрібно це вибрати компонент на палітрі, та просто налаштувати його, при цьому одразу буде видно як цей компонент буде виглядати. Такий підхід спрощуе процес створення сторінок, однак HTML та CSS таких сторінок досить далекий від ідеалу. Також сучасні CMS надають можливість розширювати функціонал не змінюючи код, це можливо за допомогою розширенять (модулів, плагинів, тощо) які створюются сторонніми розробниками.

Framework

Сучасні фреймворки надають перш за все базову структуру та просунуті інструменти для створення проекту. Зазвичай фреймворки мають певні інструменти для верстання, інтеграцію з фронтенд бібліотеками або фронтенд фреймворками для пришвидшення розробки, але ніхто не змушує використовувати ці інструменти. Фреймворки надають можлифість змінювати майже будь що, також до кожного фреймворку зазвичай є безліч готових рішень у вигляді пакетів, однак на відміну від CMS ці пакети необхідно інтегрувати у фреймворк використовуючт код, тобто “встановити в 1 клік” не вийде.

Чи є більш просте рішення?

Якщо коротко то є. Це так звані конструктори сайтів, системи які мають візуальний конструктор, певну подобу системи керування контентом, іноді навіть готові маршрути опрацювання запитів від відвідувачів. Це системи такі як

WIX;
Tilda;
Webflow;
тощо.

Не зважаючи на досить привабливу пропозицію є сенс подумати тричі, перед тим як почати використовувати щось подібне, і причин одразу декілька:

такі системи це системи від сторонніх розробників, з усіма наслідками. Тобто якщо Вам необходно додати якийсь компонент якого нема в палітрі це будуть ваші особисті проблеми. Іноді звісно технічна підтримка може запропонувати заплатити “ще трохи” зоб вони це зробили, однак зазвичай технічна підтримка скаже що такого функціоналу нема і це все
зазвичай найприємніші та найбажаніші функції платні. Тобто створити сторінку – безкоштовно, але якщо є потреба використовувати якісь компоненти – сплатіть більш просунутий пакет;
зазвичай щоб використовувати свій домен треба платити щомісячну плату, тут взагалі краще порахувати, часто купити всі функції на таких конструкторах буде коштуввати дорожче ніж купити домен + хостинг + встановити туди будь яку CMS та мати повний контроль над своїм проектом;
дуже велика обмеженність компонентів які доступні;
штучні обмеження пов’язані з міграцією з такого сервіса на свій ресурс. Зазвичай це прописано у всіляких Terms & Conditions та Privacy Policy. Обмеження можуть бути пов’язані бідь з чим, наприклад якщо була змога відвідувачам реєструватись, такий сервіс навряд чи віддасть данні відвідувачів, посилаючись на політику приватності, тобто ваші клієнти можуть стати вже не вашими. Це абстрактний приклад, однак для них це втрата джерела прибутку
такі сервіси зазвичай саморекламуються на створенних на них ресурсах, і відлючення реклами сервісу зазвичай платне;
зазвичай є обмеження в плані SEO це означає що навіть якщо на безкоштовному тарифному плані є поля для заповнення title та description (що вже звучить як фантастика, такі речі зазвичай входять до платного плану) то СЕО не обмужуєтся тільки цими полями, і такі речі як оптимізація завантаження, або інтеграція мікророзмітки є або складно досягненними, або взагалі неможливими. А якщо сайт не можна знайти в пошуку то сенсу від такого сайту вкрай мало, хіба що створити для якоїсь дипломної роботи.