Setting up a static personal website in 30 minutes

If you haven’t already down so, please follow the Getting Started instructions here to set up a Github repository for this project.

Overview

Think of this tutorial as a “Hello world!” tutorial for building front-end stack applications using Cursor. It will:

• Should take 30 min-2 hours to setup the website outline.
• Not cost anything.
• See how powerful prompting can be.
• Learn helpful tips for building with Cursor.
• Help you become familiar with deploying a website and setting up a custom domain name (for free).

This tutorial will walk you through the process of creating and deploying a static personal website using Cursor. What does static mean? It means that the website is a front-end only application, and does not have any backend. Note, this means the website will not have any user authentication, database, or backend logic. We’ll save those for future tutorials!

Of course, there are other tools you can use to build your static website (even faster than in this tutorial). For example, you can use Lovable.

Choosing an AI Development Tool

The following AI tools are the ones we would recommend using: Cursor or Loveable.

For the best learning experience, we personally recommend following this tutorial using Cursor. It will set you up with the foundation to build other full-stack applications.

Other advantages of using Cursor include:

• You can choose which service you want to use to host your website (you’re not stuck with the AI coding dev tool’s service), and you can choose a free one too (Vercel).
• You can choose which front-end framework you want to use.
• You have easy access to your codebase.

The full-stack application overview

The development workflow

Step 1: Finding Inspiration and Brainstorming

Before we get started, let’s find some inspiration and brainstorm what we want to build. I’d suggest you Google search ‘personal website design examples’ where you like the aesthetics or design. Here are some examples we have compiled that we like:

• Ashley Janssen

• Rubens Cantuni

• Red Russak

• Karena Cai

In this tutorial, we are going to use the inspiration from https://www.karenacai.com/ and replicate that specific design. Note, you can use any design you want! This tutorial is meant to show you some techniques and prompting tips. You don’t have to follow it exactly. In fact, we recommend you choose a different design than the one we will implement!

Step 2: Setting up the project and writing the Product Requirements Document (PRD)

Brainstorm

Brainstorm the design and functionalities you want for the website.

• Good SEO.
• Renders very quickly.
• Has a blog, projects, about me, and contact sections.
• Has a navigation (nav) bar.
• Dynamic, has animations?

Don’t be afraid to ask ChatGPT or Claude to help you brainstrom any other ideas, if you don’t know what you want.

Given the above, you want to determine which front-end framework you want to use! Remember if you refer back to .

Stop to think

Choosing a Front-End Framework

Now that we know what which framework we want to use, let us set up the project. This will give us the original set of files we will need to build out the website.

We chose Astro, since it is a modern static site builder that is very fast and has a great developer experience. To set up a new Astro project, in your terminal, follow the instructions here and run the command:

npm create astro@latest

Writing the PRD (Product Requirements Document)

Insert text here.

[TODO]: Add PRD here.

[TODO]: Add video here.

Step 4: Building the Static Website

Now that we have the project set up and the PRD, we can start having Cursor build the website for us!

Step 6: Deployment and Domain Setup

Deploy the website with Vercel

Deployment is the process of putting your website online so that it can be accessed by anyone.

Domain Setup with Namecheap

This is the process of buying a domain name and pointing it to the website we just deployed to Vercel.

[TODO]: Add video here.

Step 7: Monitoring and Analytics

Now that we have deployed the website, we want to monitor and analyze the traffic on the website. We would recommend using Google Analytics to set this up.

Google Analytics

[TODO]: Add video here.