Як створити сайт самостійно в 2020 році

Просте покрокове керівництво для початківців. Використовуючи це керівництво ви навчитеся як створити свій сайт, наповнити його контентом і залучати користувачів

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

Головною особливістю являється те, що ви не просто зможете свторити сайт із сучасним дизайном та на професійному рівні швидко і легко, без необхідності вивчення HTML / CSS та PHP-програмування або проходження довгих та дорогих курсів та, що не менш важливо, без використання дорогих конструкторів, а ще і навчитесь основам пошукової оптимізації, та зможете самостійно зробити свій сайт успішним.

Насправді в цьому керівництві ми покажемо як більшість веб-майстрів створюють свої сайти, структурують їх, наповняють контентом та просувають у пошуку.

Якщо у вас виникли труднощі з цим керівництвом (в чому я дуже сумніваюсь), не соромтеся звертатись до мене і я допоможу розібратись.

Готові запустити свій сайт сьогодні? Давайте почнемо…

Як створити сайт за 5 кроків

  1. Визначитись який тип сайту вам потрібен

    візитка, блог, каталог, інформаційний, новинний, рецепти, огляди, лендинг, магазин

  2. Вибрати домен та придбати хостинг

    домен – це адреса вашого сайту в Інтернет,а хостинг – це частина диску на якому зберігаються файли сайту

  3. Встановити систему управління сайтом

    в нашому випадку це WordPress в силу легкості управління та багатства функцій

  4. Налаштувати свій сайт

    назву та опис сайту, зовнішній вигляд, постійні посилання, швидкість завантаження та інше

  5. Створити необхідні сторінки та підготувати їх до заповнення

    створення статичних та динамічних сторінок, відображення їх у меню сайта

Крок 1. Визначитись який тип сайту вам потрібен

З допомогою цього простого покрокового керівництва ви просто справитесь із створенням таких видів сайтів: сайт-візитка, каталог, портфоліо, сайт новин, лендинг, сайт рецептів, сайт оглядів, блог, онлайн магазин та багато іншого.

Глобально існує 2 типи сайтів: комерційні та інформаційні. Тут все просто – комерційні продають щось: послуги, товари, сервіси, а інформаційні розказують про щось. Проте, з будь-якого комерційного запиту можна зробити інформаційни, наприклад, “купити металопластикові вікна” це комерційний запит і сайт що продає вікна, чи то збирає заявки на заміри і встановлення вікон, являється комерційним. Але “як вибрати металопластикові вікна” – це інформаційний запит і сайт що розказує як це зробити частіше всього інформаційний, або ж розділ комерційного – блог, що дозволяє збирати додаткову аудиторію з пошуку.

Отже визначившись який сайт вам потрібен можемо приступити до безпосердьного розбору практичного питання як створити сайт

Крок 2. Вибрати домен та придбати хостинг

Домен – це адреса вашого сайту в інтернеті, а хостинг – місце де сайт “проживає”, тобто це частина віддаленного диску на якому зберігаються файли вашого сайту, та який завжди on-line.

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

Раджу скористатись ось цією вигідною пропозицією 💵. Це надійний хостинг на SSD-дисках та використанням LiteSpeed серверів що вважаються найшвидшим на даний момент варіантом веб-сервера.

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

Ви можете обрати інший хостинг на власний розсуд, але тоді це керівництво буде корисне вам не в повній мірі.

Отже поїхали…

Переходимо на сторінку 🎯 і тиснемо на кнопку GET STARTED навпроти найдоступнішого тарифу по 2,95$ в місяць. Цього тарифу вам вистачить на декілька років.

Те що тут на англійській нехай вас не лякає, нам потрібно лише оформити покупку хостингу, а далі в панелі управління можна виставити яку завгодно мову 🙂

Обираємо доменне ім’я та вводимо його в форму. Обираємо розширення. Краще всього обрати .com, .net чи .org, це міжнародні доменні імена що будуть завжди цінитись та перевірені часом.

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

Оформлення та покупка

Заповняємо всі поля, тут все надзвичайно просто. Обираємо термін на який купуємо хостинг та домен. Найвигідніше брати на 3 роки, бо це коштуватиме всього 106 доларів, а за три роки ваш проект точно виросте для продовження хостингу чи переходу на більш старший план при потребі.

Навпроти Domain Privacy (ID Protect) не забудьте зняти галочку, бо це додаткова платна опція яка вам сильно не потрібна.

Ставимо галочки напроти того, що ми погоджуємось із правилами та тиснемо  COMPLETE ORDER. Відбувається оплата.

Після вдалої оплати вас сповістять по електронній пошті про те що ви вдало оплатили рахунок і можете користуватись хостингом та доменом і створювати свій сайт.

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

Крок 3. Встановити систему управління сайтом

Наразі встановлення WordPress на хостинг зводиться до вибору що встановити, для якого домену і ввести логін та пароль для доступу в адмін-панель сайту.

Отже, приступимо до встановлення WordPress на попередньо придбаний хостинг.

Аккаунт хостингу

Ввійшовши в аккаунт веб-хостингу в меню зліва переходимо врозділ Services-My Services,та тиснемо кнопку Manage Product

Перехід у cPanel

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

Зробимо тут декілька налаштувань і встановимо, власне, систему управління сайтом.

Отже почнемо…

Встановлення ssl-сертифікату

Прокручуємо сторінку до розділу SECURYTI, та знаходимо підрозділ Let’s Encrypt™ SSL і переходимо в цей підрозділ.

Встановлення ssl-сертифікату

На сторінці що відкрилась ми знаходимо Issue a new certificate та наш придбаний домен навпроти якого буде +Issue, тиснемо на це посилання і буде випущено ssl-сертифікат для вашого домену.

Беспосередній випуск ssl

Як тільки ви побачите повідомлення про успішний випуск ssl для вашого домену, можна вернутись до головної сторінки cPanel натиснувши на логотип cPanel в лівому верхньому куті.

І тепер зробимо основне – встановимо WordPress.

Встановлення WordPress

Повертаємось на головну панелі управління хостингом натиснувши cPanel в лівому верхньому куті і прокручуємо сторінку до розділу TMDHOSTING TOOLS, в якому є лише один підпункт TMD WordPress Manager. Переходимо до нього і далі проводимо встановлення WordPress.

У розділі що ми відкрили бачимо що немає ніяких встановлень і синю кнопку INSTALL NEW.

Тиснемо її та заповняємо всі необхідні дані:

  1. Protocol – https://
  2. Domain – обираєтезі списку свій домен
  3. Document Root – лишаєте як є
  4. User Name – вводите логін до панелі керуваннясвоїм сайтом
  5. Site Name – назва сайту
  6. Site Description – короткий опис сайту
  7. Enter a strong password – придумайте надійний пароль для входу в панель керування вашім сайтом.

Та тиснете кнопку INSTALL

Встановлення WordPress

Ось і все. Вітаю, тепер у вас є власний сайт з адресою та захищеним з’єднанням з ним через ssl-сертифікат.

Тепер ви можете ввести в браузері свій домен та побачити як виглядає ваш сайт із встановленною стандартною темою оформлення та без контенту і необхідних налаштувань. Але і це вже щось…

Далі ми приведемо ваш сайт в гарний організований вигляд.

Крок 4. Налаштувати свій сайт

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

Відкриваємо в браузері вкладку де вписуємо адресу вашого сайту в такому вигляді: https://ваш_домен.com/wp-admin, тапотрапляємо на сторінку авторизації. Вводимо логін та пароль, котрий ви придумали та вказали при встановленні WordPress, та котрі я рекомендував вам записати або запам’ятати. Тиснемо Увійти,та потрапляємо в панель управління WordPress.

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

Ось так виглядає панель управління WordPress, або українською це називається Майстерня. Пункти бокової панелі можуть дещо відрізнятись від того, що ви бачите на зображені нижче в залежності від встановлених тем та плагінів. Це не має істотного значення.

Майстерня ВордПресс

Приступимо до налаштування вашого сайту. І почнемо, мабуть, з зовнішнього вигляду сайту, а тоді налаштуємо назву, опис та формат постійних посилань.

Вибір та встановлення теми оформлення

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

Для того, щоб вибрати стиль оформлення свого сайту, потрібно в панелі управління ВордПресс обрати пункт ВиглядТеми

встановлення теми WordPress

Ви побачите в цьому пункті всі встановленні теми, та ту яка активована на даний момент.

Вгорі є кнопка Додати нову, ось її і тиснемо. Вашій увазі тепер пердставлений весь каталог безкоштовних тем оформлення всієї спільноти WordPress. Тут можна знайти безкоштовні рішення для вашого сайту. Доступний не скаладний фільтр: Обрані, Популярні, Свіжі та Улюблені + Налаштування фільтру.

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

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

Кожна тема має певні параметри кастомізації – налаштування під себе. Також може просити встановити деякі плагіни для своєї роботи і т.д, то потрібно просто слідувати інструкціям.

Для кастомізації переходимо в розділ ВиглядНалаштування

кастомізація теми

Тут все індивідуально… Я для сайту, що використовується як приклад на зображеннях, використав тему Customify – чудова і дуже гнучка в налаштуваннях тема. Має і преміум варіант, та мені абсолютно достатньо і безкоштовної.

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

іконка сайту

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

Отже в цьому розділі є цікава для нас функція Іконка сайту називається. Там ми встановлюємо так звану Favicon для сайту – картинка, що відображатиметься у вкладках браузера, та в закладках на мобільному. Отже потрібна тематична картинка розміром 512х512 пікселів.

Найпростіший спосіб підібрати таку іконку: йдемо сюди, в пошукову стрічку вписуємо англійське слово, що характеризує тематику вашого сайту, наприклад car (авто) та бачимо безліч варіанті що відкрилися. Обираємо яка сподобалась і завантажуємо в форматі png розміром 512х512 пікселів. Ось і все. Тепер повертаємось до свого сайту і завантажуємо іконку та опубліковуємо зміни.

Відкриваємо будь-яку сторінку свого сайту і бачимо, що тепер у нас в вкладці браузера відображається красива іконка 🙂

Назва та опис сайту

В майстерні керування сайтом ідемо до пункту Налаштування – Загальне

налаштування сайту

Та в полі Назва сайту вписуємо відповідно назву свого сайту. Для прикладу, на моїх зображеннях реальні сайти клієнтів, тому там поля заповнені відповідно до тематики. Тобто я не лише просто розповідаю як створити свій сайт, я створюю реальні проекти для себе та клієнтів 🙂

Отже після назви сайту йде поле Ключова фраза і тут потрібно коротко описати ваш сайт.

Після того, як ви спробували в декількох словах описати вміст майбутнього сайту, перейдем до інших налаштувань. Зробимо все гарно.

Встановлення головної сторінки сайту

Залежності від типу сайту можна встановити 2 варіанти головної сторінки – динамічну чи статичну.

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

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

Можуть бути певні специфічні варіанти, але то сокріше винятки.

Для встановлення статичної чи динамічної сторінки свого сайту йдемо в майстерні в розділі Налаштування, де ми тільки що вписували назву сайту і його короткий опис, до підпункту Читання та обираємо що ВордПресс має рахувати вашою головною сторінкою – останні записи чи статичну сторінку. Якщо статичну сторінку, то її потрібно обрати зі списку якщо вона є, а якщо немає, то створити. В темах оформлення, зазвичай, уже використовується та чи інша сторінка вже після встановлення теми якщо було використано встановлення тестового або, по іншому, демо вмісту.

Налаштування постійних посилань

Постійні посилання – це структура посилань вашого сайту на внутрішні сторінки. Наприклад, посилання може виглядати так https://mcbrokering.eu/?p=123, або так https://mcbrokering.eu/employment/. Або ще багато як, проте другий варіант більш зрозумілий людям, та кращий для пошукових систем типу Google.

Тому йде в розділ НалаштуванняПостійні посилання в панелі управління сайтом, та відмічаємо один з пердставдених варіантів

Постійні посилання

Рекомендуємо обрати для сайту-візитки чи бізнес сайту саме такий варіант, а для блогу чи інформаційного сайту, або будь-якого іншого, де важливо категоризувати публікації, підійде Користувацька структура такого вмісту /%category%/%postname%/ тому, що нам потрібно відобразити категорії опублікованого матеріалу.

Встановлення плагінів

Плагіни, це доповнення до ВордПресс, що розширює її можливості. Плагіни також як і теми є платні і безкоштовні. Такої кількості плагінів як у WordPress немає в жодної CMS!

Нам потрібно встановити, та активувати декілька майже обов’язкових плагінів, а саме:

  • LiteSpeed Cache
  • Cyr-To-Lat
  • Yoast SEO

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

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

То ж приступимо і почнемо з LiteSpeed Cache. В панелі керування сайтом ідемо в розділ Плагіни, де буде список встановлених та активних плагінів якщо такі є. Шукаємо вгорі кнопку Додати новий та потрапляємо в репозиторій з плагінами. В пошукову стрічку пишемо назву плагінів, що вище перераховані, по черзі.

Репозиторій плагінів WordPress

Вводымо LiteSpeed Cache та в результатах пошуку обираємо напроти потрібного нам плагіну Встановити, а після встановлення Активувати. Ось і все, тепер проробіть такі ж дії з 2 іншими плагінами що залишились.

Cyr-To-Lat налаштовувати після установки не потрібно, його потрібно лише встановити та активувати і він почне працювати. Цей невеликий і простий плагін перетворюватиме адреси сторінок вашого сайту з кириличних на транслітеровані латинські. Це важливо для оптимізації під пошукові системи.

Інші 2 плагіни потребують налаштування.

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

LiteSpeed Cache має два варіанти інтерфейсу – спрощений, та розширений. Нам потрібен розширений, бо він дає можливість підняти швидкість завантаження вашого сайту на дуже високий рівень.

Після встановлення та активації LiteSpeed Cache в нас в панелі керування сайтом з’явиться новий пункт який так і називається LiteSpeed Cache. Коли до нього піднести курсор, то ми помітимо пункти підменю, нас цікавить Settings. Заходим туди, та бачимо спрощену версію керування плагіном. Справа шукаємо кнопку Show Advanced Options, та тиснемо на неї.

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

  1. General – маємо ввімкнути кешування і для цього навпроти Enable LiteSpeed Cache має бути активно Enable.
  2. Cache – можна просто повмикати всі повзунки перевівши їх в положення Enable
  3. Optimize – вмикаємо все окрім Load JS Deferred та Remove Comments
  4. Media – навпроти Lazy Load Images ставимо ON

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

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

Далі, найскладніше – Yoast SEO. Раджу встановити його, активувати, але для налаштування перейти до статті Як просувати свій сайт в пошуку. Там чітко і детально розписано що ж таке SEO або пошукова оптимізація, які чинники впливають на позиції сайта в пошукових системах та як налаштувати Yoast SEO і використовувати при створенні записів і сторінок для оптимізації їх під пошук та не тільки це, а ще багато іншого і корисного вашому сайту.

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

Крок 5. Створити необхідні сторінки та підготувати їх до заповнення

Створення сторінок

Створення сторінок мається на увазі статичних з інформацією, як, наприклад, Про нас чи Контакти, а також, як варіант, динамічної сторінки з останніми новинами чи записами блогу.

Йдемо в розділ СторінкиДодати нову для створення нових сторінок, або СторінкиВсі сторінки для редагування існуючих. Заповняємо сторінки вмістом і зберігаємо.

Створення записів

Аналогічно можемо створити і записи в розділі Записи. Записи відрізняються тим, що мають більше налаштувань, та являються основним типом матеріалів у ВордПресс. Для записів доступні Категорії та Позначки, що дозволяє їх розділяти при виведенні в розділах меню чи в розділах на головній.

Після створення необхідних сторінок та Категорій для записів, при необхідності, можна приступити до налаштування Меню.

Налаштування меню

Ідемо в розділ ВиглядМеню. Якщо у вас є створене меню, то воно буде доступне для редагування, а якщо ні, то потрібно створити перше меню.

Отже ми бачимо назву меню, розділ Додайте елементи меню та Структура меню.

Додаємо в меню необхідні сторінки чи категорії і тиснемо Зберегти меню. Ось і все.

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

Робота над сайтом

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

Вирішення питання як створити сайт це лише маленька частина роботи. Бо використовуючи наше керівництво можна розібратись як створити сайт самостійно менш ніж за годину, а от далі потрібно попрацювати набагато довше. Бо писати хороші тексти, займатись просуванням в пошуку чи налаштуванням реклами вже так швидко не вийде. Але дорогу осилить той хто йде, тому працюйте, старайтесь, а якщо потрібна допомога, то звертайтесь та запитуйте – консультую безкоштовно 🙂

Відповіді на часті питання:

💰 Скільки коштує зробити свій сайт?

Створення сайту може не коштувати нічого, якщо ви робитимете його по нашому керівництву, а гроші потрібні на хостинг та домен і, при бажанні, перміум дизайн

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

Використовуючи наше просте керівництво власний сайт можна створити не маючи жодних особливих навичок чи знань

👤 Хто може створити свій сайт?

З цим керівництвом сайт зможе створити будь-хто, хто зможе його прочитати і оплатити хостинг та домен

🏪 Як створити онлайн магазин?

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