Как сделать папки сайта в 2026: структура файлов и адреса страниц

Папки сайта это не украшение, а способ разложить файлы так, чтобы сервер и браузер их нашли. Минимальный рабочий набор выглядит одинаково почти у всех проектов: файл index.html в корне, рядом папки css/, js/, images/, и по отдельной папке на каждую страницу. Ниже: из чего состоит проект сайта, как из папок получаются адреса страниц, куда всё это заливать на хостинге, как попросить ИИ разложить файлы за вас и на чём чаще всего ломается структура.

Из чего состоит папка сайта

Сайт из статических файлов это обычная папка на компьютере. Внутри лежит главная страница и всё, что она подгружает: оформление, скрипты, картинки, шрифты. Учебник MDN предлагает набор, который давно стал стандартом: index.html в корне плюс отдельные папки под изображения, стили и скрипты (MDN, Dealing with files).

• index.html в корне: главная страница и точка входа. Именно её сервер отдаёт, когда человек заходит на адрес сайта.
• css/ (или styles/): оформление. Обычно один файл style.css, у большого сайта несколько.
• js/ (или scripts/): скрипты, от кнопки «наверх» до отправки формы заявки.
• images/ (или img/): логотип, фотографии, иконки.
• assets/: общая папка сразу под всё статичное (стили, скрипты, картинки, шрифты). Так делают современные сборщики, и отдельных css/ и js/ в корне тогда нет.
• Папка на каждую страницу: about/, contacts/, blog/, и внутри каждой свой index.html.
• Служебные файлы в корне: favicon.ico, robots.txt, sitemap.xml. Первые два ищут по фиксированным адресам, и в подпапку их убирать нельзя, а карту сайта проще держать рядом с ними и указать её адрес в robots.txt.

Так выглядит структура простого сайта из двух страниц:

my-site/
  index.html
  about/
    index.html
  css/
    style.css
  js/
    main.js
  images/
    logo.png
  favicon.ico
  robots.txt

Волшебных имён здесь нет: css можно назвать styles, а images сократить до img. Важно другое: имя папки в ссылке внутри HTML должно совпадать с именем папки на диске до последней буквы.

Как из папок получаются адреса страниц

Адрес страницы это путь к файлу от корня сайта. Когда адрес заканчивается слешем, сервер заходит в эту папку и ищет там индексный файл. У nginx директива index по умолчанию равна index.html, и запрос к / обрабатывается как запрос к /index.html (документация nginx). У других серверов и у хостингов статики логика такая же.

• index.html в корне даёт адрес /, то есть главную страницу.
• about/index.html даёт адрес /about/, короткий и без расширения.
• about.html в корне даёт адрес /about.html, с расширением прямо в строке браузера.
• blog/kak-vybrat-tur/index.html даёт адрес /blog/kak-vybrat-tur/, то есть вложенность папок повторяет вложенность разделов.

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

По теме: Как сделать сайт в Телеграме в 2026: Mini App, бот и визитка

Как разложить файлы по папкам: по шагам

1. Создайте папку проекта. Имя латиницей, строчными буквами, без пробелов: my-site, а не «Мой сайт».
2. Положите в неё index.html. Пока это единственная обязательная вещь: без индексного файла сервер не поймёт, что показывать.
3. Добавьте папки css, js, images. Даже если файл в каждой пока один, через месяц вы не будете искать нужный среди тридцати.
4. Определитесь с типом путей. Относительные (css/style.css, а со вложенной страницы ../css/style.css) работают даже при открытии файла двойным кликом. Пути от корня (/css/style.css) не ломаются при переносе страницы в другую папку, но для локальной проверки им нужен локальный сервер, например расширение Live Server.
5. Заведите папку под каждую новую страницу. about/index.html, contacts/index.html, и адреса сразу получаются аккуратными.
6. Проверьте локально. Откройте главную в браузере: если оформление слетело или картинки не появились, дело почти всегда в путях, а не в самих файлах.
7. Залейте папку на хостинг целиком, сохранив вложенность. Структура на сервере должна совпадать с той, что у вас на компьютере.

Подключение файлов в index.html при путях от корня выглядит так:

<link rel="stylesheet" href="/css/style.css">
<script src="/js/main.js" defer></script>
<img src="/images/logo.png" alt="Логотип" width="160" height="40">

Куда заливать файлы на хостинге

У каждого сайта на сервере есть корневая директория: папка, содержимое которой сервер и показывает миру. На обычном хостинге она чаще всего называется public_html. Например, в Beget при создании сайта появляется директория с именем сайта, а внутри неё public_html, куда и загружают файлы (справка Beget).

• Классический хостинг: копируете в public_html содержимое папки проекта, а не саму папку. Если залить my-site целиком, сайт окажется по адресу /my-site/, а по основному адресу будет пусто.
• Netlify: перетаскиваете папку проекта или zip-архив в Netlify Drop, репозиторий для этого не нужен, ссылка выдаётся сразу (документация Netlify).
• GitHub Pages: источником публикации можно выбрать корень репозитория или папку /docs в той же ветке (документация GitHub). Внутренняя структура при этом та же самая.

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

По теме: Как сделать уведомления на сайте в 2026: на странице и push

Как попросить ИИ разложить файлы по папкам

ИИ-ассистент (десктопные приложения Claude Code и Codex, редактор Cursor или обычный чат, который умеет отдавать файлы) собирает структуру сам, но по умолчанию любит один огромный index.html со стилями и скриптами внутри страницы. Работать он будет, а править его тяжело. Проще задать структуру сразу в первом запросе.

Собери сайт-визитку из статических файлов, без фреймворков.
Разложи так: index.html в корне, стили в css/style.css,
скрипты в js/main.js, картинки в images/.
Вторая страница: about/index.html, ссылка на неё /about/.
Все имена файлов и папок латиницей, строчными буквами,
слова через дефис, без пробелов.
Пути к стилям, скриптам и картинкам делай от корня сайта.
В конце покажи дерево папок, чтобы я проверила структуру.

Три вещи в таком запросе делают всю работу: папки перечислены явно, задано правило именования, указан тип путей. Если сайт уже собран одним файлом, попросите разнести стили и скрипты по отдельным файлам и подключить их в index.html: это одна короткая задача, ассистент справляется с ней за минуту. Полный путь от идеи до готовых файлов показан в руководстве, как сделать сайт с помощью ИИ.

Проверяйте структуру не глазами, а браузером: откройте страницу, нажмите F12 и посмотрите вкладку «Сеть». Строки с кодом 404 это ровно те пути, которые не совпали с реальными папками.

Ошибки, из-за которых структура ломается

• Кириллица в именах. Файл логотип.png в адресе превращается в длинный набор процентных кодов, и часть панелей, серверов и скриптов на этом спотыкается. Латиница просто безопаснее.
• Пробелы. Имя my file.html браузер отправит как my%20file.html, и ссылки рвутся; по этой же причине MDN советует писать имена строчными буквами и разделять слова дефисом (MDN).
• Разный регистр. На Windows Logo.PNG и logo.png это один и тот же файл, на сервере под Linux разные. Классическая история: локально всё работает, после заливки половина картинок исчезла.
• Потерянные пути после переезда файла. Страницу перенесли в подпапку, а внутри осталось images/logo.png, и картинка теперь ищется в about/images/. Лечится путём от корня: /images/logo.png.
• Ссылки на файлы своего компьютера. Путь вида C:\Users\Anna\Desktop\logo.png открывается только у вас, на хостинге такого диска нет.

Частые вопросы

Обязательно ли делать папки, если сайт из одной страницы?

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

Можно ли называть папки русскими буквами?

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

Почему на компьютере всё работает, а на хостинге картинки пропали?

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

Как сделать адрес страницы без .html?

Создать под страницу папку и положить внутрь файл с именем index.html. Папка contacts с файлом contacts/index.html откроется по адресу /contacts/. Никаких настроек сервера для этого не нужно.

Куда класть robots.txt и favicon?

Только в корень сайта, рядом с главным index.html. Поисковые роботы и браузеры запрашивают их по фиксированным адресам /robots.txt и /favicon.ico, и в подпапке эти файлы просто не найдутся.