Quick Start Guide

This guide will walk 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, you'll need to 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 panels:

File Tree (Left)

Browse and manage all files in your project. Click any file to open it in the editor.

Code Editor (Center)

Edit your files with full syntax highlighting, autocomplete, and error detection. The editor supports all file types including .astro, .md, .ts, and more.

Live Preview (Right)

See your changes instantly! The preview updates automatically as you save files.

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: Deploy Your Site

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

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

Your changes are now on GitHub!

Set Up Vercel Deployment

1. Go back to the Dashboard
2. Find your project card
3. Click Setup Deployment
4. Enter your Vercel token
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.

Next Steps

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

• Using the IDE — Learn all the IDE features
• WordPress Integration — Import content from WordPress
• Deployment — Learn more about deployment options

Troubleshooting

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

Need more help? Check our Support page or reach out directly.