1. Три простих способи зробити сайт:
2. Але перш ніж почати ...
3. 1 Зареєструвати домен
4. 2 Купити веб-хостинг
5. Метод # 1: створення веб-сайту з нуля
6. Основні веб-мови / інструменти, які ви повинні знати:
7. Крок 1: настройка локальної робочої середовища
8. Крок 2: план і дизайн вашого сайту за допомогою Adobe Photoshop
9. Крок 3: кодифікує дизайн за допомогою HTML і CSS
10. Крок 4: зробити його динамічним за допомогою JavaScript і jQuery
11. Крок 5: завантаження локальних файлів на сервер за допомогою FTP-клієнта
12. Метод # 2: створення веб-сайту за допомогою CMS
13. WordPress
14. Joomla
15. Drupal
16. Покроковий процес створення веб-сайту з використанням WordPress
17. Крок 1: знайдіть установник WordPress на панелі веб-хостингу
18. Крок 2: встановіть WordPress через установник
19. Крок 3: встановіть тему і деякі важливі плагіни
20. Крок 4: Ви готові!
21. Метод # 3: створення веб-сайту з розробниками сайтів
22. Wix
23. Weebly
24. Покроковий процес створення веб-сайту з використанням Wix
25. Крок 2: виберіть шаблон
26. Крок 3: створіть свій сайт за допомогою Wix Website Builder
27. Крок 4: Публікація веб-сайту

Створення сайту дуже просто в 2019.

Вам не обов'язково бути техніком і програмістом.

Дотримуйтесь правильному методу. Виберіть правильні платформи. Використовуйте правильні інструменти. Ви отримаєте штраф 100%.

У мене було нульове знання в веб-розробці, коли я вперше почав свій онлайн-бізнес в 2004. Я не найняв веб-розробника до одинадцяти років. І я все добре.

Сьогодні - у нас є інноваційні інструменти розробки і кращі веб-публікації.

Три простих способи зробити сайт:

Пряме посилання:

1. Створення з нуля
2. Використання системи управління контентом (CMS)
3. Використання будівника веб-сайтів

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

Процес створення і управління сайтом набагато простіше за допомогою методу # 2 і # 3. Ви повинні вибрати один з цих методів в залежності від вашої компетенції.

Ми розглянемо кожен з цих трьох методів найближчим часом.

Але перш ніж почати ...

Перш ніж ми почнемо, нам потрібно дві речі для вашого сайту: 1 доменне ім'я і 2 веб-хостинг.

1 Зареєструвати домен

Домен - це ім'я вашого сайту. Він повинен бути унікальним і передавати бренд вашого бізнесу.

Найпростіший спосіб пошуку і реєстрації домена - перейти до реєстратора домену.

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

Ось кілька шанованих реєстраторів доменів.

Також читайте - Доменне ім'я для чайників .

2 Купити веб-хостинг

A веб-хостингу це великий комп'ютер (ака, сервер), який зберігає ваші веб-сайти. Деякі гігантські компанії, такі як Amazon, IBM і FB, володіють ще й управляють своїми веб-серверами; інші підприємства просто орендують свої сервери у хостинг-провайдера (що набагато дешевше і простіше).

Примітка. Пропустіть цей крок, якщо ви вибираєте творця веб-сайту для створення свого сайту ( см. крок # 3 ).

Деякі новачки-дружні послуги хостингу, щоб перевірити.

Веб-хостинг Зареєструватися Зауваження A2 хостинг $ 4.90 / міс Швидкий веб-хостингу, доброзичливий до новачків. BlueHost $ 3.95 / міс Дешева ціна реєстрації, новачки доброзичливі. хмара Hostgator $ 8.95 / міс Розумна ціна, надійний сервер. HostPapa $ 3.36 / міс Екологічний веб-хостинг, ексклюзивна знижка. InMotion хостинг $ 3.49 / міс Дешева ціна реєстрації, надійний сервер. SiteGround $ 5.95 / міс Індустрія підтримки # 1 в реальному часі, надійний веб-хост.

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

Також читайте - Скільки коштує створення веб-сайту .

Розкриття інформації FTC

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

Коли у вас є доменне ім'я і веб-хостинг, прийшов час засукати рукава і почати створювати!

Метод # 1: створення веб-сайту з нуля

Необхідні навички та інструменти

Ви можете створити свій унікальний і унікальний веб-сайт самостійно, якщо знаєте основні веб-мови і основи веб-сайту.

В іншому випадку рекомендується перейти до методу # 2/3; або, зв'яжіться з веб-розробником.

Основні веб-мови / інструменти, які ви повинні знати:

• HTML (Hyper Text Markup Language)
  HTML - це основна структура веб-сторінок і веб-додатків, яка робить контент семантичним для веб-браузера. Він складається з послідовних тегів, які мають відкриття і закриття, і структурно ключове слово, укладену в кутові дужки. Приклад: <strong> </ strong>
• CSS (каскадні таблиці стилів)
  CSS - це стиль, який використовується для оформлення розмітки HTML на веб-сторінці. Без CSS веб-сторінка буде виглядати не що інше, як велика біла сторінка з деяким неврегульованим текстом і зображенням на ньому. CSS - це те, що робить сторінку ідеально, як ми хочемо.
• мови скриптів
  HTML і CSS - це нічого, крім мов сценаріїв, тому що вони не є інтерактивними. Щоб створити динамічну веб-сторінку, яка буде відповідати користувачам, вам потрібні такі мови, як JavaScript і jQuery. Серверні мови, такі як PHP, Python і Ruby, також можуть знадобитися з плином часу.
• Управління базами даних
  Для зберігання, управління і доступу до призначених для користувача даних на веб-сайті розглядається велика таблиця інформації, яка називається базою даних. Система управління базами даних, така як MySQL, MongoDB і PostgreSQL, використовується на стороні сервера для ефективного виконання цього завдання.
• FTP (протокол передачі файлів)
  FTP використовується для більш простого перенесення вихідних файлів веб-сайту на його розміщений сервер. Існують веб-сервери, а також FTP-клієнти на базі програмного забезпечення, які можна використовувати для завантаження своїх файлів на серверний комп'ютер.

Покроковий процес створення веб-сайту з використанням IDE

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

Крок 1: настройка локальної робочої середовища

Знімок екрану робочого середовища Subline Text.

Для створення і організації вихідних файлів веб-сайту важлива хороша місцева робоче середовище. Ви можете створити середовище веб-розробки на своєму комп'ютерному пристрої, встановивши IDE (Integrated Development Environment). IDE в основному складається з текстового редактора, автоматизації збирання і відладчика.

Sublime Text атом є деякими з основних IDE для веб-розробки, що підтримують HTML, CSS, JS, PHP, Python і аналогічні веб-мови.

З іншого боку, існують розширені IDE, такі як Adobe Dreamweaver який пропонує кілька інших функцій (наприклад: підключення до сервера, FTP).

Крок 2: план і дизайн вашого сайту за допомогою Adobe Photoshop

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

Кращою практикою є відкриття Adobe Photoshop і створення грубого малюнка ваших веб-сторінок. Можливо, вам знадобиться зробити різні шрифти для різних сторінок, наприклад, домашню сторінку, сторінку, сторінку контакту, сторінку обслуговування і т. Д

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

Крок 3: кодифікує дизайн за допомогою HTML і CSS

Після того, як ви закінчите робити грубі проекти для своїх веб-сторінок в Adobe Photoshop, ви можете почати писати вихідні коди.

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

Крок 4: зробити його динамічним за допомогою JavaScript і jQuery

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

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

Крок 5: завантаження локальних файлів на сервер за допомогою FTP-клієнта

Останній крок - завантаження всіх вихідних файлів на веб-сервер. Найкращий і простий спосіб обробки - через FTP-клієнт.

Спочатку завантажте FTP-клієнт на свій комп'ютерний пристрій і підключіть його до вашого веб-сервера за допомогою облікового запису FTP. Після того, як ви успішно підключили його до облікового запису FTP, скопіюйте всі локальні файли в корінь вашого веб-каталогу. Деякі хороші FTP-клієнти FileZilla , WinSCP Cyberduck .

Метод # 2: створення веб-сайту за допомогою CMS

Необхідні навички та інструменти

• Knwoledge: базова робота комп'ютера та Інтернету; HTML, CSS і PHP (не обов'язково, але краще, якщо ви знаєте основи)
• Інструменти: WordPress , Joomla і Drupal

CMS або система управління контентом побудовані так тактовно, що вони підходять початківцям початківцям початківцям досвідченим веб-розробникам.

Це програмне додаток, яке спрощує створення та обробка вмісту в Інтернеті. Більшість з них є open-source і безкоштовні для використання.

Якщо ви знаєте основи HTML, CSS або PHP, це вигідно для вас. Це не велика проблема, якщо ви не знаєте, тому що ці платформи дуже інтуїтивно зрозумілі. Ось три кращих безкоштовних вибору платформ CMS, які ви можете вибрати відповідно до ваших потреб.

Швидкі порівняння

WordPress Joomla Drupal Ціни - - - Застосування 311,682 млн 26,474 млн 31,216 млн Безкоштовні теми 4,000+ 1,000+ 2,000+ Безкоштовні плагіни 45,000+ 7,000+ 34,000+

Також читайте - Top CMS порівняв (2018) - WordPress проти Joomla vs Drupal

WordPress

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

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

Вибір тем WordPress.

плюси

• Дуже гнучкий і настроюється
• Легко використовувати,
• Тонни навчальних ресурсів,
• Відмінне співтовариство і підтримка

мінуси

• Потрібно код для основних візуальних налаштувань
• Оновлення можуть викликати проблеми з плагінами

Дізнатися більше

Joomla

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

Проте, новачкам може бути більш залякане досліджувати Joomla через кількість доступних опцій. На додаток до меню зліва є також меню на верхній панелі над логотипом «Панель управління». Щоб уникнути плутанини, пам'ятайте, що деякі елементи з меню зліва і верхнього рівня аналогічні, включаючи «Вміст», «Користувачі» і «Розширення».

Як і WordPress, Joomla має кілька стилів і шаблонів, які можуть швидко надати вашому сайту характерного вигляду. Але з усіх трьох систем управління контентом Joomla пропонує найлегше рішення, коли справа доходить до створення соціальної мережі. З платформами, такими як EasySocial і JomSocial, ви перебуваєте всього в декількох хвилинах від свого власного сайту соціальних мереж.

Усередині системи Joomla.

плюси

• Більш технічно досконалий
• Веб-сайти зазвичай працюють краще
• Безпека на рівні підприємства

мінуси

• Модулі важко підтримувати
• Middle-ground CMS - не так просто, як WordPress, не такий просунутий, як Drupal

Детальніше

Drupal

Досвідчені веб-розробники підтверджують, що Drupal є найпотужнішою CMS.

Однак це також найбільш складно використовувати. Завдяки своїй гнучкості Drupal є другою найбільш використовуваної CMS в світі, але вона не є фаворитом серед новачків. Щоб успішно створити «повний» веб-сайт за допомогою Drupal, вам потрібно забруднити руки і вивчити основи кодування. Знати свій шлях навколо CMS також складно для новачків.

Установка нового Drupal - незважаючи на складні функції Drupal, CMS пропонує простий, мінімалістичний інтерфейс.

плюси

• легко навчаюсь
• Великий довідковий портал
• Оновлення легко інтегруються
• Більше вбудованих опцій

мінуси

• Крута крива навчання на стартовому етапі - рекомендується для досвідчених користувачів

Детальніше

Покроковий процес створення веб-сайту з використанням WordPress

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

Крок 1: знайдіть установник WordPress на панелі веб-хостингу

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

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

Деякі хостинг-провайдери (приклад: SiteGround ) Використовуйте інтегровані інсталятори в панелі управління користувача (екран, який ви бачите відразу після входу в cPanel). У цьому випадку просто спробуйте знайти заголовок, який включає в себе «WordPress».

Приклад: панель інструментів SiteGround cPanel.

Крок 2: встановіть WordPress через установник

Softaculous - найпопулярніший автоінсталлятор, і він представлений на cPanel. Я проведу вас через установку через Softculous. Інші інсталятори майже однакові.

Натисніть «Неакуратно», а потім натисніть «Встановити» над WordPress, щоб почати установку.

Тут важлива частина.

Налаштуйте параметри наступним чином: залиште інші поля в конфігурації за замовчуванням (пізніше виберете) і натисніть «Встановити».

• Протокол: вам потрібно вирішити, чи хочете ви встановити http: // або http: // www. версії URL. Що б ви не вибрали, ви не побачите великої різниці. З технічної точки зору, http: // www. краще з точки зору гнучкості і управління файлами cookie. Зверніть увагу: якщо у вас є дійсний сертифікат SSL і ви хочете встановити WordPress, просто виберіть https замість http.
• Домен: виберіть домен, на якому ви хочете встановити веб-сайт.
• Directory: вкажіть, де ви хочете встановити сайт WordPress. Якщо ви хочете встановити його на свій кореневої URL (наприклад: http://www.yourwebsite.com/), збережіть його порожнім. Якщо ви хочете його на суб-URL (наприклад: http://www.yourwebsite.com/myblog/), вкажіть каталог в цьому полі.
• Обліковий запис адміністратора: вкажіть своє ім'я користувача, пароль і адресу електронної пошти, які ви будете використовувати для входу на ваш сайт WordPress.

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

Тепер увійдіть в свій сайт WordPress. Сторінка входу вашого сайту буде виглядати як wp-login.php, завершальний встановлений вами URL-адресу веб-сайту.

Крок 3: встановіть тему і деякі важливі плагіни

Потім вам потрібно встановити тему і обов'язкові плагіни. Подивіться на ліву бічну панель вашої панелі інструментів WordPress.

В каталозі WordPress є безліч безкоштовних готових тем.

Щоб переглянути ці безкоштовні теми, відкрийте «Зовнішній вигляд»> «Теми»> «Додати новий», знайдіть тему, відповідну вашим вимогам, і натисніть кнопку «Встановити».

Каталог тим WordPress.

Ви також можете встановити сторонні теми з розділу "Завантажити тему». Для платних, професійно розроблених тим WordPress я рекомендую елегантні теми (Для його ефективного коду і красивих дизайнів передньої частини).

Для плагінів виберіть «Модулі> Додати новий».

Знайдіть і встановіть необхідні вам плагіни. 3rd Модулі Party також можна встановити з розділу «Завантажити плагін».

Плагін WordPress.

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

• Для SEO: Yoast SEO, все в одному пакеті SEO
• Для безпеки: безпека iThemes, безпеку Wordfence
• Статистика сайту: Jetpack від WordPress.com, Google Analytics для WordPress від Monster Insights
• Для створення форми: Контактна форма 7
• Для продуктивності: загальний кеш W3, WP Super Cache

Також читайте - Модулі 9 Essential WordPress для нових сайтів WP

Крок 4: Ви готові!

На останньому етапі ваш сайт повинен бути запущений. Але є ще кілька речей, які потрібно розібратися.

• У розділі «Налаштування»> «Загальні»: вкажіть назву сайту і тег.
• У розділі «Налаштування> Читання»: яка повинна відображатися ваша домашня сторінка і скільки повідомлень в блозі ви хочете показувати на одній сторінці.
• У розділі «Налаштування»> «Параметри»: вкажіть, яка буде структура URL Вашого повідомлення в блозі.

Основні настройки для нового сайту WordPress.

Метод # 3: створення веб-сайту з розробниками сайтів

Необхідний досвід і інструменти

• Knwoledge: базова робота комп'ютера та Інтернету
• Інструменти: Wix Weebly

Творці сайтів зробили це легко і швидко, щоб налаштувати сайт. Без знання веб-мов можна запустити свій повнофункціональний веб-сайт за лічені хвилини. Вони пропонують Drag & Drop веб-сайт, які вимагають нульового знання кодування.

Безліч будівельників сайтів розкидані по Інтернету - Disha 26 безкоштовний сайт будівельників в цьому блозі ; але не всі з них можуть задовольнити потреби.

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

Wix

Wix - один з найпростіших розробників сайтів на ринку, який має повнофункціональні шаблони 500 +, відсортовані за різними категоріями. Тому цілком впевнений, що ви знайдете той, який вам підходить.

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

Єдиний недолік полягає в тому, що на сайті Wix безкоштовний план реклами на місці. Ви можете позбутися від нього, оновивши його до плану Combo, який поверне вам мінімум $ 12 / місяць.

Також читайте - Наш всебічний огляд Wix .

Weebly

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

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

Конструктор Drag & Drop простіше у використанні, але іноді ви обмежені виділеними областями для настройки. Доступність розширень і сторонніх додатків також обмежена.

Також читайте - Наш поглиблений огляд Weebly .

Покроковий процес створення веб-сайту з використанням Wix

Крок 1: Увійдіть для Wix

Створіть обліковий запис на Wix.com.

Існують преміальні плани 5 і безкоштовний план 1 (ціни варіюються від $ 0 - $ 24.50 / mo). Після успішного створення сайту ви побачите варіанти оновлення.

Див. Плани Wix і ціни тут.

Wix.

Я рекомендую основна оплачувана план Wix - Combo. План Wix Combo ($ 8.50 / mo) має безкоштовне доменне ім'я, більше ресурсів ЦП і ніяких Wix-оголошень.

Крок 2: виберіть шаблон

Wix запитає вас, як ви хочете створити веб-сайт. Найшвидший спосіб, який вони можуть запропонувати, - це Wix ADI (Intelligence Design Intelligence), яка не дуже плідний в кінці.

Тому я проведу вас трохи довше, але краще, будівельник сайту!

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

Після пошуку теми Wix, яка вам подобається, натисніть «змінити», щоб продовжити.

Кнопка «edit» відображається, коли ви наводите курсор миші на тему.

Крок 3: створіть свій сайт за допомогою Wix Website Builder

Через кілька миттєвостей ви відразу приземлитеся на своєму інтуїтивно зрозумілому веб-сайті.

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

Створіть елементи своєї веб-сторінки, використовуючи редактор перетягування Wix.

Крок 4: Публікація веб-сайту

Коли ви натиснете кнопку публікації, вас запитають, чи хочете ви вільний субдомен або повнофункціональний домен. Це ваш дзвінок.

Рекомендується ще кілька налаштувань.

Перейдіть на свою «Панель управління Wix»> «Управління та зміна сайту» і налаштуйте параметри SEO, Favicon, Social і Upgrades в міру необхідності.

Налаштуйте свій сайт Wix. Натисніть, щоб збільшити зображення.

І як тільки ви закінчите з цими основними настройками - ваш сайт буде готовий.