Как сделать сайт на MacBook: локально и опубликовать в 2026

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

Выберите формат до установки программ

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

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

Правило выбора: если сайт можно полностью описать файлами HTML, CSS, JavaScript и картинками, сначала делайте переносимую статическую версию. Платформу можно выбрать позже.

Подготовьте папку проекта на MacBook

Создайте в Finder папку my-site. Внутри нужны index.html, styles.css и папка images. Используйте редактор, который сохраняет обычный текст в UTF-8. Если работаете в TextEdit, убедитесь, что документ не сохраняется как форматированный .rtf. Практичнее взять редактор кода, где видны расширения файлов.

Terminal входит в macOS и выполняет команды через оболочку; Apple показывает, что приложение находится в /Applications/Utilities и позволяет запускать инструменты командной строки (Apple Support). Терминал не обязателен для первого HTML, но удобен для локального сервера и проверки структуры.

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Название проекта</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Коротко объясните результат</h1>
    <p>Кому и чем помогает эта страница.</p>
    <a class="button" href="mailto:hello@example.com">Связаться</a>
  </main>
</body>
</html>

В styles.css задайте базовые размеры без фиксированной ширины всей страницы. Изображения ограничьте контейнером, а основной блок держите читаемым на широком экране.

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #202020; }
main { width: min(100% - 32px, 760px); margin: 0 auto; padding: 64px 0; }
img { max-width: 100%; height: auto; }
.button { display: inline-block; padding: 12px 18px; border-radius: 10px; }

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

Посмотреть, как собрать

Проверьте сайт локально

Простую страницу можно открыть двойным кликом по index.html. Адрес начнётся с file://. Но загрузка данных и некоторые скрипты в таком режиме дают ограничения браузера. MDN рекомендует для таких случаев локальный HTTP-сервер (MDN).

Если Python уже установлен, сначала проверьте python3 --version. Затем откройте Terminal, перейдите в папку проекта и запустите сервер только на локальном адресе. Модуль http.server по умолчанию раздаёт текущую папку, а параметр --bind 127.0.0.1 ограничивает доступ вашим компьютером (Python Docs).

cd ~/Desktop/my-site
python3 -m http.server --bind 127.0.0.1 8000

Введите в адресную строку локальный адрес 127.0.0.1:8000. После проверки остановите сервер сочетанием Control-C. Этот сервер предназначен для разработки, его не следует выставлять напрямую в интернет.

По теме: Как сделать разрешение сайта: адаптивный экран в 2026

Пройдите проверку до публикации

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

Откройте страницу при узком и широком окне. Текст, кнопки и картинки не должны уходить за край.
Нажмите каждую ссылку и кнопку. Почтовая ссылка должна открыть почтовое приложение, внутренние адреса не должны вести на локальный путь Mac.
Проверьте заголовок вкладки, один понятный h1, подписи изображений и контраст текста.
Откройте DevTools и убедитесь, что в Console нет ошибок загрузки styles.css, изображений и скриптов.
Переименуйте папку проекта и снова откройте страницу. Если всё работает, ссылки внутри проекта заданы относительно и проект легче переносить.

Последний пункт служит безопасным тестом переносимости. Адреса вида /Users/name/Desktop/... работают только на вашем Mac и не должны попадать в HTML. Для изображения используйте относительный путь images/cover.jpg.

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

Собрать сайт с ИИ

Опубликуйте файлы без привязки к одному сервису

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

Вариант для публичного статического проекта: GitHub Pages. Официальная инструкция создаёт адрес вида username.github.io; публикация после изменения может занять до 10 минут (GitHub Docs). На бесплатном плане Pages доступен для публичных репозиториев, поэтому не кладите туда закрытые документы, ключи, токены и персональные данные (GitHub Docs).

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

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

По теме: Как сделать на сайте список: HTML, CSS и доступность

Частые сбои на MacBook

В браузере виден код вместо страницы: файл сохранён не как обычный текст или имеет расширение .txt.
Нет оформления: имя styles.css в HTML не совпадает с реальным именем с учётом регистра.
Картинка работает локально, но пропала после публикации: в пути остался адрес с диска Mac или различается регистр букв.
Локальный сервер не запускается: Python не установлен либо порт уже занят. Проверьте версию или выберите другой порт, например 8001.
На телефоне всё слишком мелко: проверьте строку meta viewport и отсутствие фиксированной ширины контейнера.

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

Нужен ли мощный MacBook для простого сайта?

Нет. Для HTML, CSS, браузера и редактора достаточно исправного Mac с поддерживаемой системой. Мощность становится важнее при тяжёлой графике, видео и локальных моделях ИИ.

Можно ли сделать сайт без Terminal?

Да. Файлы создаются через Finder и редактор, а простая страница открывается в браузере. Terminal нужен, если вы запускаете локальный сервер или автоматизируете публикацию.

Нужно ли покупать домен сразу?

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

Когда статический способ не подходит?

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

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

Собрать сайт