Deploying an Astro Template to the Cloud

·

How to Deploy an Astro Template to the Cloud

Part 1: The CLI to Cloudflare Workflow (Via GitHub Codespaces)

Because you are not using a local machine, you cannot run a standard desktop CLI. Instead, you spin up a GitHub Codespace inside an empty repository to act as your "cloud computer" and execute the Astro CLI tool (create-astro) there.

Step 1: Initialize an Empty Repository on GitHub

  1. Go to GitHub.com and log in.
  2. Click the + icon in the top-right corner and select New repository.
  3. Name your repository (e.g., astro-blog-cli).
  4. Keep the repository completely empty—do not add a README, .gitignore, or license.
  5. Click Create repository.

Step 2: Open GitHub Codespaces

  1. On your newly created, empty repository page, look for the quick setup instructions.
  2. Click the Codespaces tab near the top or middle of the screen (or click the green Code button if visible, then select the Codespaces tab).
  3. Click Create codespace on main (or Create a new codespace).
  4. A full visual code editor (VS Code) with an integrated terminal will open directly inside your web browser.

Step 3: Run the Astro CLI in the Cloud Terminal

  1. At the bottom of your browser window, look for the Terminal tab. If it is closed, open it via the top menu: Terminal → New Terminal.
  2. Type the following command to launch the Astro setup wizard directly inside the empty folder:

    npm create astro@latest .

    (Note: The . tells the CLI to install Astro directly inside your current repository directory instead of creating a new folder).
  3. The interactive CLI wizard will prompt you with a few questions inside your terminal:
    • Where should we create your new project? (It will automatically target the current directory .).
    • How would you like to start your new project? Use your arrow keys to select Include sample files.
    • Do you plan to write TypeScript? Select Yes or No based on preference.
    • Install dependencies? Select Yes.
  4. Type git status in the terminal. You will see a list of newly generated files.

Step 4: Commit and Push Files back to GitHub

  1. In the terminal, run the following commands:

    git add .
    git commit -m "Initial Astro CLI template setup"
    git push origin main
  2. Close the Codespaces tab. Refresh your GitHub repository page to see all Astro project files stored there.

Step 5: Connect and Deploy to Cloudflare Pages

  1. Log into your Cloudflare Dashboard.
  2. Navigate to Workers & Pages → Create.
  3. Select the Pages tab and click Connect to Git.
  4. Authorize Cloudflare with GitHub and select your repository.
  5. Click Begin setup.
  6. Under Build settings, select Astro as the framework preset. Cloudflare will auto-fill build command (npm run build) and output directory (dist).
  7. Click Save and Deploy. Cloudflare will install dependencies and launch your site live.

Part 2: The Direct Website Template Workflow (No CLI)

If you prefer to bypass terminal commands entirely, you can download a pre-built template directly from the Astro website or third-party creators using GitHub's automated cloning layout.

Step 1: Select a Template from the Astro Website

  1. Navigate to the official Astro Themes Directory.
  2. Filter by Blog category.
  3. Find a free template you like and click it.
  4. Click Source Code to open the GitHub repository.

Step 2: Use the Template to Create Your Repository

  1. On the template’s GitHub page, click Use this template (or Fork if unavailable).
  2. Select Create a new repository.
  3. Choose your account, name the repo, and set Public or Private.
  4. Click Create repository from template. GitHub will clone the files instantly.

Step 3: Edit Directly via GitHub (Optional)

  1. On your new repository page, click Code → Codespaces → Create codespace on main.
  2. Edit Markdown files or layout configs.
  3. Commit and push changes via source control or terminal.

Step 4: Connect and Deploy to Cloudflare Pages

  1. Go to Cloudflare Dashboard → Workers & Pages → Create → Pages.
  2. Click Connect to Git, authorize, and select your repository.
  3. Click Begin setup.
  4. Select Astro as the framework preset.
  5. Click Save and Deploy. Cloudflare will build and publish your site.

Summary Table: Comparing Both Methods

Step Method 1: Astro CLI via Codespaces Method 2: Website Template (Direct GitHub)
Starting Point Empty GitHub Repo → Codespace Terminal Astro Theme Directory → "Use This Template"
How Code is Made Generated programmatically by running npm create astro Cloned instantly from an existing codebase
Dependency Handling Installed manually in the cloud terminal Pre-defined in the cloned package.json
Skill Barrier Requires running basic terminal commands Entirely visual point-and-click setup
Cloudflare Trigger Starts building after pushing code Starts building after linking repository