Три простых способа создания веб-сайта: пошаговое руководство для начинающих

Статья написана:
  • Хостинг-гиды
  • Обновлено: май 10, 2019

Создание сайта очень просто в 2019.

Вы не должны быть техническим идиотом или программистом.

Следуйте правильному методу. Выберите правильные платформы. Используйте правильные инструменты. Вы получите штраф 100%.

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

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

Три простых способа сделать сайт:

Прямая ссылка:

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

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

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

Мы рассмотрим каждый из этих трех методов в ближайшее время.

Но прежде чем начать ...

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

1- Зарегистрировать домен

Домен - это имя вашего сайта. Он должен быть уникальным и передавать бренд вашего бизнеса.

Самый простой способ поиска и регистрации домена - перейти к регистратору домена.

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

Поиск и регистрация вашего доменного имени на NameCheap
Поиск и регистрация доменных имен в Название Дешевые.

Вот несколько уважаемых регистраторов доменов.

РегистраторыНачальная цена
.com . Net
123 Reg£ 11.99£ 11 .99
Domain.com$ 9.99 / год$ 10.99 / год
Gandi€ 12.54 / год€ 16.50 / год
GoDaddy$ 12.17 / год$ 12.17 / год
Название Дешевые$ 10.69 / год$ 12.88 / год
Сетевые решения$ 34.99 / год$ 32.99 / год

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

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
Снимок экрана рабочей среды 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, скопируйте все локальные файлы в корень вашего веб-каталога. Некоторые хорошие FTP-клиенты FileZilla, WinSCP Cyberduck.


Метод #2: создание веб-сайта с помощью CMS

Требуемые навыки и инструменты

  • Knwoledge: базовая работа компьютера и Интернета; HTML, CSS и PHP (не обязательно, но лучше, если вы знаете основы)
  • Инструменты: WordPress, Joomlaи Drupal

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

Это программное приложение, которое упрощает создание и управление содержимым в Интернете. Большинство из них являются open-source и бесплатны для использования.

Если вы знаете основы HTML, CSS или PHP, это выгодно для вас. Это не большая проблема, если вы не знаете, потому что эти платформы очень интуитивно понятны. Вот три лучших бесплатных выбора платформ CMS, которые вы можете выбрать в соответствии с вашими потребностями.

Быстрые сравнения

WordPressJoomlaDrupal
Цены---
Применение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 - несмотря на сложные функции Drupal, CMS предлагает простой, минималистический интерфейс.

Плюсы

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

Минусы

  • Крутая кривая обучения на стартовом этапе - рекомендуется для опытных пользователей

Подробнее

Пошаговый процесс создания веб-сайта с использованием WordPress

Для этого метода мы будем использовать WordPress в качестве нашего примера. К настоящему времени у вас уже должно быть учетная запись веб-хостинга и зарегистрированное доменное имя.

Шаг 1: найдите установщик WordPress на панели веб-хостинга

Услуги веб-хостинга обычно включают быстрый установщик для установки WordPress и других распространенных платформ.

Поэтому войдите в свою учетную запись веб-хостинга и узнайте, какой у вас инсталлятор. Популярные имена, которые вы должны искать, - это Softaculous, QuickInstall или Fantastico.

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

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

Шаг 2: установите WordPress через установщик

Softaculous - самый популярный автоинсталлятор, и он представлен на cPanel. Я проведу вас через установку через Softculous. Другие инсталляторы почти одинаковы.

Нажмите «Неаккуратно», а затем нажмите «Установить» над WordPress, чтобы начать установку.

Установка 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.

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

Для плагинов выберите «Плагины> Добавить новый».

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

Каталог плагинов WordPress
Плагин 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 вашего сообщения в блоге.

Основные настройки для нового сайта WP
Основные настройки для нового сайта WordPress.


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

Требуемые навыки и инструменты

  • Knwoledge: базовая работа компьютера и Интернета
  • Инструменты: Wix Weebly

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

Множество строителей сайтов разбросаны по Интернету - Disha 26 бесплатный сайт строителей в этом блоге; но не все из них могут удовлетворить потребности.

Следующие три являются наиболее распространенными и потенциальными разработчиками веб-сайтов, которые вы можете использовать.

Wix

Использование Wix для создания сайта

Wix - один из самых простых разработчиков сайтов на рынке, который имеет полнофункциональные шаблоны 500 +, отсортированные по различным категориям. Поэтому вполне уверен, что вы найдете тот, который вам подходит.

Они предлагают гибкий редактор сайтов Drag & Drop, который всегда виден поверх контента. Вы можете перетащить один элемент из списка и добавить его в любое место на веб-сайте для добавления. Любой видимый элемент на нем можно перемещать или редактировать.

Единственный недостаток заключается в том, что на сайте Wix бесплатный план рекламы на месте. Вы можете избавиться от него, обновив его до плана Combo, который вернет вам минимум $ 12 / месяц.

Также читайте - Наш всесторонний обзор Wix.

Weebly

Использование Weebly для создания сайта

Weebly проще во многом, как навигация, удобство для пользователя. Они предлагают сотни шаблонов на выбор, но параметры персонализации могут показаться ограниченными.

Они имеют большое количество предварительно разработанных макетов страниц (например, о странице, странице цены, странице контактов), которые можно использовать и изменять.

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

Также читайте - Наш углубленный обзор Weebly.

Пошаговый процесс создания веб-сайта с использованием Wix

Шаг 1: Зарегистрируйтесь для Wix

Создайте учетную запись на Wix.com.

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

См. Планы Wix и цены здесь.

Wix регистрация
Wix.

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

Шаг 2: выберите шаблон

Wix спросит вас, как вы хотите создать веб-сайт. Самый быстрый способ, который они могут предложить, - это Wix ADI (Intelligence Design Intelligence), который не очень плодотворен в конце.

Поэтому я проведу вас немного дольше, но лучше, строитель сайта!

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

После поиска темы Wix, которая вам нравится, нажмите «изменить», чтобы продолжить.

Редактирование веб-страницы в Wix
Кнопка «edit» отображается, когда вы наводите указатель мыши на тему.

Шаг 3: создайте свой сайт с помощью Wix Website Builder

Через несколько мгновений вы сразу приземлитесь на своем интуитивно понятном веб-сайте.

Разработка сайта проста. Вы увидите различные инструменты слева и справа от экрана. Кроме того, нажмите в любом месте сайта, чтобы отредактировать блок или переместить его в другое место.

Элементы Wix
Создайте элементы своей веб-страницы, используя редактор перетаскивания Wix.

Шаг 4: Публикация веб-сайта

Когда вы нажмете кнопку публикации, вас спросят, хотите ли вы свободный субдомен или полнофункциональный домен. Это ваш звонок.

Рекомендуется еще несколько настроек.

Перейдите на «Wix Dashboard> Управление и редактирование сайта» и настройте SEO, Favicon, Social и Upgrade.

Конфигурация сайта Wix
Настройте свой сайт Wix. Нажмите, чтобы увеличить изображение.

И как только вы закончите с этими основными настройками - ваш сайт будет готов.

О Джерри Лоу

Основатель WebHostingSecretRevealed.net (WHSR) - обзора хостинга, которому доверяют и используют пользователи 100,000. Более чем 15-летний опыт в веб-хостинге, партнерском маркетинге и SEO. Вкладчик в ProBlogger.net, Business.com, SocialMediaToday.com и многое другое.

Подключение: