5 Steps to Create a Personal Website with ChatGPT

Build your own personal website effortlessly using ChatGPT Canvas and Projects—no coding experience required!

On Day 7 of the OpenAI Shipmas series, Thomas Dimson demonstrated how he used ChatGPT Canvas and Projects to create his personal webpage from an existing template. Inspired by this practical and exciting use case, I decided to give it a try. In this guide, I’ll walk you through the steps to create your own website—without writing a single line of code!

Before starting, make sure you have the following:

• VS Code: A code editor for modifying the template
• Git Bash: A terminal for Git commands
• GitHub account: To host your project

Let’s get started!

Step 1: Choose a template of your liking

Astro offers numerous free and functional templates to choose from. Browse through the options and use the “Live Demo” button to preview how a template looks. Once you find one you like, click “Get Started,” which will take you to the GitHub repository of the template. I chose this template. 

‍

Step 2: Clone your own project from the template

1. Click “Fork” to clone the project of the creator to your own GitHub repository. 
2. Click “Code” and copy the URL.

‍

‍

Next, open Git Bash, navigate to your preferred directory, and run the following command (copy one line at a time):

git clone https://github.com/phuongnnhi/astro-theme-resume.git (replace your URL here)
cd astro-theme-resume
code . 

This will clone the repository to your local machine and open it in VS Code.

Step 4: Ask ChatGPT to customize the code

• Create a new project in ChatGPT 
• Upload your resumé and any other relevant documents (cover letter) in the file
• Add the instructions:

“This project uses Astro. Please optimize the code for this framework. I want the website’s tone to be professional with a touch of playfulness and wit.”

• In the new chat of the project, choose Canvas in tools, and write:

“Help me modify this webpage using the information in my resume and eliminate the cactus icon /about-astro.png/, this is the code: <copy the file index.astro in your VS Code>"

‍

After ChatGPT provides the updated code, copy it back to the index.astro file in VS Code.

‍

Step 4: Set up the template locally

• Open the terminal in VS Code (Ctrl + `), and put “npm install” to install the necessary packages.
• Upload your profile photo to the “assets” folder (or as specified in your template).
• Double-check the code to make sure the profile photo name and URL are correct.
• Write in the terminal “npm start” to see how the website looks now with your information.

‍

Step 5: Further refine and deploy

Use ChatGPT Projects to refine the content further or add new features like a “Blog” or “Projects” page. When satisfied, push the changes to GitHub by running the following commands in the terminal (one line at a time):

git add . 
git commit -m “update with my info”
git push‍

The latest version is now saved to your GitHub repository. You can deploy the website using your own domain or free hosting platforms like Netlify or Vercel. 

Have fun exploring, and let me know what topic you'd like to dive into next!