Close Menu
    DevStackTipsDevStackTips
    • Home
    • News & Updates
      1. Tech & Work
      2. View All

      The Ultimate Guide to Node.js Development Pricing for Enterprises

      July 29, 2025

      Stack Overflow: Developers’ trust in AI outputs is worsening year over year

      July 29, 2025

      Web Components: Working With Shadow DOM

      July 28, 2025

      Google’s new Opal tool allows users to create mini AI apps with no coding required

      July 28, 2025

      I replaced my Samsung OLED TV with this Sony Mini LED model for a week – and didn’t regret it

      July 29, 2025

      I tested the most popular robot mower on the market – and it was a $5,000 crash out

      July 29, 2025

      5 gadgets and accessories that leveled up my gaming setup (including a surprise console)

      July 29, 2025

      Why I’m patiently waiting for the Samsung Z Fold 8 next year (even though the foldable is already great)

      July 29, 2025
    • Development
      1. Algorithms & Data Structures
      2. Artificial Intelligence
      3. Back-End Development
      4. Databases
      5. Front-End Development
      6. Libraries & Frameworks
      7. Machine Learning
      8. Security
      9. Software Engineering
      10. Tools & IDEs
      11. Web Design
      12. Web Development
      13. Web Security
      14. Programming Languages
        • PHP
        • JavaScript
      Featured

      Performance Analysis with Laravel’s Measurement Tools

      July 29, 2025
      Recent

      Performance Analysis with Laravel’s Measurement Tools

      July 29, 2025

      Memoization and Function Caching with this PHP Package

      July 29, 2025

      Laracon US 2025 Livestream

      July 29, 2025
    • Operating Systems
      1. Windows
      2. Linux
      3. macOS
      Featured

      Microsoft mysteriously offered a Windows 11 upgrade to this unsupported Windows 10 PC — despite it failing to meet the “non-negotiable” TPM 2.0 requirement

      July 29, 2025
      Recent

      Microsoft mysteriously offered a Windows 11 upgrade to this unsupported Windows 10 PC — despite it failing to meet the “non-negotiable” TPM 2.0 requirement

      July 29, 2025

      With Windows 10’s fast-approaching demise, this Linux migration tool could let you ditch Microsoft’s ecosystem with your data and apps intact — but it’s limited to one distro

      July 29, 2025

      Windows 10 is 10 years old today — let’s look back at 10 controversial and defining moments in its history

      July 29, 2025
    • Learning Resources
      • Books
      • Cheatsheets
      • Tutorials & Guides
    Home»Development»How To Deploy To Vercel With GitHub Actions

    How To Deploy To Vercel With GitHub Actions

    June 10, 2025

    Vercel is a cloud platform or Platform-as-a-Service (PaaS) designed to help frontend developers create, preview, and deploy web applications swiftly and efficiently. In this tutorial, we’ll focus on deploying a Next.js application to Vercel using GitHub Actions.

    In a previous article, we built a Next.js portfolio blog. Here, you’ll learn how to deploy it on Vercel with GitHub Actions.

    Prerequisites

    To be able to deploy your project, you should have a GitHub repository of the project (you can still follow along if you already have a Next.js project), and a Vercel account. Here is the GitHub repository that we’ll be working with. You can clone it to follow along.

    How to Deploy Your Next App

    Create Vercel Token and Add it to Your Secrets in GitHub

    In your Vercel account, go to Settings, then go to Tokens.

    Vercel account settings tokens.

    In the Create Token section, enter a name for your token, select an expiration date and click “create”.

    Creating a vercel token

    You should see a success message with your token. Next, go to your GitHub repository, and click on the “Settings“ tab.

    Vercel, token created success message.

    In the Settings tab, go to Secrets and Variables on the sidebar, then click on Actions.

    Actions secrets in GitHub repository settings.

    You’ll see a section for adding secrets. Add a secret named VERCEL_TOKEN, and paste the token there.

    vercel token, project id, org id.

    The Vercel token is a token used to authenticate the GitHub runner. The Vercel CLI installed on the GitHub runner is going to execute the commands with your account. So, instead of it having to login, it uses the access token to verify that it was actually authorized by you to take the actions.

    The Organization ID is used to tell Vercel which organization or team account the project should be created under.

    The Project ID then tells Vercel the specific project you want to deploy. Just like the Organization ID, it is a unique identifier.

    Install the Vercel CLI and Login

    Use the command below to install vercel CLI globally on your computer:

    npm install -g vercel
    

    Then log into the CLI with the following command:

    vercel login
    

    Use one of the options to login.

    login methods

    I used GitHub. Select one with your arrow keys, and click enter.

    login success

    vercel login

    Create a Vercel Project from Your Local Directory

    Navigate to your project directory if you’re not already in it. If you have already created a project on Vercel through the web interfce, use the vercel link command to link your current directory to the Vercel project. If you don’t already have a Vercel project, just type vercel in the CLI and follow the prompts to setup the project.

    Create new Vercel project

    With that, Vercel will create a .vercel folder in the project. Open it, and go to the project.json file.

    Project.json

    In the file, you should see your project ID and organization ID. Copy them and create secrets in your GitHub repository for each one.

    vercel token, org ID, project ID.

    Create your GitHub Workflow File

    At the root of your project folder, create the .github/workflow folder. Then create a workflow file called vercel_deploy.yml.

    f3c3a4ca-5d19-4866-a69d-9f4d3a760d8f

    In the file, write this:

    name: Vercel Production Deployment
    env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    on:
      push:
        branches:
          - main
        paths:
          - '01-simple-blog/**'  
    
    jobs:
      Deploy-Production:
        runs-on: ubuntu-latest
        defaults:
          run:
            working-directory: 01-simple-blog
        steps:
          - uses: actions/checkout@v2
    
          - name: Install Vercel CLI
            run: npm install --global vercel@latest
    
          - name: Pull Vercel Environment Information
            run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
    
          - name: Build Project Artifacts
            run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
            continue-on-error: true
    
          - name: Deploy Project Artifacts to Vercel
            run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
    

    This is the workflow file for my simple-writer-portfolio project.

    First, we have the environment variables:

    env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    # Other code
    

    Then we have the trigger. This triggers when I push to the main branch, affecting files in the 01-simple-blog subdirectory.

    # Previous code
    on:
      push:
        branches:
          - main
        paths:
          - '01-simple-blog/**'  
    # Other code
    

    Then we have the job definition. Here, I defined a job “Deploy-Production” that runs on Ubuntu. By default, all commands there will run in the 01-simple-blog directory, which is equivalent to running cd 01-simple-blog from the root before running commands on the shell. I did this because the Next.js project is in that directory, where the package.json is located.

    # Previous code
    jobs:
      Deploy-Production:
        runs-on: ubuntu-latest
        defaults:
          run:
            working-directory: 01-simple-blog
    # Other code
    

    Then the steps involved:

    # Previous code
     steps:
          - uses: actions/checkout@v2
    
          - name: Install Vercel CLI
            run: npm install --global vercel@latest
    
          - name: Pull Vercel Environment Information
            run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
    
          - name: Build Project Artifacts
            run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
            continue-on-error: true
    
          - name: Deploy Project Artifacts to Vercel
            run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
    

    With these steps, Vercel is first installed on the GitHub runner. Then the vercel environment information is pulled. The project is built with vercel build, and the pre-built artifacts are then pushed to Vercel.

    Push to GitHub and watch your code deploy

    Stage your changes, if any:

    git add .
    

    Commit the changes:

    git commit -m "Added GitHub Actions workflow"
    

    And push:

    git push origin
    

    Now, go to your repository online, and check the deployment.

    3fa5a9a8-c14b-4f55-9e04-c51310500c3f

    Workflow run logs

    Conclusion

    With your basic GitHub workflow in place, you can now make changes to your code, push to GitHub, and have it deploy automatically. Though Vercel allows you to connect your repository directly, this method provides you with more flexibility and customizability. If you enjoyed this article, share it with others. You can also reach me on LinkedIn or X.

    Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More 

    Facebook Twitter Reddit Email Copy Link
    Previous ArticleCVE-2025-5958 – Google Chrome Media Use After Free Heap Corruption
    Next Article CVE-2024-9062 – Apple Archify Local Privilege Escalation Vulnerability

    Related Posts

    Development

    Performance Analysis with Laravel’s Measurement Tools

    July 29, 2025
    Development

    Memoization and Function Caching with this PHP Package

    July 29, 2025
    Leave A Reply Cancel Reply

    For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

    Continue Reading

    New HTTPBot Botnet Launches 200+ Precision DDoS Attacks on Gaming and Tech Sectors

    Development

    CVE-2025-5149 – WCMS Remote Authentication Bypass

    Common Vulnerabilities and Exposures (CVEs)

    DragonForce Ransomware Claimed To Compromise Over 120 Victims in The Past Year

    Security

    CVE-2025-39363 – AlphaEfficiencyTeam Custom Login and Registration Stored Cross-site Scripting Vulnerability

    Common Vulnerabilities and Exposures (CVEs)

    Highlights

    CVE-2024-39730 – IBM Datacap Navigator Click Hijacking Vulnerability

    June 27, 2025

    CVE ID : CVE-2024-39730

    Published : June 28, 2025, 1:15 a.m. | 1 hour, 59 minutes ago

    Description : IBM Datacap Navigator 9.1.7, 9.1.8, and 9.1.9 could allow a remote attacker to hijack the clicking action of the victim. By persuading a victim to visit a malicious Web site, a remote attacker could exploit this vulnerability to hijack the victim’s click actions and possibly launch further attacks against the victim.

    Severity: 5.4 | MEDIUM

    Visit the link for more details, such as CVSS details, affected products, timeline, and more…

    Hands-On Guide: Getting started with Mistral Agents API

    June 3, 2025

    The Xbox Meta Quest 3S is fine — but there was a better augmented reality partner for Microsoft and Xbox Cloud Gaming

    July 1, 2025

    OpenAI is fighting back The New York Times’ data preservation demand

    June 6, 2025
    © DevStackTips 2025. All rights reserved.
    • Contact
    • Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.