Как разместить портфолио на GitHub Pages с кастомным доменом Cloudflare

Разместить портфолио на GitHub Pages с кастомным доменом через Cloudflare можно за 10‑15 минут, если последовательно выполнить пять основных шагов: подготовка репозитория, настройка DNS, активация HTTPS, проверка кеширования и мониторинг производительности. Эта инструкция актуальна для 2026 года и покрывает все нюансы, включая бесплатные инструменты Toolbox‑Online.

Как настроить репозиторий на GitHub Pages?

Сразу после создания репозитория на GitHub необходимо включить функцию GitHub Pages в настройках ветки main или gh-pages. После этого ваш сайт будет доступен по адресу username.github.io в течение нескольких секунд.

• 1. Зарегистрируйтесь на GitHub (если аккаунт ещё нет) и создайте новый репозиторий, назовите его portfolio или username.github.io.
• 2. Добавьте файлы сайта (index.html, style.css, script.js) в корень репозитория.
• 3. Перейдите в Settings → Pages, выберите ветку main и папку / (root).
• 4. Сохраните настройки – GitHub автоматически сгенерирует URL https://username.github.io/.
• 5. Проверьте, что сайт открывается, открыв полученный URL в браузере.

Почему стоит использовать Cloudflare для кастомного домена?

Cloudflare обеспечивает глобальную сеть доставки контента (CDN), ускоряя загрузку вашего портфолио до 99 % быстрее по сравнению с прямым хостингом, а также предоставляет бесплатный SSL‑сертификат и защиту от DDoS‑атак.

• 1. Более 200 точек присутствия (PoP) по всему миру, включая Россию, гарантируют быстрый отклик даже при соединении через 4G.
• 2. Автоматическое обновление DNS‑записей через API позволяет менять IP‑адреса без простоя.
• 3. Функция Argo Smart Routing (платно) может сократить время загрузки на 30 % при пиковых нагрузках.
• 4. Интеграция с GitHub Pages требует лишь указать CNAME‑запись, а Cloudflare позаботится о безопасности.

Что делать, если сайт не отображается после настройки DNS?

Если после добавления CNAME‑записи ваш сайт всё ещё недоступен, проверьте статус DNS‑пропагации и убедитесь, что в Cloudflare включён режим Full (strict) для SSL.

• 1. Откройте dnschecker.org и введите ваш домен – проверьте, что CNAME указывает на username.github.io.
• 2. Убедитесь, что TTL (time‑to‑live) установлен минимум в 5 минут, иначе изменения могут занять до 24 ч.
• 3. В панели Cloudflare перейдите в SSL/TLS → Overview и выберите режим Full (strict).
• 4. Очистите кеш браузера (Ctrl+Shift+R) и кеш Cloudflare в разделе Caching → Purge Everything.
• 5. Если проблема сохраняется, проверьте консоль разработчика (F12) на наличие ошибок 404 или 502.

Как подключить HTTPS через Cloudflare?

Подключить HTTPS к вашему кастомному домену можно за 2‑3 минуты, активировав бесплатный сертификат в Cloudflare и включив автоматическое перенаправление HTTP → HTTPS.

• 1. В Cloudflare откройте вкладку SSL/TLS → Edge Certificates.
• 2. Убедитесь, что опция Always Use HTTPS включена.
• 3. Включите Automatic HTTPS Rewrites – это исправит ссылки, прописанные в коде без протокола.
• 4. При желании добавьте HSTS‑заголовок (max‑age 31536000) в разделе Network → HTTP Strict Transport Security.
• 5. Проверьте сертификат, открыв https://yourdomain.com – браузер покажет замок и срок действия до 2027 года.

Какие инструменты помогут автоматизировать деплой?

Для автоматического обновления сайта после каждого коммита используйте GitHub Actions – бесплатный CI/CD, который публикует изменения на GitHub Pages без ручного вмешательства.

• 1. В корне репозитория создайте файл .github/workflows/deploy.yml со следующим содержимым:

  name: Deploy to GitHub Pages
  on:
    push:
      branches: [ main ]
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - name: Setup Node
          uses: actions/setup-node@v3
          with:
            node-version: '20'
        - run: npm install && npm run build
        - name: Deploy
          uses: peaceiris/actions-gh-pages@v3
          with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./dist
  

• 2. Добавьте скрипт сборки в package.json (например, "build": "vite build").
• 3. После первого пуша GitHub Actions автоматически соберёт проект и разместит его в ветке gh-pages.
• 4. Для мониторинга статуса пайплайна используйте вкладку Actions в репозитории.
• 5. При необходимости интегрируйте Toolbox‑Online Deploy Checker (бесплатный онлайн‑инструмент) для быстрой проверки статуса публикации.

Воспользуйтесь бесплатным инструментом Deploy Checker на toolbox-online.ru — работает онлайн, без регистрации.