Как создать сайт без движка

Сайт — это просто. Как создать сайт самому бесплатно с нуля

Для создания сайта нужны знания и время. У профессиональных разработчиков есть знания, поэтому они сделают быстро, но возьмут за это деньги. Если решите делать сами, придётся потратить время, зато останутся деньги на продвижение и оптимизацию.

Ниже обзор способов создания сайта и подробная инструкция. Начнём с целей, рассмотрим составные части, изучим популярные движки и сайтбилдеры, пройдемся по техническим деталям и закончим списком бесплатных сервисов для поддержки сайта после его создания.

Сразу к делу

Самый доступный способ сделать сайт без помощи разработчиков — использовать бесплатный «движок» WordPress. Для этого сначала надо купить домен и хостинг. Подробнее читайте в разделе Хостинг и CMS как универсальное решение.

Содержание

Сайт: когда он нужен и кому его доверить

Когда сайт нужен

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

Если вам нужна аудитория, вам нужно в интернет. Своя страница — это один из способов представить себя в интернете: художнику показать работы, бизнесу найти клиентов, общественным организациям собрать деньги на хорошее дело.

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

Когда сайт не нужен

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

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

  1. небольшой фитнес-зал — группа в мессенджере,
  2. магазин вещей ручной работы — аккаунт во ВКонтакте,
  3. парикмахер или стилист — аккаунт в Instagram.

Группа в соцсети не подойдёт, если вы хотите получать трафик из поиска, настраивать рекламу за пределами одной социальной сети или зарабатывать на своём сайте.

Если хотите создать портфолио или блог, обратите внимание на специализированные сервисы.

Когда сайт не стоит делать самому

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

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

Если это важный имиджевый проект. Кроме проектирования и вёрстки сайта веб-студии создают фирменный стиль и логотип, помогают с текстами и иллюстрациями.

Если это веб-приложение: есть интерактивные элементы, личный кабинет. Такие сайты сложно разрабатывать и оптимизировать. Веб-студия позаботится о том, чтобы проект был адаптирован под разные устройства, загружался и работал быстро.

Что важно знать до разработки

Базовое понимание работы сайтов есть у всех, кто хоть раз был в интернете: вводишь адрес в браузере, браузер открывает страницу — ничего сложного. Но для разработки нужно знать больше.

Зачем знать теорию Незнанием пользуются агентства и веб-разработчики фрилансеры: за простую задачу берут дорого, ведь никто не знает, что она простая. Клиента, который понимает принципы и составляющие работы сайта, трудно заставить переплатить. Прочтя этот раздел, вы сможете оценивать стоимость работ и брать часть из них (или даже все) на себя.

Общая схема на примере ispmanager.com

Если очень упрощать, то сайт — это файл с контентом и кодом. В нашем случае контент — это описание компании и услуг, иллюстрации и скриншоты продуктов, отзывы клиентов. Контент упорядочен на странице: описание в одном месте, иллюстрации в другом, отзывы в третьем.

Чтобы контент красиво отображался на странице (и вообще отображался), его оборачивают в код (HTML, PHP и т. д.). Код на сайте не видно, но он есть. Чем сложнее вёрстка, тем больше кода. Главная страница ISPmanager содержит 46 000 символов, а код Facebook больше 670 000 символов (столько же, сколько в трёх томах «Войны и мира»). Без кода никак.

Файлы с контентом и кодом лежат на компьютере (сервере) в дата-центре. Сервер постоянно включён и на нём установлено специальное программное обеспечение, чтобы любой пользователь интернета мог получить к нему доступ. Обычно серверы арендуют, и эта услуга называется хостинг.

Чтобы получить доступ к серверу, нужен адрес. У сервера есть настоящий IP-адрес и он выглядит как-то так: 10.0.0.0/8, а есть «человекопонятный», и он выглядит так: ispmanager.com. Человекопонятный адрес места, где расположен сайт — это доменное имя.

Допустим, мы хотим зайти на сайт ISPmanager. Вводим домен в адресную строку, браузер находит настоящий адрес сервера, где лежит контент, обращается к нему, берёт файлы и показывает нам. Если мы что-то вводим на странице, браузер отправляет это серверу. Вот и всё.

Без чего сайт не может существовать

  1. Доменное имя. Без него ваш проект нельзя найти.
  2. Хостинг. Без него сайт лежит где угодно, но не в интернете.
  3. Код. Без него браузеры не могут отобразить контент.
  4. Контент. Без него непонятно, о чем вы хотите сказать.

За что надо и не надо платить

Чтобы создать сайт, надо подготовить контент, обернуть его в код, всё это загрузить на сервер и привязать к нему доменное имя. Большую часть действий можно сделать самому, но важно понимать, чем это чревато и за что всё-таки надо платить.

Рассказ о себе или компании, фотографии и описание услуг, отзывы клиентов можно подготовить самому бесплатно. Например, если у вас автомастерская, вы легко опишете свои услуги, сфотографируете рабочее место и возьмёте отзывы у клиентов, или если вы дизайнер, то скажете пару слов о себе и покажете примеры работ. За это не нужно платить.

Если контент особенно важен — вы хотите бесплатно привлекать клиентов из поиска или у вас огромный каталог товаров — на его создание уйдёт время. Если вам некогда делать самому, за это можно заплатить, если время есть, можно обойтись.

Код — можно бесплатно

Если вы не веб-разработчик, написать код с нуля не получится. Но это и не нужно, можно использовать готовые шаблоны. Это как строить дом не из глины, а из кирпичей или более крупных блоков. Совсем просто использовать конструкторы, чуть сложнее разобраться с «движками» (CMS), а разработчики используют фреймворки вроде Angular и React. Про конструкторы и движки сайтов подробно рассказываем во второй части гайда.

При использовании конструкторов или CMS остаётся только настроить шаблон под себя и добавить контент. Получившийся в итоге сайт может быть не уникальным и не идеально подходить под нужды, поэтому для тонкой настройки понадобится изучать специальную литературу. Если задача сложная, можно обратиться за услугами к профессиональным веб-разработчикам. Но и это необязательно.

Хостинг — лучше заплатить

Каждому сайту нужен хостинг. Чем больше проект, тем больше места ему нужно. Хостинг можно организовать дома на своём компьютере, но мы не советуем (если решитесь, в интернете есть инструкции). А ещё хостинг можно получить условно бесплатно, если использовать конструктор. Условно, потому что при росте платить всё равно придётся, подробнее в разделе Конструктор или CMS: что лучше.

При использовании шаблонов и CMS надо будет купить хостинг. Сделать это несложно и стоит он недорого, от 200 рублей в месяц за несколько гигабайт пространства. Подробнее об этом в разделе «Купить хостинг».

Домен — надо заплатить

Когда поисковые системы, пользователи и партнёры узнают о сайте, они сохраняют ссылку на него в закладках и базах данных. Любое изменение домена приводит к снижению посещаемости. Поэтому домен лучше купить сразу и не менять. Обычно домен арендуется на год.

Бесплатно можно получить домен третьего уровня вида site.sitebuilder.ru. Их получают сайты, созданные на конструкторах. Домен третьего уровня работает, но хуже запоминается и выглядит несерьёзно, на сайты с таким доменом нельзя подключить монетизацию. Так что лучше на него не рассчитывать.

За что точно не стоит платить Если нужна страница-визитка, не стоит платить за её создание. Фрилансеры на биржах берут от пяти тысяч рублей за установку CMS и наполнение её контентом. Но создать сайт таким образом вы можете сами бесплатно. Всего-то нужно арендовать хостинг, установить CMS и наполнить контентом. Как это сделать, читайте в разделе Хостинг и CMS как универсальное решение.. К профессионалам стоит обратиться, если вам нужен интернет-магазин, сайт с особенным дизайном или корпоративный портал.

Способы создать сайт

Определите цели

Выше мы уже говорили о ситуациях, когда сайт не нужен и его не стоит делать самому. Если вы всё-таки решились, то первое, что нужно — определиться с целями. Для чего он вам?

От целей зависит, какой тип сайта вам подойдёт и какими инструментами его лучше делать.

Типы сайтов в зависимости от целей.

  1. Продать — лендинги, интернет-магазины.
  2. Представить — сайт-визитка.
  3. Показать — портфолио, блог.

Ниже найдёте описание конструкторов разных типов сайтов, а также описание «движков» сайтов. Выбирайте подходящий под ваши цели инструмент.

Конструкторы сайтов: что это такое и какие бывают

Самый простой способ запустить свою страницу в сети — использовать конструктор или сайтбилдер. Это такой сайт, на котором можно создать сайт. Знать языки программирования не нужно, не нужно покупать хостинг и домен, достаточно уметь пользоваться мышкой. Зарегистрировался, выбрал шаблон, настроил его содержимое, добавил контент — готово. Проще некуда.

Конструкторы сайтов — платные сервисы, но у большинства из них есть условно бесплатные тарифы. С ними две проблемы. Первая: на бесплатном тарифе к сайту почти всегда нельзя привязать домен. Если вы наберёте аудиторию, а потом подключите домен, у проекта упадёт посещаемость, потому что для поисковиков он будет новым. Вторая проблема: если вы захотите перенести сайт на другой хостинг или добавить в код свои элементы, сделать это бесплатно не получится. Поэтому:

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

Бесплатный тариф конструктора не подходит для интернет-магазинов, сайтов блогов и СМИ с потенциалом роста.

Больше о плюсах и минусах конструкторов см. в разделе “Конструкторы и CMS: что лучше”. Ниже рассмотрим самые популярные сервисы с бесплатными тарифами.

  1. Универсальные
  2. Для электронной коммерции
  3. С упором на дизайн

Google Sites — полностью бесплатный конструктор от Google. Интерфейс напоминает приложение Google Презентации. Можно добавлять текст, иллюстрации, кнопки, карты, документы, таблицы. Тем и шаблонов мало, функционал ограниченный, но достаточный для создания простого адаптивного сайта. Домен тоже можно привязать бесплатно.

WIX — самый популярный конструктор в мире. Подходит для компаний и частных пользователей.

Бесплатно: поддомен на wix.com, пятьсот дизайнерских шаблонов, адаптивность, интеграции с платёжными сервисами, искусственный интеллект для автоматического создания сайта. Есть ограничение по скорости загрузки.

За что платить: за домен второго уровня, подключение собственного домена, удаление рекламы Wix, добавление производительности и места для хранения данных. Подписка на услуги стоит от 4 до 24 долларов в месяц.

Ucoz — подойдёт компаниям и организациям, которым не так важен дизайн, как возможность быстро и бесплатно представить себя в сети. В рунете на Ucoz работает более миллиона сайтов, но в обзорах этого конструктора есть много негативных отзывов. Изучите перед использованием.

Бесплатно: поддомен и хостинг, шаблоны, модули. Адаптивность и SEO-оптимизация не поддерживается.

За что платить: за домены, PHP, шаблоны на uTemplate — от 8 до 20 долларов. У компании есть ещё один конструктор — uKit. Это платный проект с дизайнерскими шаблонами, поддержкой адаптивности и SEO-оптимизации. Стоит от 4 до 12 долларов в месяц.

Jimdo — сайт за три минуты по анкете или через стандартный конструктор. Обещают оптимизацию под Google и адаптивность. Интерфейс на английском.

Бесплатно: поддомен на jimdofree.com, 500 Мб хранилища, пропускная способность 2 Гб, шифрование HTTPS. Плюс реклама сервиса.

За что платить: домен, расширенную память и пропускную способность, оптимизацию для мобильных устройств, SEO-оптимизацию, модуль для интернет-магазина, помощь экспертов. Стоит 5 евро в месяц для личных проектов, и 15 евро в месяц для компаний и предпринимателей.

Для электронной коммерции

Weebly — конструктор для электронной коммерции. Есть дизайнерские темы для портфолио и блога, но специализация — онлайн-магазины.

Бесплатно: поддомен на weebly.com, дизайнерские темы, 500 Мб для хранения, SEO.

За что платить: за подключение своего домена, продвинутую статистику, поиск по сайту, модули онлайн-торговли и т. д. Стоит от 3 до 19 евро в месяц.

Битрикс 24 — система управления клиентами (CRM). Услуги платные, но есть один бесплатный тариф и в него входит конструктор. Сайты на Битрикc 24 включают средства для продаж и общения с клиентами, контакты сразу заносятся в CRM.

Бесплатно: шаблоны, модули, интеграция с CRM, 12 пользователей, 5 ГБ в облаке, возможность создать магазин, подключить чат и календарь. Можно подключить свой домен или разместить проект на поддомене bitrix24.site. Сайт адаптирован под мобильные устройства, но удаляется через 50 дней неактивности.

За что платить: большее число пользователей, большее место на диске, расширенные возможности работы с клиентами и командой. Стоимость от 990 до 9990 рублей.

Ecwid — конструктор интернет-магазинов. Можно создать сайт, а можно — витрину, и интегрировать её в социальные сети или другие платформы (Wix, WordPress, Weebly, Joomla).

Бесплатно: 10 товаров, адаптивность, поддомен и возможность привязать свой домен.

За что платить: поддержку, большее число товаров, расширенные возможности SEO, расчёт стоимости, магазин в социальных сетях, мобильное приложение и др.

Nethouse — условно бесплатный конструктор сайтов для продажи услуг. Не предоставляет поддомен, нужно либо покупать домен у них, либо у другого регистратора. Адаптивные шаблоны, каталог товаров, выгрузка заказов в Excel и Яндекс.Маркет.

Бесплатно: неограниченный хостинг, свой домен, адаптивность, 10 товаров в каталоге и 100 фотографий, приём онлайн-платежей и статистика. Сайт с рекламной полоской Nethouse.

За что платить: за увеличение числа товаров в каталоге и фотографий, за разделение прав доступа, управление Яндекс.Советником. Стоимость платных тарифов: 299 и 499 руб/месяц.

С упором на дизайн

Tilda Publishing — конструктор с упором на дизайн. Важное отличие: код созданного на Tilda сайта можно скачать, но за это надо платить.

Бесплатно: поддомен на tilda.ws, до 50 страниц и 50 Мб на сервере, лейбл «made on Tilda».

За что платить: за подключение своего домена, вставку html-кода, прием платежей, загрузку своих шрифтов, добавление форм сбора данных. Платные тарифы стоят 10 и 20 долларов в месяц.

Readymag — сайты, журналы, фотоистории, портфолио, презентации. Если нужен смелый дизайн. Подойдет дизайнерам и редакторам.

Бесплатно: безлимитное число проектов, но 10 страниц на проект с рекламой от Readymag.

За что платить: добавление домена, безлимитное число страниц у проектов, возможность совместной работы, подключение Google Analytics, загрузку пользовательских шрифтов, расширенное SEO и др.

    , ,
  1. история о животных.

Обзор движков сайтов (CMS)

СMS («движок», «админка») — система управления контентом. По сути, это программное обеспечение, с помощью которого можно сделать сам сайт и разделы внутри, добавить текст и фотографии, каталог товаров и системы оплаты. Такое ПО бывает бесплатным и платным, а у бесплатных могут быть дополнения, за которые нужно платить.

Работать с CMS сложнее, чем с конструктором: до настройки внешнего вида придётся купить хостинг и домен, установить сам движок. Кроме того, уже в процессе может понадобиться помощь профессионального разработчика. Зато можно сразу привязать домен и без проблем перенести сайт на другой хостинг. Подробнее о преимуществах и недостатках — в разделе Конструктор или CMS: на чём лучше создать сайт.

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

WordPress — самая популярная система управления контентом в мире. На ней работают 26 млн сайтов. Подходит как для блогов, так и для других проектов. В сети есть много обучающего контента, в том числе на русском языке. Для электронной коммерции есть отдельный плагин. Некоторые компании предлагают хостинг с уже предустановленной WordPress. Основной недостаток: из-за популярности её часто пытаются взломать.

Важно! WordPress есть как бесплатное ПО, которое можно установить на сервер (о нём шла речь выше). А есть как SaaS-решение, фактически — платный конструктор.

Joomla — вторая по популярности CMS в мире. Работать с ней не намного, но сложнее, чем с WordPress. Шаблонов, обучающего контента, плагинов и расширений тоже много, часть плагинов платные. В основном используется для сайтов электронной коммерции и социальных сетей. Менее дружелюбна к SEO.

    ,
  1. U.K National Crime Agencyи, .

Drupal — ещё одна популярная CMS. Веб-дизайнеры говорят, что она сложнее WordPress, но и шире по возможностям. Новичок вряд ли разберётся, зато профессионал сможет писать свои модули. Считается, что Drupal безопаснее, поэтому обычно Drupal используют для создания корпоративных сайтов и интернет-магазинов. Есть плагин для электронной коммерции.

PrestaShop — бесплатная CMS для интернет-магазина. Можно не только выбрать лого и тему из дизайнерских шаблонов, но и управлять продуктами, заказами, пользователями и отслеживать статистику.

Конструктор или CMS: на чём лучше создать сайт

Всё зависит от ваших целей. С конструктором проще, а CMS даёт больше возможностей при меньших затратах.

Работать с конструктором проще

Если выберете CMS, вам придётся сначала оплатить хостинг и доменное имя, потом установить CMS на хостинг и привязать домен. Сделать это можно без специальных знаний, но понадобится время.

При использовании конструктора всего этого делать не нужно, нужно только зарегистрироваться в выбранном сервисе — домен второго уровня и хостинг вам будет предоставлен бесплатно (на первых порах).

2. Выбрать шаблон.

3. Добавить контент.

1. Оплатить хостинг.

2. Оплатить домен.

3. Установить CMS на хостинг.

4. Выбрать шаблон.

5. Добавить контент.

После установки CMS настройка контента на ней будет выглядеть примерно так же, как на конструкторе: есть шаблоны, темы, работать можно в режиме драг-энд-дроп. Но настройка сайта и другие моменты всё равно будут различаться. В случае с движком может понадобиться настройка сервера.

Конструктор менее гибкий

Делать сайт на конструкторе — это как арендовать готовый дом или комнату и обставлять своей мебелью. На CMS — это как строить дом из готовых блоков. В зависимости от целей может подойти тот или другой вариант.

Один сайт можно сделать и забыть. Например, страничку художника. Другой сайт нельзя сделать и забыть. Например, интернет-магазин. Со временем надо будет добавлять контент и возможности: формы для сбора контактов, блог, поддержку. Потом захочется привлечь аудиторию из поиска, придётся оптимизировать сайт под поисковики. Потом сайт вырастет и понадобится перенести его на другой хостинг или даже на выделенный сервер.

В случае с CMS сделать всё это можно без проблем, а с конструктором могут быть сложности. За расширение его возможностей надо платить. В код залезть нельзя — он закрыт. За SEO-оптимизацию тоже надо платить, и возможности ограничены. А перенести куда-то созданный на конструкторе сайт вообще нельзя (на редких сервисах можно, но за деньги).

В перспективе сайтбилдер обойдётся дороже

При выборе CMS сразу надо платить за хостинг и домен. При выборе конструктора — ничего. Но если сайт будет расти, то в первом случае вам не придётся платить (на хостинге есть запас места, шаблоны и модули для CMS бесплатные), а во втором — придётся.

В самых популярных сайтбилдерах в бесплатный тариф входит до 500 Мб места на хостинге. За расширение надо платить, за домен тоже. В случае с CMS вы сами выбираете, где купить хостинг и домен. Месячная подписка на конструктор стоит от 4 долларов в месяц, средняя подписка, содержащая все необходимые функции, от 12 долларов. Стоимость хостинга начинается от 200 рублей за 20-30 Гб, домена — от 200 рублей в год.

Если сравнить реальные тарифы, стоимость хостинга с WordPress почти вдвое дешевле, чем стоимость сайтбилдера. Но если вы готовы платить, а тратить время на разработку не готовы, конструктор — лучшее решение.

Бесплатные тарифы конструктора подойдут для портфолио или сайтов-визиток. Если вы готовы платить, то использовать сайтбилдер вполне оправданно и для интернет-магазинов, и для крупных порталов.

Если хотите создать сайт бесплатно, то выбирайте CMS. Этот инструмент даёт большую гибкость при меньших затратах, но требует времени.

Хостинг и CMS как универсальное решение

Если вы решили отказаться от сайтбилдера, то вот вам полная инструкция, как создать сайт с нуля на CMS. Сначала нужно купить домен и хостинг, а потом установить CMS. Мы будем использовать WordPress как наиболее универсальный движок для создания сайта.

Купите домен

Купить домен можно у одного из сертифицированных регистраторов, а можно у хостинг-провайдера. Иногда покупать у хостинг-провайдеров удобнее, потому что не надо искать другие сервисы, дополнительно регистрироваться и вводить платёжные данные. Один раз зарегистрировались и привязали карту, — покупаете и хостинг, и домен.

  1. Выберите подходящий домен у Reg.ru, Ru-Center, GoDaddy, NameCheap, другого регистратора или вашего хостинг-провайдера.
  2. ПО для размещения сайтов,
  3. Оплатите. Домены стоят от 200 рублей, некоторые могут быть дороже из-за спроса, но в среднем цены не превышают 1000 рублей. В зонах .RU и .COM многие домены уже заняты, свободнее в зоне .РФ и тематических зонах вроде .SITE, .STORE, .EDU и др. Домен покупается на один год, потом его можно продлевать.
  4. Для покупки понадобится указать ваше имя и фамилию, адрес электронной почты, телефон. Обязательно нужны данные паспорта, физический и почтовый адрес.
  5. После покупки домена надо настроить сервера имен (Name server, NS). Они нужны, чтобы браузеры могли по доменному имени находить IP-адрес вашего сайта и сайт был доступен в сети. Без настройки серверов имен сайт не будет доступен. Инструкции по настройке есть у регистраторов или провайдеров.

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

Купите хостинг

Выбирая хостинг, учитывайте, что от него будет зависеть доступность сайта. Поэтому сначала изучите отзывы. Обратите внимание на то, что пишут про качество поддержки и частоту “падений”. Отзывы можно найти как на сборных площадках, так и в группах хостинга в соцсетях.

Выбирая хостинг, смотрите на характеристики. Есть два варианта: купить хостинг с предустановленной CMS или обычный хостинг и установить на него CMS.

Хостинг с предустановленной CMS предлагают многие провайдеры. Выбирая такой вариант, вы фактически получите конструктор, только на своём хостинге и со своим доменом. Это удобно.

Если решите купить обычный хостинг и установить на него CMS, обращайте внимание на характеристики услуги:

  1. объём диска от 1 Гб,
  2. оперативная памятью от 128 Мб,
  3. PHP версии 7.2 или выше,
  4. MySQL версии 5.6 или выше / MariaDB версии 10.0 или выше,
  5. HTTPS,
  6. панель управления ISPmanager.

Крупные провайдеры предоставляют хостинг таких характеристик на самых начальных тарифах стоимостью от 200 рублей.

Если у выбранного вами тарифа другие характеристики, попросите поддержку хостинг-провайдера изменить их или измените сами.

Обычный хостинг или VPS

Хостинг бывает разный. Помимо обычного (его еще называют shared-хостингом), есть хостинг VPS. Если опустить технические детали и обобщить, то различаются они надежностью и ценой. VPS надёжнее, но и дороже обычного хостинга. И еще одна важная деталь: у shared-хостинга нет выделенного IP-адреса. Без выделенного IP-адреса не подключить SSL-сертификат. SSL желательно иметь всем сайтам, а тем, на которые заходит много пользователей или где принимают оплату картами, — обязательно.

Так что если у вас сразу большие планы на сайт — покупайте VPS. Если SSL в ближайшее время не понадобится, берите shared-хостинг. Если что, потом купите IP-адрес или перенесёте сайт на VPS. Подробнее про SSL читайте в разделе Что делать после создания сайта.

Установите CMS на хостинг

Хостинг предоставляется с панелью управления — специальной программой, помогающей управлять хостингом. Мы покажем установку CMS на примере ISPmanager.

Шаг 1. Подготовить хостинг

На этом шаге нужно создать директорию на сервере и привязать к ней домен. Ничего сложного, просто следуйте инструкции.

1. Авторизуйтесь в панели ISPmanager. Если входите первый раз, настройте панель. После этого перейдите в раздел WWW-домены.

2. Нажмите кнопку Создать.

3. Выберите настройки для сайта: введите домен, обязательно включите поддержку SSL, нажмите Ок. Готово!

Шаг 2. Устанавливаем CMS

4. Теперь устанавливаем CMS. Нажимаем Скрипты.

5. Выбираем WordPressБыстрая установка. Подождите, пока скрипт загрузится.

6. Примите условия лицензионного соглашения и настройте хостинг под CMS: создайте новую базу данных и пользователя баз данных (данные сохраните в отдельном файле, потом пригодятся).

7. Установите пароль для WordPress и сохраните в отдельном файле. Выберите язык интерфейса. Нажмите Далее.

8. Нажмите Завершить. Готово!

9. Для проверки перейдите на сайт.

Если открывается заглушка CMS — всё сделано верно.

Шаг 3. Настройка CMS

Теперь надо перейти в панель администратора CMS, выбрать дизайн и добавить контент.

1. Перейдите по адресу вашего сайта. Откроется приветственная страница WordPress. Нажмите Log in или Войти. Используйте логин и пароль, сгенерированные при создании CMS.

2. Если авторизация прошла успешно, откроется админка WordPress.

3. В блоке Welcome to WordPress нажмите изменить тему. В открывшемся окне нажмите Темы WordPress и выберите подходящую для вас тему. В списке 3700 шаблонов, чтобы сориентироваться, используйте фильтр (кнопка в правом верхнем углу).

4. Выберите подходящую тему, установите её и настройте. После этого шаблон можно наполнять своим контентом, менять расположение элементов и т. д.

Что делать после создания сайта

После выбора шаблона сайт надо наполнить контентом, потом подключить почту и SSL-сертификат.

Контент

Контент должен выполнять задачи, которые вы ставили в самом начале: продавать, рассказывать, развлекать. Если будете создавать контент сами, следите за его уникальностью и полезностью. Уникальность поможет продвинуться в поисковиках, а полезность — заслужить доверие аудитории.

Старайтесь писать кратко и грамотно, не копируйте тексты с других площадок.

  1. Для проверки орфографии используйте поиск по Gramota.ru или сервисы LanguageTool и Яндекс.Спеллер.
  2. Для проверки уникальности текстов: Text.ru или Advego
  3. Для проверки качества: Главред и Тургенев.

Используйте свои иллюстрации или изображения, которые распространяются по лицензии Creative Commons. Прежде чем взять фотографию, проверьте, не запрещает ли её лицензия коммерческое использование. Перед загрузкой сожмите картинку, чтобы она не замедляла сайт.

  1. Бесплатные иллюстрации: Unsplash, Pixabay, Little Visuals, Picjumbo, Snapographic, Life of Pix, Foodie’s Feed, Stokpic.
  2. Платные фотостоки с библиотекой бесплатных изображений: Shutterstock и Depositphotos.
  3. Сервисы для сжатия изображений: Optimizilla, TinyPNG.

SSL-сертификат

Когда вы только создадите сайт, при переходе на него может появляться уведомление “Подключение не защищено”. В разных браузерах это уведомление выглядит по-разному.

Это уведомление появляется, потому что нет SSL-сертификата. Подробнее см. в нашем гайде для Texterra: Нужен ли SSL-сертификат и как его получить.

SSL-сертификат можно купить, а можно получить бесплатно. Бесплатный SSL-сертификат подходит для страниц, которые не собирают платёжные данные и другую чувствительную информацию пользователей. Подробнее см. раздел Как выбрать SSL.

Если вы используете ISPmanager, подключить SSL можно в несколько кликов. Инструкция по получению бесплатного SSL-сертификата от Let’s Encrypt:

Подключение доступно только для сайтов на VPS, так как для SSL нужен уникальный IP-адрес, а на shared-хостинге он один на несколько сайтов. Выделенный IP-адрес можно купить.

Продвижение

Каким бы хорошим ни был сайт, если на него никто не заходит, в нём нет никакого смысла. Но продвижение сайта — тема для не меньшей по размеру статьи, поэтому здесь опишем только базовые действия и укажем источники, изучение которых поможет сделать сайт посещаемым.

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

На позиции в поиске влияют: структура сайта, контент, юзабилити, технические настройки (скорость загрузки, безопасность) и т. д. Начните с регистрации в панелях для веб-мастеров от Яндекса и Google — Яндекс.Вебмастере и Инструментах для вебмастеров. Там отражается информация о состоянии сайта и есть рекомендации по улучшению его позиций в поиске.

Другие сайты

Ещё один способ доступа к аудитории — рассказать о себе на других сайтах, чтобы о вас узнало как можно больше людей. Посмотрите проекты смежных тематик и попробуйте предложить их владельцам интересный контент со ссылкой на вас. Добавьте информацию о себе в справочники. Создайте страницы в соцсетях и регулярно обновляйте там информацию.

Самый быстрый способ рассказать о себе — реклама. Используйте контекстную или медийную рекламу. Можно покупать напрямую у Яндекса и Google. Можно использовать услуги посредников, интернет-агентств или веб-студий. Если использовать неграмотно, есть опасность “слить” бюджет, так что не жалейте времени на изучение особенностей контекстной рекламы.

Как сделать сайт без движка: изучаем Lektor — статический генератор веб-сайтов

Как человеку, который застал примитивный веб-дизайн девяностых, мне странно видеть, что теперь для любого сайта ставят полноценный движок. WordPress, Drupal, Joomla и прочие популярные CMS рассчитаны на тысячи страниц и поддержку ресурса силами целой команды. Но зачастую их используют, чтобы сделать персональный блог или даже сайт-визитку. Стоит ли городить огород, если всё, что нам нужно — это публиковать статический контент?

Если избавиться от движка и класть на сервер только HTML, то это значительно снизит потребление ресурсов, сделает сайт быстрее, ну и, конечно, упростит (вернее, упразднит) настройку и обновление серверного софта. Можно будет спокойно переходить на хостинг попроще и экономить деньги, а в случае чего в момент мигрировать на другую площадку. Ну и, конечно, такой сайт невозможно будет взломать, ведь взламывать в нем нечего.

Если ты вдруг подумал, что я предлагаю тебе уподобиться пещерным людям и вручную делать каждый .html, то ты ошибаешься. Современный способ иной: запустить CMS на локальной машине, а на сервер выкладывать только статические файлы. Это оставляет возможность пользоваться шаблонизатором: если тебе понадобится поменять что-то в теме, то править каждую страницу не придется.

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

В 2013 году в «Хакере» уже публиковалась подборка статических блогогенераторов, статья называлась «Просто пиши». Однако с тех пор прошло много времени и не все перечисленные проекты до сих пор поддерживаются. К тому же в этом классе программ появились новые лидеры. Среди движков на Node.js популярен Hexo, а поклонникам Ruby рекомендую глянуть на Jekyll.

Здесь же мы рассмотрим работу с движком Lektor, который написан на Python и сочетает в себе простоту, удобство и расширяемость, а также обладает вебовой админкой. Запустив локальный сервер, ты сможешь просматривать и редактировать сайт так, будто ты работаешь с полноценной CMS. Закончив редактировать, ты одной командой сможешь синхронизировать изменения с копией на сервере.

Lektor — это новый проект Армина Ронахера, автора популярного минималистичного веб-фреймворка Flask и языка шаблонов Jinja2. Собственно, в Lektor, как и во Flask, используются шаблоны Jinja, и именно в них — вся сила «Лектора».

Ставим Lektor

Команда установки Lektor написана прямо на главной странице сайта. Если у тебя macOS или Linux, то ты можешь просто скопировать ее в командную строку и запустить:

Аналогичная команда есть и для Windows, она заметно длиннее.

Девиз Lektor: «Реализовать идеи просто, как пожарить яйцо», отсюда и яичница на главной странице

Девиз Lektor: «Реализовать идеи просто, как пожарить яйцо», отсюда и яичница на главной странице

Ещё тебе нужно убедиться, что в системе есть Python 2.x и библиотека Imagemagick. В Ubuntu все зависимости ставятся одной командой:

В Windows и macOS для установки Imagemagick тебе сначала понадобится поставить пакетный менеджер — Chocolatey или Homebrew соответственно. Кстати, для macOS у Lektor есть десктопное приложение, которое само установит тебе утилиты командной строки — нужно лишь выбрать пункт меню Install Shell Command.

Если же ты собираешься модифицировать сам Lektor, то разработчики рекомендуют ставить версию с GitHub и создать виртуальное окружение (в других случаях оно не нужно). Руководство ты найдешь на странице проекта.

Разбираем простой проект

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

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

В последнем случае к тестовому проекту будет добавлена страница с постами и шаблон для них. Рекомендую согласиться — лишние примеры не повредят.

Сайт getlektor.com — отличное пособие по Lektor сразу в двух смыслах: во-первых, там есть документация, во-вторых, этот сайт сам сделан на Lektor и в нем использованы некоторые неочевидные трюки. Так что в его исходниках всегда можно что-нибудь подсмотреть.

Чтобы глянуть, на то, что у тебя вышло, пиши lektor server . Запустится локальный сервер, при помощи которого можно тестировать сайты. Обычно он доступен по адресу http://127.0.0.1:5000/ .

Вот, как будет выглядеть тестовая страница.

Обрати внимание на карандаш в правом верхнем углу — это ссылка на редактирование страницы в админке.

Продолжение доступно только участникам

Вариант 1. Присоединись к сообществу «Xakep.ru», чтобы читать все материалы на сайте

Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», позволит скачивать выпуски в PDF, отключит рекламу на сайте и увеличит личную накопительную скидку! Подробнее

Как создать сайт бесплатно

Во время компьютерных курсов весной 2020 года мои 11-летние дети за несколько занятий сделали сайт-портфолио .

Я подумала: «Если это так просто, то смогу и я». Опыта в программировании у меня нет, но я люблю эксперименты, и у меня есть детская методичка по созданию сайтов. В статье расскажу, как создала свой личный сайт-блог .

Создание сайта — эксперимент для меня

Я частный инвестор и автор статей Т—Ж на околоэкономические темы. Эта статья, как и создание своего сайта — мой эксперимент и личный опыт.

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

Как определить, какой сайт нужен

Сайт — это документы, размещенные в интернете. Документы называются веб-страницами, они объединены ссылками, и у них общая структура. Каждая страница написана на языке программирования и с помощью разметки. Упрощенно это называют кодом сайта или просто кодом. Самые распространенные языки программирования — PHP и JavaScript.

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

Лендинг — это целевой одностраничный сайт. Еще его называют посадочной страницей или промостраницей. Как правило, лендинги строятся по одинаковой схеме: броский заголовок, информация о товаре или услуге, фотографии и одна или несколько форм обратной связи. Чаще всего лендинги используют для рекламных кампаний.

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

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

Корпоративный сайт — это многостраничный и многоуровневый сайт, где можно найти полную информацию о фирме, ее руководстве, продукции, истории. Корпоративные сайты привлекают новых клиентов и удерживают старых.

Информационный сайт — это сайт с последними новостями. Как правило, здесь много текстовых статей.

Социальная сеть, форум — это многостраничный сайт, на котором пользователи размещают короткие посты и обмениваются сообщениями. Обычно такие сайты можно прокручивать бесконечно, потому что опубликованных постов очень много.

Интернет-магазин — это многоуровневый, многостраничный сайт, похожий на обычный магазин. Сначала клиент находит нужный товар и его описание, а потом может купить его и оформить доставку или самовывоз. Еще бывают интернет-магазины на площадках соцсетей.

Онлайн-сервис — это сайт с какими-либо услугами. Например, на портале госуслуг можно оформить загранпаспорт, сделать прописку, записать ребенка в школу или к врачу. Этот сайт упрощает жизнь и позволяет уменьшить количество личных визитов во всякие ведомства.

Услуги могут быть разные: поисковые, банковские, социальные. Такие сайты создавать дорого и, как правило, ими занимаются профессионалы.

Способы создания сайта

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

Самостоятельно написать сайт в HTML может быть сложно, потому что нужно знать язык.

HTML — это язык гипертекстовой разметки. Его разработал и опубликовал в 1993 году Тим Бернерс-Ли . На этом языке создавались первые сайты, когда появился интернет, и сейчас его тоже используют для разметки.

С помощью тегов HTML описывает, что есть на странице: картинки, текст, таблицы или видео. А стили описывают, как все это выглядит.

HTML-страницы статические и ссылаются друг на друга. Чтобы обновлять такой сайт, надо менять HTML-страницы — это может быть сложно и долго.

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

Содержимое таких сайтов хранится в базах данных. Посетители видят сайт так, как настроено в шаблонах. Сайты получаются динамическими. Их можно обновлять и изменять в текстовом редакторе.

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

Стоимость создания сайта

Стоимость сайта зависит от сложности разработки, стоимости хостинга и домена и затрат на продвижение.

Хостинг — это веб-сервер, где будет находиться сайт. Люди живут в квартирах и домах, а сайты живут на хостингах. Он может быть в любой точке земного шара. Домен — это адрес сайта — уникальная последовательность цифр, дефиса и букв.

Над классным сайтом работает целая команда специалистов: программист, дизайнер, разработчик интерфейсов, специалист по продвижению. Поэтому разброс цен может быть значительным.

Можно ли сделать сайт бесплатно и в каких случаях. Личный сайт можно создать бесплатно самостоятельно или по дружбе, если близкий человек или знакомый делает сайты.

На что важно обратить внимание при создании сайта

Сайт требует времени и денег. Придется разбираться в продвижении, правильных подписях картинок, заголовках для поисковой системы и оптимизации. Поэтому важно предварительно оценить свои знания и возможности. Вот на что надо обратить внимание.

Назначение сайта — зачем нужен сайт и что изменится после того, как он появится. Если сайт нужен для души и экспериментов, его можно бросить в любой момент. Такой сайт не предназначен напрямую для заработка. А, например, интернет-магазин нужен для увеличения продаж и получения прибыли. Такой сайт поддерживать сложнее, и хочется хотя бы окупить затраты на его создание.

Целевая аудитория — это люди, которым может быть интересен определенный товар или услуга и которые готовы его купить. Людей из целевой аудитории, как правило, связывают какие-то общие характеристики или признаки.

Например, Наташа продает профессиональные средства для маникюра и педикюра. Ее целевая аудитория — женщины от 20 до 50 лет, которые работают мастерами маникюра и педикюра.

Еще товары Наташи могут быть интересны женщинам, которые сами себе делают маникюр и педикюр. Но что-то покупать они будут реже и в меньших количествах.

Если товары и сервис понравятся, то самые активные покупатели будут возвращаться к Наташе снова и снова и рекомендовать ее своим знакомым.

Целевую аудиторию можно искать на форумах, тематических сайтах, в социальных сетях, салонах красоты или мебели, мастерских и так далее. Также в интернете есть сайты по поиску целевой аудитории, например «Таргетхантер».

Геотаргетинг — это выборка людей по их местонахождению для того, чтобы показывать им сайт.

Если Наташа работает и живет в Санкт-Петербурге, то отправлять лаки почтой в Хабаровск, скорее всего, будет невыгодно. Поэтому продвигать сайт ей эффективнее в Санкт-Петербурге и Ленобласти или в тех регионах, где плохо с поставкой товаров для маникюра и педикюра.

Будет ли SEO-оптимизация. SEO-оптимизация — это постоянные действия с сайтом, которые позволят поисковым системам типа Гугла или Яндекса показывать его при определенных запросах.

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

Подбор домена

Зарегистрировать доменное имя можно в любое время, даже без сайта, — просто чтобы его никто не занял. Раньше имена сайтов могли быть только на латинице, но сейчас можно выбрать название и русскими буквами.

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

Еще важно учитывать домен верхнего уровня — это окончание, которое прибавляется к названию сайта после точки. Например, .org — международные некоммерческие организации, .net — телекоммуникации, .ru и .рф — это российские домены.

Можно предварительно проверить, не занято ли нужное название с помощью сервиса Whois.

Где купить. Я купила домен у аккредитованного независимого регистратора до того, как выбрала хостинг, потому что хотела точно быть владельцем и администратором домена. Аккредитованных регистраторов много, я выбрала первого из Санкт-Петербурга.

Если регистрировать домен через хостинг-провайдера, то придется проверять, принадлежит он вам или провайдеру.

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

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

Можно ли зарегистрировать бесплатно. Домен можно зарегистрировать бесплатно, например, при аренде хостинга или не в зонах .ru и .рф. Если вы получаете домен в подарок, лучше проверить, кому принадлежит имя по договору.

Подбор хостинга

Хостинг измеряется дисковым пространством на сервере, то есть мегабайтами и гигабайтами. Для профессионалов еще важны вычислительная мощность и объем памяти. Конечно, можно купить весь сервер, но это дорого, поэтому чаще всего хостинги арендуют. На хостинг сайт размещают после того, как зарегистрирован домен. Если домена нет, то придется заходить на сайт по IP-адресу .

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

Как выбрать хостинг. У меня нет опыта в выборе хостинга. Я нашла в интернете статистику по популярности различных хостингов и просто выбрала самый крупный.

Если хостинг не нравится, его можно сменить, поэтому лучше не оплачивать его вперед надолго без тестирования. Обычно у всех хостингов есть тарифные планы.

Еще хостинг можно выбрать под конкретную CMS, чтобы было меньше проблем с установкой. На официальных сайтах некоторые CMS рекомендуют подходящие хостинги. А конструкторы сайтов предлагают облачный хостинг — вместо одного конкретного сервера сайт раздается с их кластера, чтобы распределить нагрузку.

Чем платный хостинг отличается от бесплатного. На бесплатном хостинге обязательно будет реклама, а сайт могут удалить без предупреждения. Скорость загрузки может быть низкой, а служба поддержки может отвечать медленно. Бесплатные хостинги могут не поддерживать базы данных, которые нужны для работы CMS.

Кроме того, название бесплатного хостинга, скорее всего, будет в названии сайта. Например, traderfeed.blogspot.com — это сайт известного психолога для трейдеров, но в названии кроме «traderfeed» есть еще и «blogspot.com».

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

Лучшие CMS

Первые CMS появились в 2000-е годы, тогда они умели управлять всего одним сайтом. Потом они стали более универсальными — их можно настроить для конкретной задачи. Часто CMS называют движком сайта.

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

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

Например, если в будущем Наташа захочет создать интернет-магазин и продавать средства для маникюра, возможно, ей стоит обдумать интеграцию сайта, платежной системы и бухгалтерской программы 1С. Для этого подойдет «Битрикс».

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

Проверить, какой движок стоит на сайте, можно на W3techs. Только надо помнить, что не все сайты используют CMS.

Допустим, Наташе нравится, как выглядит сайт интернет-магазина «Красотка-про» . Тогда можно попробовать сделать что-то похожее на такой же системе управления сайтом.

WordPress — бесплатная платформа. Изначально она задумывалась для создания блогов, но на ней можно реализовать любой тип сайта. Т—Ж изначально тоже был на «Вордпрессе».

Есть два варианта сайтов на «Вордпрессе»:

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

«Вордпресс» очень хвалят за виджеты и плагины. Виджеты — это специальные инструменты, которые выполняют какую-либо функцию. Например, считают лайки к статье или позволяют поделиться ей в соцсети. С их помощью можно также показывать важную информацию на заметном месте.

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

Bitrix — платная модульная платформа, заточенная под взаимодействие с 1C. Например, интернет-магазин получает данные о ценах, скидках и остатках товаров из 1С, а 1С, в свою очередь, получает данные о заказах, покупателях и платежных системах из интернет-магазина. Обмен данными может происходить по расписанию или в режиме реального времени.

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

«Битрикс» отличают от других CMS-интеграция с 1C, высокая защита от взломов и встроенный антивирус. Но он требует много ресурсов для работы. На сайте «Битрикса» даже есть контакты компаний-разработчиков, у которых можно заказать разработку сайта на этой платформе.

ModX. На официальном сайте пишут, что для установки и настройки сайта с помощью этой CMS надо знать основы веб-разработки . А чтобы работать с сайтом, созданным на ModX, достаточно уметь пользоваться «Вордом». Разработчики на форуме хвалят гибкость платформы и возможность создать совершенно непохожие друг на друга сайты.

Joomla — бесплатная платформа для создания информационных ресурсов. На ней можно сделать неограниченное количество страниц, при этом содержимое сайта можно легко менять, потому что существует много шаблонов.

Мэрриотт и Уоринг в учебнике «Joomla 3.0! Официальное руководство» пишут, что создать сайт с помощью этой платформы можно меньше чем за два часа. Но, скорее всего, такой поспешный результат будет далек от совершенства. В руководстве на примере очень простых тестовых сайтов разобран рабочий процесс — от установки до дизайна, продвижения и выбора хостинга.

Drupal. В этой CMS нет единой системы оформления — каждый пользователь может оформить сайт на свой вкус. Работа сайта организуется не так, как в Joomla.

«Друпал» — более гибкая, но более сложная система управления сайтом. Она больше подходит тем, у кого есть опыт программирования. Систему можно расширить за счет стандартных модулей, но придется разбираться в коде.

Инструкция: как создать сайт при помощи CMS на примере WordPress

Шаг 1. Установить CMS на хостинг. После того как я оплатила хостинг и добавила туда свой домен, мне надо было установить выбранную CMS.

Я остановилась на «Вордпрессе», потому что на нем разработано больше всего сайтов.

При установке система пришлет пароль и логин для входа — их надо сохранить. После этого можно попасть в консоль управления сайтом, если ввести в строке браузера http://название сайта/wp-admin/.

Шаг 2. Настроить сайт через консоль. Консоль — это пункт управления сайтом. Через консоль можно менять дизайн и меню, добавлять записи, загружать медиафайлы, анализировать активность, обновлять плагины. Все, что можно сделать с сайтом, делается через консоль.

Я поменяла электронный адрес администратора, формат даты и настроила часовой пояс.

Шаг 3. Выбрать темы/шаблоны для сайта. Это можно сделать в консоли, если нажать на кнопку «Настройте свой сайт» или выбрать вкладку «Внешний вид».

Шаблоны — это набор служебных файлов, которые организуют дизайн и стиль страниц сайта. Их можно менять как угодно часто, но каждый раз надо будет настраивать меню, а пользователям придется привыкать к новому дизайну. Можно использовать свои шаблоны или изменить HTML-код уже существующих, если есть опыт. Шаблоны от одной CMS не подходят для другой.

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

Сначала можно почитать описание темы, а потом уже устанавливать. Скачанные темы останутся в консоли — позже их можно будет удалить. Выбранную тему тоже надо настроить: добавить меню, изменить цвета или фон.

Шаг 4. Добавить меню и название сайта. Это можно сделать через кнопку «Настройте свой сайт» или через вкладку «Внешний вид» в меню консоли.

Можно создать не одно меню, а разные варианты, например, для мобильных и стационарных устройств или для подвала страницы.

Шаг 5. Подобрать и добавить контент через консоль. В больших проектах за контент отвечает контент-менеджер или специально обученный человек. У меня проект маленький и некоммерческий, поэтому свой сайт я буду заполнять сама.

Записи добавляются по одному и тому же принципу — в меню надо нажать на «Добавить новую запись». При этом надо выбрать нужную страницу или рубрику, если их несколько. Ничего сложно в наполнении сайта нет, но это монотонная и однообразная работа, поэтому подойдет не всем.

Размер шрифтов, цвет, расположение текста можно менять в текстовом редакторе. Там же можно вставлять картинки и видео.

На сайте информация появится после того, как нажмете кнопку «Обновить» или «Опубликовать». Все редакции сохраняются, поэтому можно вернуться к предыдущей версии.

Можно настраивать видимость записей: для всех пользователей, только для тех, кто знает пароль, или только для себя.

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

Лучшие конструкторы сайтов

Конструкторы похожи на CMS, но еще проще. Можно наполнять сайт прямо через браузер — никаких дополнительных программ устанавливать не надо.

Как правило, конструкторы работают по технологии SaaS — «software as a service» — то есть одновременно с конструктором предоставляется и облачный хостинг. Чаще всего существует бесплатный пакет шаблонов или тестовый период, который можно продлить и оплатить, если сервис понравился.

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

Wix — этот конструктор изучали мои дети на курсах, поэтому субъективно он мне ближе и понятнее. На страницах сайта можно разместить фото, видео, презентации, документы и игры.

Можно создать сайт бесплатно, но можно воспользоваться и платными подписками. В бесплатном варианте будет некрасивое доменное имя. Например, в моем случае — julsemen.wixsite.com/название сайта.

UKit — платный российский конструктор сайтов, но есть тестовый период 14 дней. Никакого кода для создания сайта не надо. Хостинг тоже не нужен: облачный входит в подписку.

В эту же группу входит UCoz. Это система управления сайтами и хостинг для сайтов, созданных на «Юките». Код закрытый, базы данных подключать нельзя, много навязчивой рекламы.

Tilda Publishing — модульный конструктор. Один сайт можно сделать бесплатно, но для работы будут доступны не все блоки и нельзя будет использовать свой домен. Также нельзя создать интернет-магазин , принимать оплату на сайте, а вопросы в службу поддержки останутся без ответа.

1C-UMI. В этом конструкторе есть четыре бесплатных вида сайта и различные платные варианты. В бесплатных вариантах, как и везде, есть ограничения — размер дискового пространства, имя сайта, реклама.

В «Юми» есть интеграция с 1С и «Яндекс-деньгами» , то есть можно создать интернет-магазин и принимать оплату.

Weebly для пользователей из России не работает, и сайт не открывается. Судя по отзывам, на нем можно создать бесплатный сайт или блог. Этот конструктор популярен в США и Европе.

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

Инструкция: как создать сайт в конструкторах на примере Wix

Шаг 1. Нажать кнопку «Создать сайт». Сайт, конечно, сразу не появится — сначала придется пройти еще несколько шагов.

Шаг 2. Войти через аккаунт в соцсети или зарегистрироваться как новый пользователь. Я выбрала вариант «Продолжить с Google», поэтому в названии моего бесплатного сайта появилась часть электронного адреса — «julsemen».

Шаг 3. Выбрать тип сайта. «Викс» предлагает 12 категорий, например бизнес, интернет-магазин или портфолио и резюме.

Шаг 4. Выбрать, как создавать сайт. Конструктор предлагает создать сайт с помощью искусственного интеллекта или в редакторе. Я предпочла редактор, поэтому нажала кнопку «Выбрать шаблон». Сайт будет задавать вопросы и по ответам подберет дизайн.

Шаг 5. Выбрать шаблон. Готовые шаблоны «Викса» меня не устроили, хотя их много. Я выбрала пустой шаблон, потому что хотела все настроить самостоятельно.

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

Шаг 6. Сохранить выбранный шаблон и выбрать домен. Чтобы работа не пропала из-за технических неполадок, сайт лучше сразу сохранить. Это можно сделать на бесплатном домене «Викса» с некрасивым и длинным именем или использовать собственный.

Сохраненный сайт не появится в интернете, а будет лежать в разделе «Мои сайты».

Шаг 6. Заполнить сайт в редакторе и опубликовать его. На этом этапе можно добавлять и переименовывать нужные страницы сайта, менять фон и шрифты, добавлять меню, картинки и видео.

Чтобы сайт появился в интернете, надо нажать кнопку «Опубликовать».

Мои впечатления от эксперимента

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

В целом я довольна экспериментом: теперь у меня есть личный сайт, и в будущем я могу использовать его для продвижения своих услуг и так начать зарабатывать. Но для этого надо будет им заниматься — тратить время и деньги.

Кроме того, в ходе эксперимента я познакомилась с конструкторами сайтов и CMS и в принципе могу добавить в резюме строчку: «Умею создавать сайты в конструкторе и на „Вордпрессе“». Теперь я могу обучать работе в конструкторе детей и начинающих пользователей. С «Вордпрессом» все сложнее — я пока не чувствую себя уверенно.

С другой стороны, в списке моих приоритетов сайт находится на последнем месте, поэтому времени и сил на него мало. Чтобы сайт попал в поисковые системы, контент надо обновлять, уделять отдельное внимание описаниям, размеру шрифтов, подписям картинок — у меня все это пока только в планах.

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

Юлия Семенюк

Загрузка

Artem Simonenkov

Никогда и не прикаких обстоятельствах не используйте конструкторы Wix и Ukit. невероятно убогие и неповоротливые конструкторы. Если использовать конструктор, то однозначно Tilda. Невероятно простой и понятный конструктор. А еще — красивый! Единственная проблема Tilda — нет полноценной поддержки личных кабинетов для посетителей вашего сайта. Но и не везде оно нужно конечно же.

Юлия Семенюк

Artem, тильдой не пользовалась, а викс мне лично понравился. Видимо, на вкус и цвет все фломастеры разные 🙂 но другие мнения — это круто!

Надо сперва повертеться в создании сайтов. Научиться:

либо дизайну за пару месяцев — youtube.com/channel/UCD2oiYqLVHUocIDh9iiDFIg/about. Заработок 40 000 р.;

либо верстке за несколько дней — imdiz.ru. Заработок 50 000 р.;

либо PHP за полгода или за год — php-start.com. Заработок 80 000 р.

Поработать в этой сфере пару лет, заработать денег, понять как создаются сайты, как они продвигаются. А потом создавать свой сайт и зарабатывать на нем.

Так проще и правильней.

Artem, а почему такое недовольство от ukit? Вроде нормальный конструктор
Делал на нем несложные проекты, все остались довольны

Попытка зачет! Отличный результат для новичков, но в статье есть кое-какие недочеты. Позвольте немного дополнить.
Например, классификация сайтов — она очень приближенная, так как есть и много других вариантов, например, вики сайты, порталы поиска работы, сайты объявлений, знакомства и другие варианты. Список не исчерпывающий.
Далее, сейчас почти на любой CMS можно сделать любого типа сайт. Тот же Друпал стал практически CMF — content manage framework, то есть, платформой для создания CMS, если грубо. И именно потому она популярная у профессионалов, так как дает больше свободы и возможностей в плане создания сайтов. Также можно использовать CMF типа Laravel или Yii.
То же касается и языков для создания — есть варианты делать сайты на Ruby, Python, Java, Rust, С#, есть даже уже мертвый, но еще используемый Flash.
Можно сделать магазин на WordPress — есть для этого специальные плагины, также есть плагины для интеграции с платежными системами и 1С. Ведь часто интернет-магазину, кроме витрины, нужны справочные разделы, раздел поддержки и т.д., вот тут может пригодиться плагин форума, например, к Joomla или OpenCart(она же O-store). Интеграция с 1С есть сейчас у почти всех серьезных систем.
Что касается популярности Битрикс — она преувеличена. Просто они принадлежат 1С, потому и более известны. На самом деле, это способ студий зарабатывать не только на изготовлении сайта, но и на лицензиях Битрикса. Ничего особенного, да и по производительности она уступает многим беcплатным CMS. И интеграция с 1С — есть конкурирующие продукты с куда лучшей синхронизацией.

И не все CMS требуют базы данных, есть много продуктов, которые могут работать без каких-либо баз данных, а хранить информацию в текстовых файлах или XML формате. Такие системы могут работать даже на бесплатных хостингах.

Регистратор не может быть неаккредитованным. Либо он тогда простой ресселер. И большинство регистраторов — "карманные", например, Мастернейм или Рамблер. У таких цены могут быть ниже, но поддержка хуже, дольше идет делегирование (направление на ip, где находится указанный домен), панель менее функциональная и т.д.
Кстати, часто ресселеры предлагают цены ниже — они покупают домены оптом, и потому могут предложить цены намного вкуснее. И было такое, что ресселеры были надежнее — регистратор "умирал", как это было с EstDomains, и ресселеры вручную переносили домены к другим, причем так, что клиенты даже не заметили ни минуты простоя.
Наличие аккредитиции хорошо, но еще лучше, если проверить регистратора на сайте ICANN — Internet Corporation for Assigned Names and Numbers. Это некоммерческая организация, которая, по факту, и рулит мировой сетью — распределяет ip сети, управляет доменами верхнего уровня и т.д. Это говорит о том, что регистратор более серьезно относится к бизнесу, меньше вероятности смерти, ну и дает гарантии, что именно он будет держать домен. К примеру, некоторые наши регистраторы не могут регистрировать домены в gTLD зонах (в частности com, net, org, info, org, name, edu, gov и прочие, всего 21), и становятся ресселерами других компаний. На территории России, так исторически сложилось, больше всего контактов было с PDR, регистратором из Индии. Но из-за некоторых тонкостей домены регистрировались не на клиентов, а на ресселеров. Проверить было сложно — whois были закрыты (есть такая штука, как privacy protect, ей часто пользуются пирамиды, чтобы скрыть себя), и клиенты этого не замечали или замечали, но поздно.
И да, зона домена, кроме спец зон, типа aero, travel, pro, давно потерял смысл. Сейчас больше имеет смысл симпатичное имя, например, super-tele.com — вполне себе сайт интернет провайдера, вместо зоны net.

Вообще тема сайтов очень сложная и долгая, надо, наверно, отдельную статью писать. Т-Ж, может, это, напишем?

3 проверенных способа как создать сайт самому в 2022 + подробная инструкция

Как создать сайт бесплатно и самостоятельно с полного нуля не имея технических знаний? Что такое «домен» и «хостинг» и зачем они нужны? Что такое «HTML-сайт», «CMS-система» и «конструктор сайтов» и в чем их ключевые отличия друг от друга?

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

  • Ответы на вопросы

Технические аспекты создания сайта

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

  • с помощью конструкторов сайтов ;
  • с помощью CMS-систем ;
  • путем самостоятельного написания исходного кода сайта.

Давайте рассмотрим каждый из этих способов более подробно. Начнем с того, который, на наш взгляд лучше других подходит для новичков.

Конструкторы сайтов

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

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

Наиболее популярные конструкторы сайтов

  • uKit – лучший конструктор на российском рынке для создания простых и эффективных сайтов своими руками, целится на бизнес-аудиторию: визитки, лендинги, корпоративные сайты с новостным разделом, портфолио и т.п. Здесь легко начать с готовых шаблонов, очень простой и удобный для новичков визуальный редактор, масса действий по продвижению, рекламе, подключению доменов, добавлению аналитики – автоматизирована. Больше деталей и цены подписок – в нашем подробном обзоре uKit + мануал по работе с этим конструктором.
  • Nethouse – конструктор, который отлично подойдет для создания сайтов-визиток, сайтов-портфолио, интернет-магазинов. Он достаточно прост в первичном освоении и дальнейшем использовании. Мы подготовили его подробный обзор, а также пошаговое руководство.
  • Wix – крупнейший игрок с мировым охватом, хорошо локализован для российской аудитории, имеет много профильных инструментов. Правда, с недавних пор наблюдаются проблемы с приёмом оплаты на сайтах интернет-магазинов, она недоступна, и сложно оплатить подписки самого сервиса с карт российских банков. У нас есть отдельный подробный обзор этого конструктора, а также пошаговое руководство по работе с ним. Чем заменить Wix .

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

Простой пример создания сайта

Давайте вкратце пробежимся по этапам создания сайта в конструкторе uKit . Он отлично подойдет для представителей малого бизнеса и новичков, которые не желают погружаться в тонкости создания сайтов. uKit избавит вас от необходимости делать свой первый ресурс на « голом » HTML или разбираться с особенностями работы CMS.

Сам процесс состоит из нескольких понятных и простых шагов, о которых чуть ниже!

Шаг первый – регистрация в конструкторе и вход в аккаунт.
Проходим простую процедуру регистрации, заполнив данные формы либо просто авторизовавшись в одной из популярных соц.сетей (подойдут также аккаунты поисковиков Яндекс и Google).

Определитесь с нужным вам функционалом и выберите подходящую подписку. Стандартные цены uKit – от 2,5 $/месяц. Это с учетом скидок за оплату наперед, от года и более. 14 дней тестирования – бесплатно.

Чтобы получить максимально выгодное предложение по подписке uKit прямо сейчас, воспользуйтесь нашим промокодом: IT-15.

Шаг второй – выбираем шаблон дизайна для будущего сайта.
Конструктор предоставляет в распоряжение пользователей коллекцию из более 350 уникальных бесплатных шаблонов! И это не просто «рыбы», текст и описания в блоках осмысленные, полностью соответствуют тематике. Для сайтов, которые не нуждаются в уникальном контенте, например, при создании лендингов и визиток, останется поменять только контакты.

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

Редактор сайта Ukit

Шаг третий – оформляем и персонализируем сайт.
В первую очередь необходимо дать создаваемому ресурсу уникальное имя ( изначально — это домен третьего уровня, фактически это техническое имя сайта, позже его лучше заменить на свой домен второго уровня, красивый, понятный и запоминающийся ). Стоит отметить, что в случае с ru/рф-зонами, домен даже не придётся настраивать, нужные ресурсные записи внесутся автоматически. Только регистрировать домен необходимо через админ-панель сервиса.

Визуальный редактор uKit позволяет изменять и настраивать любой элемент страницы, вы можете без каких-либо проблем добавлять или удалять разнообразные блоки и виджеты, менять их содержимое и внешний вид (фон, шрифты, анимации и т.п.).

В частности можно:

  • Добавлять на сайт необходимые страницы и наполнять их контентом.
  • Фотогалереи, слайдеры и видеоролики. У uKit нет ограничений по месту на диске – полный безлимит во всех подписках!
  • Разнообразные функциональные элементы, такие как формы, кнопки и меню.
  • Кнопки социальных сетей и специальные виджеты соцсетей (подписчики, участники групп и т.п.)
  • Функционал для ведения блога компании (новостного раздела).
  • Реализовать простой интернет-магазин (без массового экспорта и импорта, но с полноценной оплатой, корзиной и уведомлениями).
  • Получить все необходимые SEO-возможности для продвижения создаваемого сайта – мета-теги, элементы микроразметки, автоматическое сжатие изображений и плавную подгрузку по скроллу (для ускорения отрисовки и повышения ранжирования). Есть даже встроенный SEO-мастер, который автоматически найдёт основные проблемы на страницах и порекомендует действия.
  • Добавить красочный favicon.
  • Разнообразные счетчики и метрики для отслеживания важных параметров и характеристик сайта (подключение аналитики происходит в специальном мастере, никакой код никуда добавлять не нужно, данные отображаются внутри панели управления).
  • И еще множество других модулей под разные задачи – виджеты калькуляторов uCalc, кнопки заказа обратного звонка, онлайн-чаты, прайс-листы, счётчики обратного отсчёта и т.п.

Шаг четвертый – финальные штрихи и запуск.

  • Просмотрите мобильную версию, убедитесь, что вас все устраивает.
  • Проверьте ранее введенные контактные данные, попробуйте работу форм и кнопок в деле.
  • Обязательно сделайте « Предпросмотр » перед запуском сайта. Определитесь с тем, какие блоки показывать в десктопной версии сайта, а какие – в версии для планшетов или для смартфонов.
  • И наконец, нажмите кнопку « Опубликовать », чтобы созданный вами сайт стал частью всемирной паутины и был доступен всем пользователям.

Простой пример создания сайта

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

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

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

CMS-системы

Термин CMS происходит от английского выражения Content Management System и используется для обозначения так называемых «систем управления контентом» (сайтом).

Эти же системы зачастую называют «движками» для сайтов. На сегодняшний день любая CMS-система позволяет управлять всем содержимым сайта с помощью простого и наглядного интерфейса.

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

Топ бесплатных CMS-систем
  • WordPress – отлично подходит для создания блогов, сайтов-визиток, корпоративных сайтов. Кстати, сайт, который вы сейчас читаете, работает на базе именно этой CMS. И мы уже опубликовали руководство, в котором рассказывается о том, как создать сайт на WordPress.
  • Joomla – еще одна многофункциональная CMS-система, которая позволяет создать как простой сайт-визитку или корпоративный сайт, так и полноценный интернет-магазин. Обязательно прочитайте наше руководство, посвященное тому, как создать сайт на Joomla.
  • InstantCms – в первую очередь, этот движок предназначен для создания социальных сетей, городских порталов, а также сайтов знакомств и онлайн-клубов;
  • Drupal — ещё одна популярная CMS-система, которая отлично подходит для создания корпоративных сайтов, сайтов-визиток, а также сайтов-портфолио, социальных сетей и интернет-магазинов;
  • OpenCart –данная CMS-система предназначена, прежде всего, для создания интернет-магазинов. Вместе с тем стоит учитывать, что она проста в использовании, но при этом достаточно сложна в плане разработки. Как показывает практика, для разработки полноценного интернет-магазина на основе этого движка требуется привлечение опытного PHP-программиста.
  • phpBB – отличная CMS-система, предназначенная для создания форумов.
Топ платных CMS-систем
  • « 1С-Битрикс » — мощная и многофункциональная система управления сайтами. Она позволяет создавать и поддерживать интернет-ресурсы практически любого типа. В качестве ключевых особенностей стоит выделить простоту управления созданным сайтом, высокую производительность, интеграцию с 1С ( это очень важный момент для российских интернет-магазинов ), а также обширные возможности мобильного администрирования.
  • UMI.CMS – еще один достойный представитель платных CMS-систем. Девиз его разработчиков — « удобство для людей ». Специально для этого движка было создано 500 уникальных шаблонов, которые подойдут практически для любого сайта и при этом предоставят возможность доработки под каждый конкретный проект. А 2500 разработчиков будут рады помочь вам в создании сайта на основе UMI.CMS и его « затачивании » именно под ваши цели.
  • osCommerce — платная CMS-система, предназначенная для создания современных интернет-магазинов и обладающая богатейшими функциональными возможностями .

Самостоятельное создание сайта

Специально для тех, кто хочет научиться самостоятельно писать исходный код создаваемого сайта, мы подготовили пошаговую инструкцию по созданию простого сайта на HTML. Поехали!

Внимание! Если вы абсолютный новичок или просто не хотите погружаться в работу с кодом и другие технические моменты, можете смело переходить к разделу «Создать сайт с нуля или на конструкторе сайтов? »

Создание HTML-сайта

В качестве первого примера мы создадим простой HTML-сайт , который будет состоять всего из одной страницы. HTML ( HyperText Markup Language — язык разметки гипертекстов ) – универсальный язык, предназначенный для описания веб-страниц. Его задача заключается в том, чтобы указать браузеру, что и как нужно отображать при загрузке страницы в браузере пользователя. Каждый из его тегов описывает фрагмент страницы.

Ниже приводится исходный код простейшей HTML-страницы :

Скопируйте этот код в новый текстовый файл и сохраните его на своем компьютере. Задайте для сохраняемого файла имя index.html . Затем откройте этот файл в любом браузере и посмотрите на результат.

Результат сверстанного макета сайта

Обратите внимание, что по умолчанию любой веб-сервер пытается выдать браузеру именно страницу с названием index.html . Поэтому в 99% случаев исходный код главной страницы сайта сохраняется в файле под таким названием и это считается хорошим тоном.

Полную версию этого простейшего HTML-сайта вы можете скачать в виде архива ( 10,8Mb) . После распаковки архива запускаем html/index.html .

Ключевые этапы создания сайта

Самостоятельное создание сайта с нуля состоит из трех основных этапов:

  • Создание макета сайта . Именно на этом этапе появляется четкое визуальное представление, как будет выглядеть создаваемый интернет-ресурс. Чаще всего используется Adobe Photoshop или другие растровые редакторы.
  • Верстка сайта . На этом этапе приступают к верстке сайта из макета .psd , мобильной адаптации и тестированию на корректное отображение в различных браузерах.
  • Внедрение PHP . На этом этапе сайт превращается из статичного в динамический.

Давайте разберемся со всеми этими этапами более подробно.

Создание макета сайта

Чаще всего макет ( в данном случае под этим словом стоит понимать визуальное оформление ) сайта создается в программах, которые принято называть графическими редакторами. Наиболее популярными являются Adobe Photoshop и CorelDRAW . Мы рекомендуем использовать именно Photoshop , так как он чуть проще в освоении и при этом обладает богатейшими возможностями. Кроме того, именно им пользуются все веб-дизайнеры.

Создаем новый документ в Adobe Photoshop . Задаем ему имя – MySite .

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

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

Затем устанавливаем цвет фона F7F7C5 в шестнадцатеричном формате или выбираем его с помощью палитры цветов.

После этого выбираем пункт меню « Просмотр » – « Направляющие » и активируем отображение линеек и направляющих.

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

Создаем фон будущего сайта

С помощью инструмента « Текст» , вводим текстовое название будущего сайта, слоган под ним, а также контактный номер телефона справа вверху макета.

Создаем шапку будущего сайта

Слева от логотипа и справа от контактного номера телефона проводим направляющие, которые позволят обозначить рамки по ширине сайта.

Затем с помощью инструмента « Формы » создаем прямоугольник с закруглёнными краями ( радиус – 8 точек ) и с его помощью обозначаем место под изображение, которое будет располагаться в шапке сайта.

Создаем верхушку будущего сайта

Теперь пришло время вставить изображение в шапку сайта.

Добавляем заглавную картинку будущего сайта

С помощью инструмента « Текст » , и шрифта Georgia , входящего в стандартный набор операционной системы Windows , создаем навигационное меню и заголовок главной страницы сайта.

Затем, используя инструмент « Текст » и шрифт « Arial » , добавляем текст главной страницы. В данном случае лучше всего использовать блочный текст для последующей работы с ним.

Для заголовка в тексте используем черный шрифт. Для навигационного меню – белый.

Создаем текстовое наполнение сайта

Перемещая правую границу основного текстового блока, вставляем изображение в текст страницы ( справа от текста ).

Используя инструмент « Формы » — « Прямая » , проводим заключительную линию под текстом страницы.

C помощью инструмента « Текст » ( шрифт Arial ) размещаем копирайт в подвале страницы ( под линией ).

Нарезаем необходимые для вёрстки сайта фрагменты изображений с помощью инструмента « Раскройка » ( мы выделили основную картинку в шапке и картинку в тексте страницы ).

Добавляем изображение в контент сайта

В результате проделанной работы мы создали полноценный макет сайта. В случае если вы захотите внести собственные изменения в макет страницы, PSD-файл также можно найти в архиве.

Для того чтобы сохранить и использовать результаты проделанной работы в виде изображений для последующей вёрстки сайта, переходим в меню « Файл » и выбираем пункт « Сохранить для Веб » . Затем настраиваем качество выходных изображений и сохраняем их.

В результате этого мы получим множество графических фрагментов для нашего будущего шаблона. В папке, где был сохранен сам шаблон, появится папка с изображениями ( images ). Отбираем нужные и переименовываем.

Макет страницы создан, необходимые фрагменты получены, можно переходить к верстке.

Верстка сайта

Прежде всего, необходимо создать новый текстовой файл и сохранить его под названием index.html .

Первая строка этого файла должна выглядеть следующим образом:

Она сообщит браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:

Пара тегов <html>…</html> говорит о том, что внутри содержится HTML-код .

Внутри <head>…</head> располагаются теги, которые не отображаются в окне браузера пользователя. Как правило, они начинаются со слова meta, и называются мета-тегами, а вот тег <title>…</title> отображается в качестве заголовка окна браузера и анализируется поисковыми системами.

Далее располагается пара тегов <body>…</body> , в которые заключено содержимое страницы. Именно эта часть, которую часто называют телом страницы, отображается в браузере пользователя.

Также важно понимать, что существует несколько способов организации контента. Наиболее популярные из них – организация с помощью блоков ( <div>…</div> ) и в виде таблиц ( <table>…</table> ).

Что касается формата отображения элементов, то он может быть задан как напрямую, с использованием соответствующих тегов, так и с помощью таблиц стилей CSS . При этом именно второй способ является наиболее предпочтительным, так как он позволяет повторно применять стили компонентов. Таблица стилей задается либо в внутри тега <head> , либо в отдельном файле ( чаще всего этот файл имеет имя style.css ), ссылка на который также располагается внутри <head> .

В нашем случае структура элементов сайта выглядит следующим образом:

Структурный макет верстки созданного сайта

Основополагающими документами, в которых описываются все компоненты того или иного языка, применяемого при создании сайтов, являются спецификации.

Более подробно изучить все основные HTML-теги, их назначение, и принципы использования таблиц стилей ( CSS ) можно в нашем разделе статей: «Верстка сайта» .

Создание сайта с помощью PHP

На HTML-странице , созданной в предыдущем примере, все определено заранее и не будет изменяться при обращении со стороны пользователей. Такие страницы принято называть статичными, для их создания вполне хватает средств, предоставляемых языком гипертекста HTML.

Если же предоставляемая пользователям сайта информация изменяется в зависимости от каких-либо факторов или запросов, говорят, что веб-страница содержит динамический контент ( является динамической ).

Для создания таких страниц необходимо использовать языки веб-программирования . Среди них наиболее широко распространены PHP, Python и Ruby on Rails для Unix-систем , а для Windows характерна разработка динамического контента с использованием средств .NET .

Это все касается серверной части, а для программирования на клиентской стороне чаще всего используется JavaScript .

В подготовленном нами архиве есть папка php , в которой сохранен файл index.php . Именно он позволяет реализовать три странички нашего тестового сайта с помощью PHP .

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

В рамках этой статьи мы не будем углубляться в дебри PHP-программирования и для наглядности ограничимся простыми вставками фрагментов кода.

Суть этих действий заключается в том, что мы выносим шапку и подвал сайта в отдельные файлы: header.php и footer.php соответственно. А затем на страницах с текстовым содержанием вставляем их в макет сайта с помощью PHP . Сделать это можно с помощью приведенного ниже кода:

Попробуйте запустить в браузере файл php/index.php . Не получилось? Конечно нет. Ведь браузер не знает, что ему делать с командами, из которых состоит PHP-файл ( он же PHP-скрипт ).

Для того чтобы любой PHP-скрипт выполнился успешно, он должен быть обработан интерпретатором языка. Такой интерпретатор обязательно присутствует на всех веб-серверах и позволяет обрабатывать PHP-код . Но как же посмотреть, что изменилось в результате нашей работы?

Для отладки веб-приложений и реализации полноценного веб-сервера на компьютерах, работающих под управлением операционной системы Windows , был создан бесплатный пакет Denwer ( для вашего удобства он присутствует в подготовленном нами архиве ). Он включает в себя веб-сервер Apache , интерпретаторы таких языков веб-программирования как PHP и Perl, базу данных MySQL , а также средства для работы с электронной почтой.

Установка пакета приложений Denwer не требует каких-либо серьезных усилий. Запускаем установочный файл, выполняем все его требования. Выбираем букву виртуального диска для быстрого доступа к веб-серверу, создаем ярлыки. Вот и все! Denwer готов к работе!

Только что установленный нами веб-сервер запускается кликом по ярлыку Start Denwer ( у вас он может называться иначе ). После старта веб-сервера скопируйте в папку home/test1.ru/www/ , расположенную на появившемся в системе виртуальном диске ( обычно Z ), содержимое папки php из архива , с которым мы работаем, кроме файла index.html .

После этого наберите в адресной строке браузера test1.ru . Знакомая картина? А теперь пройдитесь по ссылкам, расположенным сверху страницы. Работает? Отлично!

Создание сайта с помощью PHP

Создавать сайт с нуля или на конструкторе сайтов?

Ключевое отличие создания с нуля (будь то с помощью CMS-систем или исходного кода) от конструктора сайтов заключается в том, что создание сайта с нуля подразумевает возможность не только создать сайт, отвечающий именно вашим потребностям, но и управлять всеми возможностями, которые вы сами и заложили.

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

В приведенной ниже таблице мы постарались обобщить ключевые преимущества и недостатки сайта с нуля VS конструктора сайтов:

Сравнительная характеристика Сайты, созданные с помощью конструктора Сайты, созданные самостоятельно с нуля
Простота создания Просто Сложно
Скорость создания Очень быстро Долго
Возможность редактирования исходного кода Нет Есть
Возможность продвижения в поисковых системах Возможны нюансы Полная свобода
Гибкость в настройке дизайна и функциональности Ограничена Не ограничена
Возможность перенести на другой хостинг Чаще нет Есть

Какой же способ создания сайта наиболее предпочтителен?

На самом деле, однозначного ответа на этот вопрос не существует. Все зависит от ваших целей и задач. Может быть, вы хотите изучить наиболее популярные CMS-системы? А может, научиться самостоятельно формировать исходный код создаваемого сайта? Нет ничего невозможного!

Но если вы хотите создать современный и действительно качественный сайт в предельно короткий срок, мы рекомендуем воспользоваться именно конструкторами сайтов!

Полезные программы для начинающих вебмастеров

Мы перечислим несколько полезных программ, которые значительно облегчат и ускорят процесс самостоятельного создания сайта:

Notepad++ — текстовый редактор, позволяющий создавать и редактировать исходный код создаваемого сайта. Отличная замена программе « Блокнот », входящей в состав операционной системы Windows .

Adobe Dreamweaver — мощная и многофункциональная программа для создания сайтов. Помимо всего прочего она включает в себя возможность предварительного просмотра создаваемого ресурса.

NetBeans – среда разработки приложений, которая позволяет эффективно работать с такими языками разметки и Веб-программирования, как HTML , CSS , JavaScript и PHP .

Публикация созданного сайта в сети Интернет

Допустим, вы уже создали свой первый сайт, но что нужно сделать, чтобы на него мог зайти любой пользователь Всемирной паутины?

Что такое «домен» и зачем он нужен

Домен — это имя сайта. Кроме того, под термином « доме н» зачастую понимают адрес вашего сайта в сети « Интернет ».

Отличным примером домена может быть имя сайта, на котором вы сейчас находитесь — internet-technologies.ru .

Как видно из приведенного выше примера доменное имя сайта состоит из двух частей:

  • непосредственно названия сайта — в нашем случае это internet-technologies ;
  • выбранной доменной зоны. В нашем случае была выбрана доменная зона « .ru ». Доменная зона указывается в адресе сайта после его названия.

Также стоит отметить, что существуют домены различных уровней. Разобраться в этом очень просто – достаточно посмотреть на количество разделенных точкой частей адреса сайта. Например:

  • internet-technologies.ru – домен второго уровня;
  • forum.internet-technologies.ru – домен третьего уровня (он же поддомен).

Доменные зоны могут быть разными. Чаще всего выбор доменной зоны зависит от страны или назначения каждого конкретного сайта.

Наиболее часто используются следующие доменные зоны:

  • .ru — наиболее популярная доменная зона в рамках русскоязычного сегмента Всемирной паутины;
  • .biz — часто доменная зона используется для сайтов бизнес-тематики;
  • .com — эта доменная зона чаще всего используется для коммерческих и корпоративных сайтов;
  • .info — в этой доменной зоне достаточно часто располагаются именно информационные сайты;
  • .net — еще одна популярная доменная зона, подходящая для проектов, связанных с Интернетом;
  • .рф — официальная доменная зона Российской Федерациию

Важно! Мы настоятельно не рекомендуем использовать домены в зоне .рф. Связано это со сложностью в продвижении сайта, расположенного в этой доменной зоне.

Если большая часть целевой аудитории находится в России, мы рекомендуем регистрировать домен в зоне « .ru ».

Как выбрать домен

При выборе домена для собственного сайта мы рекомендуем руководствоваться следующими принципами:

  • оригинальность и легкость запоминания;
  • максимальна длина – 12 символов;
  • легкость набора на латинице;
  • отсутствие в имени домена знака «тире» (желательно, но не обязательно).
  • Чистота истории домена и отсутствие на нем каких-либо санкций со стороны поисковых систем. Это можно проверить с помощью сервиса « whois history ».
Где можно купить домен?

Мы рекомендуем пользоваться услугами надежного и проверенного временем регистратора доменных имен – WebNames . Мы используем именно его.

Помимо всего прочего, сайт этого регистратора позволяет прямо в режиме онлайн подобрать имя (домен) для своего сайта. Сделать это довольно просто.

Для этого достаточно ввести в соответствующее поле желаемое имя домена и нажать кнопку « Искать домен ».

Выбор домена у регистратора

Что такое «хостинг»

Для того чтобы созданный вами сайт стал доступен всем пользователям Всемирной паутины, помимо домена вашему интернет-ресурсу понадобится еще и хостинг.
Термином « хостинг» обозначается услуга по размещению вашего сайта в Интернете. Предоставлением подобных услуг занимается большое количество компаний, которые принято называть « хостерами».

Вы должны четко понимать, что все сайты, которые доступны на просторах Всемирной паутины, где-то находятся. Если говорить более конкретно, находятся они ( их файлы ) на жестких дисках серверов ( мощных компьютеров ), находящихся в распоряжении компаний — хостеров.

Так как практически любой сайт состоит из разных типов файлов ( базы данных, тексты, картинки, видео ), доступ к ним с разных компьютеров осуществляется путем обработки запроса, обращенного к сайту, который располагается на сервере компании-хостера.

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

Как выбрать хостинг

При выборе хостинга для создаваемого сайта мы рекомендуем руководствоваться следующими критериями:

  • Стабильная работа . Выбранный вами хостинг должен стабильно работать 24 часа в сутки, 7 дней в неделю. Иначе вы будете нести репутационные потери в глазах посетителей, а также потеряете доверие со стороны поисковых систем. В этой связи стоит обратить особое внимание на такой параметр, как uptime хостинга. Uptime — это время, в течение которого сайт работает в штатном режиме и посетители могут его открыть в своем браузере без каких-либо проблем. Оно должно быть максимально приближено к 100%. В свою очередь время отклика сайта демонстрирует, насколько быстро ваш сайт отвечает на запрос, поступающий от браузера пользователя. Чем меньше время отклика, тем лучше.
  • Простота и удобство пользовательского интерфейса . При входе в личный кабинет вся панель управления должна быть не только доступна, но и интуитивно понятна. В частности, вы должны видеть текущий баланс, а также иметь быстрый доступ ко всем основным функциям хостинга.
  • Профессиональная русскоязычная служба поддержки . Быстрая, квалифицированная и говорящая на родном для вас языке техническая поддержка очень важна в случае возникновения различных сбоев в работе сайта и необходимости их оперативного устранения.
  • Стоимость услуг . Этот аспект важен как для начинающих вебмастеров, которые имеют в своем распоряжении ограниченный бюджет, так и для владельцев масштабных интернет-проектов, требующих использования действительно дорогостоящего хостинга.

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

Размещение готового сайта на сервере

Допустим, вы уже создали сайт, купили домен и хостинг. Что делать дальше?

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

  1. Это загрузка содержимого вашего сайта по HTTP-протоколу с помощью панели управления хостингом.
  2. По протоколу FTP с помощью так называемого FTP-клиента .

Именно второй способ является наиболее быстрым. Для этой задачи мы рекомендуем один из лучших бесплатных FTP-клиентов – FileZilla .

После установления связи с FTP-сервером выбранного вами хостинг-провайдера ( обычно после оплаты хостинга провайдер передает IP-адрес, логин и пароль входа ) доступное дисковое пространство отобразится в виде логического устройства ( как и обычные жесткие диски компьютера ) на одной из двух панелей используемой программы. После этого останется запустить процесс копирования и дождаться его окончания.

Таким образом, ваш сайт будет опубликован в Интернете и станет доступен всем пользователям Всемирной паутины. На этом этапе уже можно будет набрать в адресной строке браузера его доменное имя и полюбоваться результатом проделанной работы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *