mehddos.fr

Deploying an Astro portfolio to Cloudflare Workers

Welcome to my first blog post! In this guide, I’ll walk you through how I deployed this very portfolio website using Astro and Cloudflare Pages.

Why Astro?

I decided to build my portfolio with Astro for a few key reasons:

  1. Performance First: Astro ships zero JavaScript to the client by default. This means my portfolio loads instantly, which is crucial for a good first impression.
  2. Islands Architecture: If I need interactivity (like the 3D background or the contact form), I can hydrate only those specific components.
  3. Flexibility: I can write my UI in React, Svelte, Vue, or just plain HTML/CSS.

Deployment Options

Cloudflare Pages is a fantastic platform for hosting static sites and frontend frameworks. There are two main ways to deploy your Astro site:

  1. Git Integration (Recommended): Connect your GitHub/GitLab repository, and Cloudflare builds your site automatically on every push.
  2. Direct Upload (Wrangler CLI): Build your site locally and upload the assets directly to Cloudflare.

Option 1: Automatic Deployment (Git)

This is the easiest way to keep your site updated.

  1. Push your Astro project to a GitHub repository.
  2. Log in to the Cloudflare Dashboard and navigate to Workers & Pages.
  3. Click Create Application > Pages > Connect to Git.
  4. Select your repository.
  5. Configure the build settings:
    • Framework Preset: Astro
    • Build Command: npm run build
    • Build Output Directory: dist
  6. Click Save and Deploy.

Now, every time you push code to your repository, Cloudflare will automatically rebuild and deploy your site!

Option 2: Manual Deployment (Wrangler)

If you prefer to deploy from your command line without connecting your repo, you can use Wrangler, Cloudflare’s CLI tool.

First, install Wrangler if you haven’t already:

npm install -g wrangler

Then, login to your Cloudflare account:

npx wrangler login

To deploy, you first need to build your Astro site locally:

npm run build

Finally, deploy your dist folder:

npx wrangler pages deploy dist --project-name my-portfolio

Configuration

For advanced configuration, you can add a wrangler.json (or wrangler.toml) file to your project root. This allows you to configure things like compatibility dates, custom bindings, and more.

{
    "name": "my-portfolio",
    "compatibility_date": "2024-02-01",
    "pages_build_output_dir": "./dist"
}

Conclusion

Deploying an Astro site to Cloudflare Pages is incredibly streamlined. You get a global CDN, fast build times, and a great developer experience for free (for personal projects).

Stay tuned for more posts about web development, electronics, and my journey in engineering!