Как из набора HTML-шаблонов собрать многостраничный сайт

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

Содержание

1. Что такое многостраничный сайт
2. Шаг 1. Выбор шаблона с нужными страницами
3. Шаг 2. Распаковка и изучение структуры
4. Шаг 3. Проверка какие страницы есть
5. Шаг 4. Настройка навигации между страницами
6. Шаг 5. Замена контента на свой
7. Шаг 6. Общая шапка и подвал
8. Шаг 7. Meta-теги для каждой страницы
9. Шаг 8. Загрузка на хостинг
10. Добавление новых страниц
11. Частые проблемы
12. FAQ
13. Чек-лист сборки

Что такое многостраничный сайт

Многостраничный сайт (MPA, Multi-Page Application) — каждая страница это отдельный HTML-файл. В отличие от лендинга-одностраничника, у вас несколько разделов: главная, о компании, услуги, портфолио, контакты.

Типичная структура:

• index.html — главная страница;
• about.html — о компании;
• services.html — услуги;
• portfolio.html — портфолио;
• blog.html — список статей;
• contact.html — контакты;
• 404.html — страница ошибки.

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

Шаг 1. Выбор шаблона с нужными страницами

Не любой HTML-шаблон годится для многостраничного сайта. Важно выбрать тот, который УЖЕ содержит несколько страниц одной дизайн-системы.

Что искать в описании шаблона:

• «multi-page» или «multipage»;
• «5 pages», «10+ pages» — конкретное число страниц в комплекте;
• В демо-просмотре пройти по всем страницам — убедиться, что они есть и в одном стиле.

Хорошие источники бесплатных и платных многостраничных шаблонов: HTML5 UP, Templated.co, Start Bootstrap, ThemeForest. В подборке Zettabyte отфильтровать шаблоны под нужный тип (корпоративный, агентство, услуги) — там сразу видно, сколько страниц в комплекте.

Шаг 2. Распаковка и изучение структуры

После скачивания обычно получаете ZIP-архив. Распаковываете в отдельную папку, например my-site/. Внутри типичная структура:

my-site/
├── index.html
├── about.html
├── services.html
├── portfolio.html
├── contact.html
├── 404.html
├── css/
│   ├── style.css
│   ├── bootstrap.min.css
│   └── ...
├── js/
│   ├── main.js
│   └── jquery.min.js
├── images/
│   ├── logo.png
│   ├── hero.jpg
│   └── ...
├── fonts/
└── README.txt

Сразу прочитайте README.txt — там часто описаны особенности шаблона, лицензия, требования.

Шаг 3. Проверка какие страницы есть

Откройте каждый HTML-файл в браузере (двойным кликом или через «Открыть с помощью»). Изучите:

• Какие страницы реально содержат полезный контент;
• Какие — пустые шаблоны для расширения;
• Есть ли страница 404;
• Есть ли заготовки для блога, портфолио;
• Есть ли формы (контакт, заявка).

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

Шаг 4. Настройка навигации между страницами

В шапке (header) шаблона обычно уже есть меню. Проверьте, что ссылки указывают на правильные файлы:

<nav>
  <ul>
    <li><a href="index.html">Главная</a></li>
    <li><a href="about.html">О нас</a></li>
    <li><a href="services.html">Услуги</a></li>
    <li><a href="portfolio.html">Портфолио</a></li>
    <li><a href="contact.html">Контакты</a></li>
  </ul>
</nav>

Используйте относительные пути (без http://) — сайт работает и локально, и на хостинге.

Активная страница в меню

Чтобы на текущей странице её пункт меню был выделен, добавьте класс active:

<!-- На странице about.html -->
<li class="active"><a href="about.html">О нас</a></li>

И в CSS:

nav .active a { color: red; font-weight: bold; }

Шаг 5. Замена контента на свой

Каждый HTML-файл редактируете в текстовом редакторе (VS Code, Sublime Text, Notepad++).

Что менять

• Заголовки <h1>, <h2>, <h3> — на свои;
• Тексты в <p> — заменить на свой контент;
• Атрибуты alt у картинок — описать что на картинке;
• Картинки в <img src="..."> — заменить на свои файлы в папке images/;
• Логотип — обычно в шапке, заменить файл по тому же имени;
• Контакты в подвале: телефон, email, адрес, соцсети.

Что НЕ трогать

• CSS-классы (например, class="hero-section") — иначе сломается стиль;
• Структуру <div> — это каркас вёрстки;
• JavaScript-функции;
• Ссылки на CSS/JS файлы.

Шаг 6. Общая шапка и подвал

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

Способ 1. Ручной поиск-замена

VS Code, Sublime Text имеют функцию «Найти и заменить во всех файлах». Меняете шапку — копируете во все файлы. Просто, но не идеально.

Способ 2. JavaScript-включение

Создаёте файл header.html с шапкой. На каждой странице:

<div id="header-placeholder"></div>
<script>
fetch('header.html')
  .then(r => r.text())
  .then(html => document.getElementById('header-placeholder').innerHTML = html);
</script>

Минус: шапка появляется не сразу, после загрузки страницы — мелькание.

Способ 3. Server Side Includes (SSI)

Apache поддерживает SSI — серверное включение фрагментов. В .htaccess:

Options +Includes
AddType text/html .html
AddOutputFilter INCLUDES .html

В HTML:

<!--#include virtual="/header.html" -->

Работает только на хостинге с Apache.

Способ 4. Использовать SSG-генератор

Eleventy, Hugo, Jekyll берут общий header и собирают финальный HTML. Идеально для серьёзных проектов, но требует освоить инструмент.

Шаг 7. Meta-теги для каждой страницы

Каждая страница должна иметь свои уникальные:

<!-- На about.html -->
<title>О компании — Yoursite</title>
<meta name="description" content="История компании Yoursite, миссия, команда. Работаем на рынке с 2015 года.">

<meta property="og:title" content="О компании Yoursite">
<meta property="og:description" content="История компании Yoursite, миссия, команда.">
<meta property="og:image" content="https://yourdomain.ru/images/about-og.jpg">
<meta property="og:url" content="https://yourdomain.ru/about.html">

Это базовая SEO-настройка — без неё поисковики и соцсети показывают сайт хуже.

Шаг 8. Загрузка на хостинг

1. Откройте FileZilla, подключитесь к хостингу по FTP.
2. Зайдите в папку public_html/.
3. Перетащите всё содержимое вашей локальной папки my-site/ в public_html.
4. Подождите, пока все файлы загрузятся (минуты).
5. Откройте сайт в браузере — должен открыться index.html автоматически.
6. Проверьте переходы по меню — каждая страница должна открываться.

Добавление новых страниц

Чтобы добавить страницу, которой нет в шаблоне:

1. Скопируйте любую похожую страницу (например, services.html → events.html).
2. Поменяйте контент: заголовки, тексты, картинки.
3. Поменяйте title и meta description.
4. Добавьте новую страницу в меню навигации НА ВСЕХ страницах сайта (или используйте общий header).
5. Загрузите файл на хостинг.

Частые проблемы

1. Сломалось меню на одной странице. Забыли обновить во всех файлах после изменения. Используйте поиск-замена.
2. Не подгружаются стили на внутренних страницах. Неправильный путь к CSS. Проверьте, что путь относительный (например, css/style.css, а не /my-site/css/style.css).
3. На разных страницах разный дизайн. Шаблон использует разные CSS для разных страниц. Унифицируйте подключения.
4. Картинки не отображаются. Файлы не загрузились или путь неверный.
5. Поисковики индексируют только главную. Создайте sitemap.xml со списком всех страниц.
6. Дубли страниц (с www и без). Настройте 301 редирект на одну версию.

FAQ

Чек-лист сборки сайта

• ☐ Выбран многостраничный шаблон с нужными страницами
• ☐ Шаблон распакован, структура изучена
• ☐ Проверены все страницы локально
• ☐ Удалены ненужные страницы
• ☐ Меню навигации настроено и работает на всех страницах
• ☐ Заменен весь контент на свой (тексты, картинки, логотип)
• ☐ Каждая страница имеет уникальный title и description
• ☐ Каждая страница имеет свои Open Graph теги
• ☐ Формы обратной связи подключены к обработчику
• ☐ Создана страница 404
• ☐ Подключена аналитика на все страницы
• ☐ Сайт залит на хостинг через FTP
• ☐ Все страницы открываются по своим URL
• ☐ Подключен SSL (https://)
• ☐ Создан sitemap.xml
• ☐ Создан robots.txt
• ☐ Сайт зарегистрирован в Yandex.Webmaster и Google Search Console

Заключение

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

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