AI-Powered Portfolio: Building a Developer Site with Cursor.ai and GitHub Actions

In an effort to modernise my developer portfolio while reducing hosting costs and setup complexity, I explored an AI-assisted workflow using Cursor.ai for development and GitHub Pages with GitHub Actions for deployment. The result is a clean, cost-effective portfolio that is simple to maintain and easy to scale.

This article outlines the process I followed—from initial planning through to deployment—along with the lessons learned and practical insights for anyone considering a similar approach.

Motivation

My previous portfolio was hosted on a paid platform and updated infrequently. I had a basic design template I was happy to reuse, but I wanted to streamline both the build and deployment process. The goal was to create a modern static website that could be hosted for free, without sacrificing flexibility or maintainability.

While I've built websites before, I often found the setup phase—especially around bundling, hosting, and deployment—to be the most time-consuming. This project was an opportunity to explore how much AI could accelerate that process.

Why Cursor.ai?

I had used traditional AI tools like ChatGPT in the past to generate small code snippets. However, Cursor.ai stood out by integrating AI directly into the IDE, allowing code to be written straight into files—minimising context-switching and copy-paste errors.

Cursor supports a range of AI models. I initially worked with Claude 3.4 and transitioned to Claude 3.7 after its release. Each brought distinct strengths in terms of code clarity and responsiveness. Cursor's ability to generate boilerplate, suggest component structures, and assist with debugging proved especially useful throughout the project.

There was a short adjustment period to learn the interface, particularly around when to use Cursor's agent, chat, or editor. However, once understood, the workflow became intuitive and efficient.

Hosting with GitHub Pages and Automating with GitHub Actions

Choosing GitHub Pages was primarily driven by cost—it's free—and prior experience. I had previously used AWS S3 for static site hosting, but found the build and deployment process more cumbersome.

In contrast, GitHub Actions offered a straightforward and powerful way to automate the build and deployment process. It enabled the site to be deployed directly from a separate branch, significantly reducing manual overhead.

I briefly experimented with an in-browser editor connected to the repository. Although the editor proved more complex than necessary for this project, GitHub Actions demonstrated how easily such integrations could be supported.

Development Workflow

Starting with Cursor.ai

I began with a general prompt:

"I want to create a portfolio website that can be hosted on GitHub Pages."

Keeping prompts high-level proved effective for generating initial structure and ideas. For more specific tasks—such as implementing navigation or refining layout—I found it best to focus each prompt on a single topic.

One particularly notable moment was when I asked Cursor to recreate a hero section I had previously designed but struggled to implement in CSS. Cursor produced a solution that was almost complete, requiring only minor adjustments.

Scope and Features

The portfolio was designed to be clear, accessible, and easy to navigate. Core sections included:

class="lined-list">
• A landing page with key details
• An "About" section
• A blog for documenting projects and ideas
• A contact page

Cursor generated much of the initial styling, often using Material Design principles. This aligned well with my own design preferences—clean lines, readable typography, and a focus on usability.

The project progressed in two main phases: design exploration and code implementation. During the first phase, the codebase became disorganised as I prioritised layout experimentation. Once the design was settled, I refactored and rewrote the code for clarity and maintainability—a process that significantly improved my understanding of the architecture.

GitHub Configuration and Deployment

Repository Setup

Setting up GitHub Pages was relatively straightforward. The main challenge was ensuring that the correct folder was being referenced during the deployment process, especially when using Vite, which manages output paths differently from other build tools.

GitHub Actions Workflow

The GitHub Actions pipeline performs the following steps:

1. Checks out the code
2. Sets up the Node.js environment
3. Installs dependencies
4. Builds the project
5. Deploys the dist folder to the gh-pages branch

A simplified version of the workflow is as follows:

name: GitHub Pages Deployment

on:
  push:
    branches: ["main"]
  workflow_dispatch:

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

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

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build website
        run: npm run build

      - name: Add CNAME file for custom domain
        run: echo 'bobbieallsop.co.uk' > dist/CNAME

      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4
        with:
          path: dist

Debugging the workflow involved resolving issues with relative paths and folder structures, which were largely related to Vite rather than GitHub Actions. Cursor.ai was helpful in identifying and correcting these issues.

Outcomes

The final result is a fully functional, maintainable portfolio site deployed via GitHub Pages and updated automatically through GitHub Actions. The codebase is readable and adaptable—something I could not have produced in the same timeframe without AI support.

While it does not offer the same level of simplicity as a website builder, it is significantly more flexible and entirely free to run. I now feel confident creating new pages or components as needed.

Reflections and Learnings

Benefits of Using Cursor.ai

• Significantly accelerated development
• Generated maintainable boilerplate
• Provided effective debugging support

Advantages of GitHub Pages and Actions

• Free hosting with custom domain support
• Automates deployment process from code to live site
• Introduces practical CI/CD principles

Advice for Others

• Allow AI to assist with initial prototypes, but be prepared to refactor
• Use focused prompts for better results
• Visual design can emerge from experimentation—don't over-plan early

In future projects, I would continue using this toolset. I'm also exploring the possibility of building a simplified content editor for easier updates—now made more feasible thanks to the underlying automation.

Final Thoughts

This project demonstrated how AI can meaningfully support the development process—from design to deployment—especially for developers working independently. The combination of Cursor.ai, GitHub Pages, and GitHub Actions offers a streamlined, cost-effective workflow for building and maintaining personal websites.

If you're looking to modernise your portfolio or experiment with AI in development, this approach offers both speed and flexibility.