Част 8: Автоматичен деплой на Astro сайт в Cloudflare Pages през GitHub Actions

В това ръководство ще ви покажа пълния процес за организиране на работен поток (workflow), при който всяко изпращане на код (git push) към GitHub автоматично компилира и публикува вашия Astro сайт в Cloudflare Pages.

Целият процес отнема по-малко от 5 минути на проект, а след това поддръжката и обновяването на сайта стават с една единствена команда.

---

1. Подготовка на локалния проект

Преди да качим кода в GitHub, трябва да се уверим, че служебните файлове и папки няма да замърсят репозиторията.

Стъпка 1: Проверка на .gitignore

Отворете терминала в папката на вашия проект на компютъра и проверете за съществуването на файла .gitignore.

Ако файлът липсва, го създайте със следната команда:

cat << 'EOF' > .gitignore
# build output
dist/
# generated types
.astro/

# dependencies
node_modules/

# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# environment variables
.env
.env.production

# system files
.DS_Store
.idea/
EOF

---

2. Инициализиране на Git и качване в GitHub

Стъпка 1: Локален Git commit

В терминала (в папката на проекта) изпълнете последователно следните команди:

git init
git add .
git commit -m "Initial commit"

Стъпка 2: Създаване на празно репозитори в GitHub

1. Отворете GitHub.com и натиснете бутона + (горе вдясно) → New repository.
2. Въведете името на проекта (напр. my-astro-site).
3. Изберете Private или Public.
4. ВАЖНО: Не маркирайте Add README, Add .gitignore или License (репозиторията трябва да е абсолютно празна).
5. Натиснете Create repository.

Стъпка 3: Свързване и качване през SSH

Копирайте и изпълнете следните команди в терминала (заменете ПОТРЕБИТЕЛ и ИМЕ-НА-ПРОЕКТА с вашите данни):

git branch -M main
git remote add origin [email protected]:ПОТРЕБИТЕЛ/ИМЕ-НА-ПРОЕКТА.git
git push -u origin main

---

3. Настройка на Cloudflare API Token в GitHub

За да може GitHub Actions да качва готовия сайт в Cloudflare Pages от ваше име, трябва да му предоставим сигурен токен за достъп.

1. Отворете новосъздаденото репозитори в GitHub.
2. Отидете на Settings → Secrets and variables → Actions.
3. Натиснете бутона New repository secret.
4. За Name въведете точно: CLOUDFLARE_API_TOKEN
5. За Secret поставете вашия API Token от Cloudflare.
6. Натиснете Add secret.

Забележка по сигурността: Препоръчително е и CLOUDFLARE_ACCOUNT_ID да се пази като secret (напр. CLOUDFLARE_ACCOUNT_ID), вместо да стои хардкоднат директно в deploy.yml. Account ID-то не е толкова чувствително колкото API токена, но да го извадите от committed кода е добра практика — особено при публично репозитори.

---

4. Създаване на GitHub Actions Workflow

Това е файлът, който управлява целия автоматичен процес по инсталиране на пакети, изграждане на сайта (npm run build) и публикуване в Cloudflare.

1. В раздела Code на вашето репозитори натиснете Add file → Create new file.
2. В полето за име въведете следния път (използвайте / за създаване на папките): .github/workflows/deploy.yml
3. Поставете следния пълен YAML код:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm ci

      - name: Build Astro site
        run: npm run build

      - name: Create Cloudflare Pages Project
        continue-on-error: true
        run: npx wrangler pages project create ИМЕ-НА-ПРОЕКТА --production-branch=main
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=ИМЕ-НА-ПРОЕКТА

Забележка: Заменете ИМЕ-НА-ПРОЕКТА на двата съответни реда с точното име на вашия проект в Cloudflare Pages. Не забравяйте да добавите и CLOUDFLARE_ACCOUNT_ID като repository secret (виж раздел 3), тъй като workflow-ът вече го чете оттам, а не хардкоднато.

4. Натиснете Commit changes… за запазване на файла.

---

5. Проверка и последваща работа

След запазване на файла отидете в раздела Actions на репозиторията. Ще видите, че първото автоматично изграждане вече се изпълнява. Когато завърши, ще светне зелена чавка (✔), а сайтът ви ще бъде обновен на живо.

Новият ви ежедневен работен процес

Оттук нататък, за да публикувате нови промени по сайта, изпълнявате само следните 3 команди в терминала:

git add .
git commit -m "Update site content"
git push

GitHub Actions ще се погрижи за всичко останало автоматично!