Introduction to CI/CD

Continuous Integration/Continuous Deployment (CI/CD) is an essential practice in modern development that automates the process of code integration, testing, and deployment.

Why GitHub Actions?

Advantages

  • ✅ Native integration with GitHub
  • ✅ Free for public repositories
  • ✅ Marketplace with thousands of actions
  • ✅ Support for multiple languages and platforms
  • ✅ Execution in Docker containers

Basic Concepts

  • Workflow: Automated process
  • Job: Set of steps executed on a runner
  • Step: Individual task
  • Action: Reusable code block

Setting Up the Pipeline

1. Workflow Structure

Create the file .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout
      uses: actions/checkout@v4
      with:
        submodules: true
        fetch-depth: 0
    
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        extended: true
    
    - name: Build
      run: hugo --minify
    
    - name: Deploy to Cloudflare Pages
      uses: cloudflare/pages-action@v1
      with:
        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        projectName: matheuscosta-dev
        directory: public
        gitHubToken: ${{ secrets.GITHUB_TOKEN }}

2. Secrets Configuration

In GitHub, go to Settings > Secrets and variables > Actions and add:

  • CLOUDFLARE_API_TOKEN: Cloudflare API token
  • CLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID

3. Advanced Workflow with Tests

name: CI/CD Pipeline

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

env:
  HUGO_VERSION: 0.121.1

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: ${{ env.HUGO_VERSION }}
        extended: true
    
    - name: Lint Markdown
      uses: articulate/actions-markdownlint@v1
      with:
        config: .markdownlint.json
        files: 'content/**/*.md'
    
    - name: Test Build
      run: hugo --buildDrafts --buildFuture
    
    - name: HTML Validation
      uses: Cyb3r-Jak3/[email protected]
      with:
        root: public/

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
    - uses: actions/checkout@v4
      with:
        submodules: true
        fetch-depth: 0
    
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: ${{ env.HUGO_VERSION }}
        extended: true
    
    - name: Build
      run: hugo --minify
    
    - name: Deploy
      uses: cloudflare/pages-action@v1
      with:
        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        projectName: matheuscosta-dev
        directory: public

Optimizations and Best Practices

1. Caching

- name: Cache Hugo modules
  uses: actions/cache@v3
  with:
    path: /tmp/hugo_cache
    key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.sum') }}
    restore-keys: |
      ${{ runner.os }}-hugomod-

2. Matrix Strategy

strategy:
  matrix:
    hugo-version: [0.120.4, 0.121.1, latest]

3. Conditional Deployment

- name: Deploy to Staging
  if: github.ref == 'refs/heads/develop'
  # Deploy to staging environment

- name: Deploy to Production
  if: github.ref == 'refs/heads/main'
  # Deploy to production

Monitoring and Notifications

Slack Integration

- name: Slack Notification
  uses: 8398a7/action-slack@v3
  with:
    status: ${{ job.status }}
    channel: '#deployments'
    webhook_url: ${{ secrets.SLACK_WEBHOOK }}
  if: always()

Status Badges

Add to your README.md:

![Deploy Status](https://github.com/CosttaCrazy/matheuscosta-dev/workflows/Deploy%20to%20Cloudflare%20Pages/badge.svg)

Common Troubleshooting

1. Submodules not loading

- uses: actions/checkout@v4
  with:
    submodules: recursive

2. Build fails due to dependencies

- name: Install dependencies
  run: |
    npm install -g postcss-cli
    npm install -g autoprefixer

3. Timeout on large builds

- name: Build with timeout
  timeout-minutes: 10
  run: hugo --minify

Conclusion

GitHub Actions offers a powerful and flexible platform for implementing CI/CD. The integration with Cloudflare Pages makes deploying static sites extremely simple and efficient.

Next Steps

  1. Implement automated tests
  2. Configure staging environments
  3. Add performance analysis
  4. Integrate monitoring tools

Useful Resources: