Quick Start Guide

This guide walks you through creating your first Astro site with PhantomWP. By the end, you'll have a working website ready to customize.

Prerequisites

Before you begin, make sure you have:

• A GitHub account (free tier works fine)
• An email address for your PhantomWP account
• About 5 minutes of time

That's it - no software to install, no command line required.

Step 1: Create Your Account

1. Go to PhantomWP and click Get Started
2. Sign up with your email address
3. Verify your email by clicking the link we send you

Step 2: Connect GitHub

After signing in, connect your GitHub account:

1. On the dashboard, click Connect GitHub Account
2. Authorize PhantomWP to access your GitHub
3. You'll be redirected back to the dashboard

Step 3: Create Your First Project

1. Click Create New Project on the dashboard
2. Enter a name for your repository (e.g., my-astro-site)
3. Choose whether the repository should be public or private
4. Click Create & Launch Codespace

PhantomWP will now:

• Create a new GitHub repository
• Set up the Astro template with all files
• Launch a GitHub Codespace
• Open the IDE automatically

This takes about 3-4 minutes. You'll see progress updates as each step completes.

Step 4: Explore the IDE

Once your Codespace is ready, you'll see the PhantomWP IDE:

The IDE has several key areas:

For a complete tour, see the IDE Overview.

Step 5: Make Your First Edit

Let's personalize your site:

1. In the file tree, click on src/pages/index.astro
2. Find the <h1> tag with the site title
3. Change the text to something personal
4. Press Cmd/Ctrl + S to save

Watch the preview update instantly with your changes.

Step 6: Add a Component

Try adding a pre-built section from the Component Library:

1. Click the Sections icon in the header (grid icon)
2. Browse the available section templates
3. Click a section to preview it
4. Click Insert to add it to your page

Step 7: Deploy Your Site

When you're ready to share your site with the world:

Commit Your Changes

1. Click the Git icon in the header
2. Review your changes
3. Write a commit message (e.g., "Update homepage")
4. Click Commit & Push

Set Up Vercel Deployment

1. Go back to the Dashboard
2. Find your project card
3. Click Setup Deployment
4. Enter your Vercel token (see Deploying to Vercel for details)
5. Follow the prompts to connect your repository

Once connected, every push to GitHub automatically deploys your site. You'll see the deployment status and live URL on your dashboard.

What's Next?

You've created your first PhantomWP project. Here's what to explore next:

Master the IDE

• IDE Overview - Learn all the features
• Visual Editor - Edit pages visually
• Menu Builder - Create navigation menus
• Media Manager - Manage images and files

Build Faster

• Component Library - Pre-built sections
• AI Assistant - Get AI help while coding

Connect WordPress

If you have an existing WordPress site:

• Connecting WordPress - Set up the connection
• Importing Content - Bring over your content

Troubleshooting

Having issues? Here are quick fixes for common problems:

Codespace Won't Start

If your Codespace is stuck starting:

1. Go to the Dashboard
2. Click the Remove button next to the Codespace
3. Click Create Codespace to create a fresh one

Preview Not Loading

If the preview shows a blank page:

1. Make sure the Codespace status shows "Running"
2. Wait 10-15 seconds for the dev server to start
3. Click the refresh icon in the preview panel

Changes Not Saving

If your changes aren't persisting:

1. Make sure you see "Saved" in the status bar
2. Check that the tab doesn't show an unsaved indicator (dot)
3. Try pressing Cmd/Ctrl + S manually

For more help, see our Troubleshooting Guide or visit the Support page.