How to Build a Custom Website with Claude GitHub Vercel and Squarespace

2 Sents

Building a website used to require learning how to code along with understanding server infrastructure and connecting arcane tools together manually. Now you can build a fully custom and beautifully designed website for just the cost of a domain name by letting Claude Code and Claude Cowork do the heavy lifting for you.

Before you begin: This guide assumes you are using a Mac computer with Google Chrome. You will also need access to a paid Claude account to use Claude Code and Claude Cowork.

Estimated Time: About 45 minutes

If you have ever wanted your own corner of the internet, only to get overwhelmed by the technical hurdles, you are in luck. Today we are going to use AI to build a custom website from scratch.

This guide will walk you through exactly what to do at each step. It gives you the exact prompts you need to get Claude to build and deploy and design your website.

Step 1: Buy a Domain on Squarespace

The first step is buying a domain. Buying a domain simply means reserving an easy to remember URL like nathanfennel.com so that when people type it into their browser they get to your website.

Usually websites that end in ".com" cost about $20 per year. There are some domains that are cheaper for the first year and sometimes as inexpensive as $4. I still recommend trying to get your FirstnameLastname.com if it is available. It is easily recognized and professional and fairly timeless.

Head over to Squarespace Domains and purchase the domain you want.

Step 2: Get a Free GitHub Account

Next you need a place to store the code for your website. GitHub is a free website that lets you save your code online. This is where a massive portion of the internet's code is stored safely.

Go to GitHub.com and click "Sign up".
Follow the prompts to create your free account.

Step 3: Sign into GitHub on Your Computer

Now that you have an account you need to sign in to GitHub on your computer so your local files can sync up with the internet. We will use the Terminal for this.

Open Spotlight on your Mac by pressing Cmd + Space and type "Terminal" and hit Enter.

Copy and paste the following commands into your terminal and press Enter sequentially:

Install the GitHub CLI:
```
brew install gh
```
Log in to GitHub:
```
gh auth login
```
Follow the prompts on your screen to authenticate in your browser.
Create a local folder for your code:
```
mkdir -p ~/Documents/GitHub
cd ~/Documents/GitHub
```
This creates a new directory in your "Documents" folder called "GitHub" which is where we will put your website projects locally.

Step 4: Create a Vercel Account

After GitHub is set up it is time to create a Vercel account. Vercel is free with some limitations that a personal site will not hit and will make it SUPER easy for you to deploy a website without needing to know what "Deploy" even means.

Go to Vercel.com and click "Sign up".
Choose Continue with GitHub. This links your new Vercel account to where your code is stored.

Note that you should please not use Claude Cowork for signing into accounts because that has the potential to expose your passwords. Once you are safely signed in, Claude Cowork can take care of almost everything else.

Step 5: Start Your Project with Claude Code

The next thing we want to do is have Claude open your /Documents/GitHub/ directory and create the initial project. It is going to be very basic just so we can wire everything together.

Open the Claude Desktop App and navigate to the Code tab and use this exact prompt:

"Please create a new website project in the ~/Documents/GitHub/ directory. For now it should just be a basic starter page that says 'Under Construction while we build something awesome' so we can connect everything together. Once created please commit the changes to git and create a new private repo on GitHub and push the repo to GitHub and then create a README and commit it and push the README file."

Let Claude Code work for a couple of minutes to set up the foundation.

Step 6: Connect the Pieces with Claude Cowork

Once the repository is created head over to Claude Cowork.

In Claude Cowork select the specific directory for your new website like ~/Documents/GitHub/YourWebsiteName/ so Claude knows where to work.

Selecting a directory in Claude Cowork

Then copy and paste this prompt into Claude Cowork:

"Please create a new project in Vercel based on the GitHub repo we just created. Make sure the Vercel project is deployed and show me the deployed website and then connect my domain that I just bought on Squarespace to point at the deployed Vercel website."

Note that domain configuration relies on DNS propagation. It could take a couple of minutes or up to a couple of hours before you see your website live at your custom Squarespace domain.

Step 7: Figure Out What Your Website Should Be

While you are waiting for everything to connect open a brand new Chat with Claude to brainstorm what your website is going to be about.

Use this prompt to kick off the conversation:

"I want to figure out what my website should be like. Can you ask me several questions in a row one at a time to figure out what I like and what my interests are and what the purpose of the site could be and more? When we are done chatting and you have a good understanding of what I want please give me a comprehensive prompt I can bring over to Claude Code to have it start building out the content of the website."

Answer Claude's questions. At the end it will hand you a customized prompt. Take that prompt back to the Code tab and let Claude Code start building out your content.

Step 8: Design Your Site using Claude Skills

While Claude Code is generating your content let us make the site look amazing. We will use Claude Skills to give it a professional design.

In your Claude interface use this prompt to grab the right tool:

"Please install the Website Design skill from Anthropic."

Once the Website Design skill is installed give Claude some inspiration. Find a website or a few websites whose design you really admire and use this prompt:

"Using the Website Design skill please design my website. I really like the design of [Insert Website URL 1] and [Insert Website URL 2]. Please make my site look unique in the way I want by drawing inspiration from these sites while giving it its own character."

Step 9: Add a Blog

Every great personal site should have a place to share your thoughts. Head back to Claude Code and drop in this prompt:

"Please set up a 'Blog' section on my website so I can start publishing articles."

Step 10: Automate Your Writing with a Cowork Routine

Finally let us make maintaining your new blog completely frictionless by creating an automated routine in Claude Cowork.

Paste this prompt into Cowork:

"Please create a routine that looks at my list of blog ideas and helps me automatically write a blog post when I have a new idea. Make sure to humanize the post so it doesn't sound like it was made by AI. The routine should take my idea and write the new blog post and commit it and push the changes to GitHub so that it automatically publishes to my live website."

Whenever you have a stroke of inspiration you simply provide your idea to this routine. Claude Cowork will draft it and refine it and save it and push it live automatically.

Wrapping Up

If you followed these steps congratulations. You now have your own custom website. It is easily maintainable and matches your personal style and is publicly visible to the world and the only ongoing fee you have to worry about is your annual domain registration.

Have you completed these steps? I would love to see what you built.

Submit your website to be showcased in our built-with-AI gallery!