A beginner-friendly workshop companion guide for learning Claude Code - from zero to deployed project.

This is an interactive workshop guide that teaches complete beginners how to:

• Set up GitHub and Git
• Install and use Claude Code
• Build a real project with AI assistance
• Deploy to GitHub Pages
• Use the Claude API
• Add analytics with PostHog

Workshop Duration: ~3-3.5 hours

Target Audience: Complete beginners with no coding experience

• Node.js 18+ installed
• npm

# Clone the repository
git clone https://github.com/inosaint/ai-workshop.git

# Navigate to the project
cd ai-workshop

# Install dependencies
npm install

# (Optional) Set up analytics
# Copy .env.example to .env and add your PostHog API key
cp .env.example .env
# Then edit .env with your PostHog credentials

# Start the development server
npm run dev

The site will be available at http://localhost:4321/ai-workshop/

npm run build

The built site will be in the dist/ folder.

npm run preview

This project includes a GitHub Actions workflow for automatic deployment.

1. Fork or push this repository to your GitHub account

2. Go to Settings → Pages

3. Under "Build and deployment", select:

   • Source: "GitHub Actions"

4. Update astro.config.mjs with your GitHub username:

   site: 'https://YOUR-USERNAME.github.io',

5. Push to the main branch

6. The site will automatically deploy to https://YOUR-USERNAME.github.io/ai-workshop/

ai-workshop/
├── .github/
│   └── workflows/
│       └── deploy.yml      # GitHub Actions deployment
├── src/
│   ├── assets/             # Logo and images
│   ├── content/docs/       # Workshop content (Markdown)
│   │   ├── introduction/
│   │   ├── github-setup/
│   │   ├── install-claude-code/
│   │   ├── choose-project/
│   │   ├── building-with-claude/
│   │   ├── testing-locally/
│   │   ├── deploy-github-pages/
│   │   ├── claude-api/
│   │   ├── analytics-posthog/
│   │   ├── optional/
│   │   ├── reference/
│   │   └── troubleshooting/
│   └── styles/             # Custom CSS
├── public/                 # Static assets
├── astro.config.mjs        # Astro configuration
└── package.json

This project includes PostHog analytics integration with automatic course progression tracking. To enable it:

1. Sign up for a free account at PostHog
2. Get your API key from your PostHog project settings
3. Copy .env.example to .env
4. Add your PostHog API key to the .env file

The analytics will automatically track:

• Page views with module progression (1-11)
• User funnels through the course
• Checkpoint engagement
• Popular pages and sections

See ANALYTICS.md for detailed tracking capabilities and how to create dashboards in PostHog.

Replace placeholder images in the content with actual screenshots:

1. Add images to public/images/
2. Update Markdown to use: ![Alt text](/ai-workshop/images/your-image.png)

Edit src/styles/custom.css to change the color scheme.

Add new Markdown files in src/content/docs/ and update the sidebar in astro.config.mjs.

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

You are free to share and adapt this material for non-commercial purposes, as long as you give appropriate credit and share your adaptations under the same license.