Меню

Сайт быстро своими руками

Как сделать простой веб-сайт за один час

От переводчика: инструкция максимально простая, зато на неё можно ссылаться, если новички задают вопрос, как запустить свой сайт в интернете.

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

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

1. Идёте на namecheap.com и регистрируете домен. Этот шаг только в том случае, если нужно собственное доменное имя.

2. Создаёте аккаунт Github и скачиваете Git, если это ещё не сделано.

4. Делаем новый репозиторий Github для сайта под названием yourusername.github.io. Например, я зарегистрирован под именем smilli, так что мой репозиторий называется smilli.github.io.

6. Создаём файл ‘index.html’ в папке с сайтом с HTML-кодом главной страницы. Здесь необязательно тратить много времени, он может быть весьма лаконичным.

8. Теперь запускаем следующие команды:

9. Идём на yourusername.github.io. Здесь вы должны увидеть свой сайт! Поздравляю, вы что-то опубликовали в онлайне.

10. Если хотите собственное доменное имя, создаёте файл ‘CNAME’ (всё прописными буквами). Туда добавляете одну строчку ‘’yourdomainname.com’ (без http или www). См. подробности конфигурации CNAME здесь.

11. Как и раньше, отправляем все изменения на Github.

12. Теперь авторизуетесь на namecheap.com и щёлкаете по доменному имени, которое нужно, в списке своих доменов. Список будет примерно таким:

5f026d6d02954914b15ae37ab66509aa

После выбора домена, появится ссылка «All Host Records» в левой панели во вкладке «Host Management». Нажмите на неё. Теперь вы увидите настройки по умолчанию, которые Namecheap указал для вашего сайта.

6c8275d7abf741df954d4e00a9398947

Измените настройки следующим образом (заменив ‘username’ на своё имя пользователя, конечно).

2fa51d9f952f44febbb034283d4104a6

13. После вступления в действие изменений в DNS вы сможете увидеть свой сайт на своём домене! Поздравляю. 🙂

Источник

8 конструкторов сайтов, с которыми справится каждый

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

1. Wix

wix 2018 05 24 12 05 55 1527160279

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

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

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

Тарифы: бесплатный; платные — от 4,08 евро в месяц.

2. Tilda Publishing

tilda2018 05 23 16 03 25 1527081448

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

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

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

Тарифы: бесплатный; платные — от 500 рублей в месяц.

3. uKit

ukit2018 05 24 09 39 47 1527145707

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

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

Читайте также:  Приснилась своя кровь на руке

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

Тарифы: бесплатный (14 дней); платные — от 2,98 доллара в месяц.

4. Nethouse

neth2018 05 24 10 28 37 1527148595

Ещё один достаточно простой для освоения конструктор с ориентацией на сайты-визитки малого бизнеса и продажи через интернет. Сервис не отличается большим набором и разнообразием шаблонов. Всего доступно 127 вариантов дизайна с минимальными настройками внешнего вида. Многие из них заточены именно под онлайн-витрины товаров и услуг.

Nethouse позволяет интегрировать сайт с «Яндекс.Кассой», программами «1С», а также сервисами «Большая птица», «Мой склад», СДЭК, DDelivery и другими. Подключив тариф «Бизнес», можно будет использовать разделение прав доступа, что позволит создать отдельные аккаунты для контент-менеджеров, маркетологов и бухгалтеров.

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

Тарифы: бесплатный; платные — от 1 рубля в месяц.

5. 1С-UMI

12018 05 24 11 36 36 1527152527

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

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

Из достоинств 1С-UMI можно отметить предоставление доступа к CSS, удобный импорт товаров, а также интеграцию с сервисами «1С: Управление торговлей», «Мой склад», «Яндекс.Маркет» и другими. В рамках пробного 15-дневного периода пользоваться можно всеми доступными функциями, но после придётся выбрать один из доступных тарифов.

Тарифы: только платные — от 110 рублей в месяц.

6. Weebly

webb 2018 05 24 12 44 08 1527162602

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

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

Все шаблоны Weebly имеют адаптивный дизайн, но редактировать мобильную версию отдельно от десктопной нельзя. Вне зависимости от выбранного тарифа сервис предоставляет бесплатный SSL-сертификат для вашего домена.

Тарифы: бесплатный; платные — от 8 долларов в месяц.

7. Mozello

moz 2018 05 24 15 51 18 1527166340

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

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

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

Тарифы: бесплатный; платные — от 299 рублей в месяц (+НДС).

8. uCoz

ucoz 2018 05 24 16 31 50 1527169661

Это один самых старых сервисов по созданию сайтов, который уже давно перерос само понятие конструктора. uCoz сегодня предоставляет множество дополнительных услуг и модулей для интернет-проектов. При всём этом создать простую визитку, блог, форум или онлайн-магазин он всё ещё позволяет.

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

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

Читайте также:  Постройка зимнего сада своими руками

Тарифы: бесплатный; платные — от 3 долларов в месяц.

Стоит выделить ресурсы, которые позволяют создавать простые сайты с минимальными затратами времени. Это Wix, uKit и Nethouse. Любой из них отлично подойдёт новичкам и станет оптимальным решением для малого бизнеса. Чуть сложнее будет освоить Tilda Publishing и Webbly, плюс они чуть дороже, но для творческих личностей могут предложить куда больше интересных возможностей.

Источник

Как создать свой сайт бесплатно своими руками – пошаговая инструкция

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг второй – выбираем базовый шаблон дизайна для будущего сайта.
Конструктор предоставляет в распоряжение пользователей коллекцию из более 500 уникальных бесплатных шаблонов! Такого выбора нет нигде!

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

wix1 060729

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

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

final 070205

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

CMS-системы

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

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

Топ бесплатных CMS-систем

Топ платных CMS-систем

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

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

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

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

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

13647 998929 e1568927768853

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

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

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

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

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

Читайте также:  Пригласительные своими руками под старину

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

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

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

13647 999029 e1568973796731

13647 999030 e1568973809526

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

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

13647 999031 e1568973829402

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

13647 999034 e1568973842820

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

13647 999278 e1568973856237

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

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

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

13647 999036 e1568973903681

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

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

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

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

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

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

Источник

Как создать свой сайт бесплатно? (обзор бесплатных конструкторов)

5c08cdcdc992f IMG 3721

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

Зачем нужен конструктор сайта?

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

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

Какими бывают конструкторы сайтов?

Обзор конструкторов

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

Попробуем создать сайт для туристического гида:

1 2 3Выбираем стиль 4Варианты дизайна для одного стиля 5Готовый сайт

Как видите, создать сайт на WIX можно за несколько кликов.

Шаблон можно дополнить такими функциями, как:

uKit от uCoz

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

6

Замените текст и загрузите авторские картинки для уникального контента.

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

Компания uCoz, которая владеет этим конструктором, предлагает и другие программы для улучшения сайта: бесплатный калькулятор для сайта, конструктор лендингов. Попробуйте сделать сайт из страницы во Вконтакте или Facebook:

7

Setup

8

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

9

У конструктора 2 тарифа: платный и бесплатный. Если вы хотите начать привлекать клиентов сразу, то создавайте бесплатный лендинг с ограниченным функционалом, например, без адреса и карты.

В бесплатном тарифе есть:

Tilda

Наша статья была бы неполной без этого конструктора. На сайты, созданные на Tilda, запускают платный трафик. Вот один из таких:

10

Отличительная особенность этого конструктора — интеграции с различными сервисами. Среди них и популярные месседжеры (Telegram,Slack), а также платформы для e-mail-рассылок (MailChimp, UniSender). Интегрировать собственные сервисы можно через HTML.

И, главное, что бесплатной версией можно пользоваться неограниченное количество времени. Однако очевидный минус этой версии — 50 Мб свободного пространства. Тем не менее, с функцией конструктора сайта Tilda справляется.

Заключение

Бесплатные конструкторы — отличная возможность попробовать создать сайт для теста и тренировке, достаточно недорогих на wix, uKit, Setup. Затем, имея представление о требуемых функциях и дизайне, вы сможете перейти к более продвинутым инструментам.

Источник

Adblock
detector