Axel Bux

Настройка GitHub и подключение домена для своего блога

время чтения ~3 мин.

Вам не потребуется опыт программирования, чтобы создать свой сайт на Quartz 4. Следуя этой пошаговой инструкции, вы сможете настроить репозиторий на GitHub, опубликовать сайт и подключить собственный домен.

📝 Пошаговая инструкция по созданию и настройке

Весь процесс разбит на четыре ключевых этапа. Вы уже успешно выполнили первый этап, создав репозиторий axelbux/blog. Теперь нужно его правильно настроить.

🚀 Этап 2: Настройка репозитория и публикация сайта на GitHub Pages

  1. Настройте источник публикации

    • В вашем репозитории axelbux/blog на GitHub перейдите во вкладку Settings.
    • В левой панели выберите Pages.
    • В разделе Build and deployment выберите источник GitHub Actions .

  2. Настройте и запустите рабочий процесс (Workflow)

    • В корне вашего репозитория создайте папку .github/workflows.
    • Внутри папки workflows создайте файл с названием deploy.yml.
    • Скопируйте и вставьте в этот файл приведённый ниже код. Этот код предписывает GitHub автоматически собирать и публикавать ваш сайт на Quartz при каждом обновлении репозитория.
name: Deploy Quartz site to Pages

on:
  push:
    branches: [v4]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
      - name: Install dependencies
        run: npm ci
      - name: Build Quartz
        run: npx quartz build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: public
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
  • Сохраните файл, сделайте коммит и пуш в репозиторий через GitHub Desktop. После этого во вкладке Actions вашего репозитория автоматически запустится процесс сборки. Дождитесь его успешного завершения. Ваш сайт будет доступен по адресу https://axelbux.github.io/blog.

⚙️ Этап 3: Базовая настройка Quartz

Основные настройки сайта задаются в файле quartz.config.ts в корне репозитория. Вы можете отредактировать его в любом текстовом редакторе .

// Пример изменений в quartz.config.ts
const config: QuartzConfig = {
  configuration: {
    pageTitle: "Мой цифровой сад", // Название вашего сайта
    locale: "ru-RU", // Язык сайта и формата дат
    baseUrl: "blog.axelbux.ru", // Ваш домен (пока можно не менять)
    // ... другие настройки
  },
  // ... остальная часть конфига
}
  • pageTitle: Название вашего сайта, которое отображается в браузере .
  • locale: Установите значение "ru-RU", чтобы использовать русский язык и формат дат .
  • baseUrl: Пока можно оставить "axelbux.github.io". После подключения домена нужно будет изменить на "blog.axelbux.ru" .

🌐 Этап 4: Подключение собственного домена

  1. Настройте домен в GitHub

    • В репозитории перейдите в Settings > Pages.
    • В разделе Custom domain введите ваш домен blog.axelbux.ru и нажмите Save . GitHub автоматически проверит настройки DNS.

  2. Настройте DNS-записи у регистратора домена

    • Войдите в панель управления вашим доменом axelbux.ru (например, у регистраторов вроде Reg.ru, Nic.ru и других).
    • Найдите раздел для управления DNS-записями (зоной домена).
    • Создайте новую запись типа CNAME со следующими значениями :
      • Имя/Хост: blog
      • Значение/Назначение: axelbux.github.io
    • Сохраните изменения.

  3. Ожидание и финальные шаги

    • Обновление DNS-записей может занять от нескольких минут до 24 часов.
    • После успешной проверки в настройках GitHub Pages появится галочка рядом с вашим доменом. Рекомендуется включить опцию Enforce HTTPS.

💡 Полезные советы для новичка

  • Терпение с DNS: Не пугайтесь, если сайт по новому адресу не открывается сразу после настройки. DNS-записям нужно время на распространение.
  • Локализация и внешний вид: В файле quartz.config.ts вы можете настроить шрифты, поддерживающие кириллицу, и цветовую схему сайта .
  • Иконка сайта: Чтобы сменить иконку во вкладке браузера, замените файл quartz/static/icon.png на свой собственный .

Надеюсь, эта инструкция поможет вам завершить настройку. Если на каком-то из этапов возникнут трудности, просто напишите — будем разбираться вместе.

Вид графа

Обратные ссылки