Первый сайт можно сделать бесплатно и без навыков программирования. Школьный проект, портфолио или личную страницу проще всего собрать в конструкторе. А если хочется разобраться, как работают веб-страницы, можно написать сайт на HTML и CSS и опубликовать его через GitHub Pages.
В статье разберём оба способа: какой выбрать новичку, что доступно бесплатно и какие ограничения есть у популярных сервисов. Заодно покажем, как опубликовать готовый сайт и получить ссылку, которой можно поделиться.
Что нужно, чтобы сайт работал
Чтобы сайт появился в интернете, нужны страницы и хостинг — место на сервере, где хранятся файлы и откуда браузер их загружает. Ещё нужен адрес, например username.wordpress.com или mysite.ru.
В первом случае платформа даёт бесплатный адрес на своём поддомене. Во втором используется собственный домен — его регистрируют отдельно. Именно домен мы обычно видим в адресной строке браузера.
Сам сайт можно собрать в визуальном конструкторе или написать вручную. Конструктор похож на редактор: добавляешь нужные блоки, текст и изображения, а сервис берёт техническую часть на себя. Если хочется работать с кодом, понадобятся основные технологии веб-разработки:
- HTML задаёт структуру страницы: заголовки, абзацы, ссылки, изображения;
- CSS отвечает за внешний вид: цвета, шрифты, размеры и расположение элементов;
- JavaScript добавляет интерактивность и программную логику.
Что выбрать: конструктор или HTML и CSS
- Если нужно собрать школьный проект, портфолио или небольшую личную страницу и быстрее получить готовый результат, подойдёт конструктор. Код писать не придётся: страницу можно собрать из готовых блоков, добавить текст и изображения, а затем настроить внешний вид.
- Если хочется не только получить готовый сайт, но и разобраться в веб-разработке, стоит изучать HTML и CSS. С ними ты будешь самостоятельно задавать структуру и оформление страницы, а заодно поймёшь, как она устроена и из чего складывается её внешний вид.
Для старта подойдут русскоязычные тренажёры HTML Academy. В курсе «Знакомство с HTML и CSS» сначала разбирают структуру HTML-документа и разметку текста, а затем переходят к основам CSS и оформлению страницы. Когда освоишь HTML и CSS и захочешь добавить интерактивность, можно перейти к «Современному учебнику JavaScript» — он тоже на русском и начинается с базовых тем.
Какие бесплатные платформы можно использовать
Сделать первый сайт можно разными способами. В одном сервисе ты собираешь страницу из готовых блоков, в другом удобно размещать статьи и учебные материалы, а где-то можно опубликовать собственный проект на HTML и CSS. Ниже разберём несколько бесплатных вариантов и посмотрим, для каких задач они подходят.
Tilda
Tilda — российский конструктор, в котором сайт можно собрать без программирования. Ты выбираешь готовые блоки — например, обложку, текст, изображения, кнопки или галерею — добавляешь свой контент и настраиваешь оформление.
На бесплатном тарифе можно создать и опубликовать один сайт. Платить за хостинг отдельно не нужно, а бесплатным тарифом можно пользоваться без ограничения по времени. При этом часть блоков и возможностей Tilda доступна только после оплаты. Сайт получит бесплатный адрес Tilda. Подключить свой домен, например myproject.ru, на бесплатном тарифе не получится.
Google Sites
Google Sites подойдёт, если на сайте будет много материалов, которые нужно разнести по страницам. Например, можно сделать отдельные разделы с описанием проекта, результатами исследования, фотографиями и источниками.
Всё собирается в визуальном редакторе: можно добавлять текст и изображения, создавать новые страницы и менять их расположение. Есть и совместная работа — несколько человек могут редактировать проект вместе.
Готовый сайт публикуется по ссылке. Доступ можно открыть для всех или только для выбранных пользователей. Если есть собственный домен, его можно подключить отдельно.
WordPress.com
WordPress.com пригодится, если ты хочешь вести блог или регулярно добавлять на сайт новые материалы — статьи, заметки, обзоры, новости проекта. Для каждой записи можно добавить заголовок, текст и изображения, а готовые материалы будут собираться на сайте.
На бесплатном тарифе хостинг уже включён, а для файлов дают 1 Гб места. Сайт получает адрес вида название.wordpress.com, поэтому покупать свой домен для старта не нужно. При этом на страницах будет показываться реклама WordPress.com. Если захочется убрать адрес .wordpress.com и подключить свой домен, понадобится платный тариф.
GitHub Pages
GitHub Pages пригодится, если ты уже пробуешь писать страницы на HTML и CSS и хочешь опубликовать их в интернете. Здесь нет визуального конструктора: ты самостоятельно создаёшь файлы сайта, а GitHub Pages размещает их в интернете.
Сначала файлы загружают в репозиторий — так на GitHub называется место, где хранится проект. Для простой страницы понадобятся как минимум файл index.html и, если оформление вынесено отдельно, файл со стилями CSS.
Для персонального сайта репозиторий можно назвать: username.github.io. После публикации сайт будет доступен по адресу такого же вида. Платить за хостинг не нужно: на бесплатном аккаунте GitHub Pages можно использовать для публичного репозитория.
Как сделать сайт на конструкторе
У Tilda, Google Sites и других конструкторов разные редакторы, но порядок работы похож: сначала продумываешь структуру и добавляешь материалы, затем настраиваешь оформление и публикуешь результат.
Реши, какой сайт тебе нужен
Сначала набросай, что будет на сайте и сколько страниц понадобится. Например, для школьного проекта можно сделать главную страницу, отдельные разделы с ходом работы и результатами, а в конце добавить список источников. Для небольшого портфолио может хватить одной страницы с работами, коротким рассказом о себе и контактами.
От задачи зависит и выбор конструктора. Google Sites удобен для учебного проекта с несколькими страницами, а Tilda — когда хочется больше внимания уделить оформлению и собрать красивую страницу из готовых блоков.
Добавь материалы
Не спеши выбирать шрифты, цвета и анимацию. Сначала добавь основные страницы и материалы: заголовки, тексты, изображения, ссылки. Если страниц несколько, настрой меню, чтобы между ними было легко переходить. Когда структура готова, можно заняться оформлением: подобрать шрифты и размеры заголовков, настроить фон, отступы и расположение элементов.
Проверь сайт перед публикацией
Открой все страницы и посмотри на сайт глазами посетителя. Проверь, работают ли ссылки и меню, хорошо ли читается текст, загружаются ли изображения и легко ли найти нужный раздел.
Отдельно посмотри, как страницы выглядят на небольшом экране. Если конструктор показывает мобильную версию или предпросмотр, проверь, не съехали ли блоки и не стал ли текст слишком мелким.
Опубликуй сайт
Когда всё готово, нажми кнопку публикации. Конструктор создаст бесплатный адрес, по которому сайт можно открыть в браузере и показать другим. У бесплатных тарифов адрес обычно связан с самой платформой. Если позже понадобится собственный домен, сначала проверь условия выбранного сервиса: такая возможность может быть доступна только на платном тарифе.
Частые вопросы
Нужно ли устанавливать программу, чтобы создать сайт?
Для Tilda, Google Sites или WordPress.com хватит браузера: открываешь сервис и собираешь страницы прямо там. Если хочешь работать с HTML и CSS, пригодится редактор кода. В нём удобнее редактировать файлы, находить ошибки и следить за структурой кода.
Появится ли бесплатный сайт в «Яндексе» и Google?
Может появиться, но не сразу после публикации. Сначала поисковику нужно найти страницы и добавить их в свою базу — этот процесс называется индексацией. При этом публикация не гарантирует попадания в результаты поиска. Поэтому, если сайт открывается по ссылке, но пока не находится в «Яндексе» или Google, это нормально.
Можно ли потом перенести сайт на другую платформу?
Зависит от того, как и где он создан. У конструкторов свои правила переноса. Например, WordPress.com позволяет выгрузить записи, страницы и комментарии, но без оформления. В Tilda выгрузка исходного кода доступна на тарифе Business. С HTML и CSS проще: файлы проекта остаются у тебя, поэтому их можно загрузить на другой подходящий хостинг.
Можно ли брать картинки из «Яндекса» или Google?
Не любую картинку из поиска можно просто скачать и добавить на сайт — у неё есть автор или правообладатель. Лучше использовать свои изображения или искать те, которые автор разрешает брать другим. При этом иногда нужно указать его имя.
Можно ли сделать сайт только с телефона?
Зависит от платформы, но с компьютера это делать удобнее: проще работать со страницами, добавлять материалы и сразу проверять результат. Например, Google Sites можно открыть на телефоне или планшете, но для редактирования понадобится компьютер.
Если пишешь сайт на HTML и CSS, на большом экране удобнее переключаться между кодом и браузером и искать ошибки. А телефон пригодится, чтобы открыть готовый сайт и проверить, как он выглядит на небольшом экране.
Главное
- Для первого сайта не нужен бюджет: начать можно на бесплатном тарифе или опубликовать собственную страницу через GitHub Pages.
- Выбирай инструмент под задачу: для быстрого результата удобнее конструктор, а для знакомства с веб-разработкой — HTML и CSS.
- Сначала продумай содержание и структуру сайта, а уже потом занимайся цветами, шрифтами и другими деталями.
- Перед публикацией проверь сайт на компьютере и телефоне, открой все ссылки и посмотри, легко ли найти нужную информацию.
- Бесплатного варианта хватит для старта. Если проект вырастет, позже можно подключить свой домен, сменить тариф или перенести сайт.
