Building a Serverless Website with GitHub & Cloudflare

The Freedom of Serverless

Imagine deploying a website that serves millions of users across the globe without ever thinking about server provisioning, scaling, or maintenance. No SSH keys, no server patches, no 3 AM wake-up calls about disk space. This is the promise of serverless architecture, and with GitHub and Cloudflare Pages, it’s more accessible than ever.

The modern web development workflow has evolved beyond traditional hosting. Instead of managing infrastructure, developers can focus entirely on building great experiences. Every git push triggers an automatic deployment. Your site lives on a global content delivery network from day one. And the best part? For most projects, it’s completely free.

Why Choose Serverless

The serverless approach offers compelling advantages that transform how we think about web hosting:

Zero Infrastructure Management: Cloudflare handles all server provisioning, scaling, and maintenance. Your responsibility begins and ends with your code.

Global Distribution: Your site automatically deploys to Cloudflare’s network of data centers spanning 300+ cities worldwide. Users in Tokyo, London, and New York all get sub-100ms response times.

Automatic Scaling: Whether you have 10 visitors or 10 million, the platform scales seamlessly. No capacity planning required.

Git-Based Workflow: Your repository becomes the single source of truth. Push to GitHub, and your changes go live automatically. Rollbacks are as simple as reverting a commit.

Preview Deployments: Every pull request gets its own preview URL. Review changes in production-like environments before merging.

Cost Efficiency: For most projects, Cloudflare Pages is entirely free. Even high-traffic sites often stay within generous free tier limits.

Prerequisites

Before we begin, ensure you have:

• Node.js (v18 or later) and npm installed
• A GitHub account for version control and CI/CD
• A Cloudflare account (free tier works perfectly)
• Basic familiarity with the command line
• A text editor of your choice

Setting Up Your Astro Project

Astro is an ideal framework for serverless deployment. It generates lightning-fast static sites with minimal JavaScript by default.

Start by creating a new Astro project:

npm create astro@latest my-serverless-site

The interactive CLI will guide you through several choices. For a simple static site, choose:

• Template: “Empty” or “Blog” depending on your needs
• TypeScript: “Yes” (recommended for better developer experience)
• Install dependencies: “Yes”

Navigate into your project directory:

cd my-serverless-site

Start the development server to verify everything works:

npm run dev

Visit http://localhost:4321 to see your site running locally. Astro’s dev server includes hot module replacement, so changes appear instantly as you code.

Customize your site by editing files in the src/ directory. The src/pages/ directory contains your routes. Each .astro, .md, or .html file becomes a page on your site.

GitHub Integration

Version control is the foundation of modern serverless deployments. Initialize a Git repository in your project:

git init
git add .
git commit -m "Initial commit: Astro site setup"

Create a new repository on GitHub through the web interface or using the GitHub CLI:

gh repo create my-serverless-site --public --source=. --remote=origin

Push your code to GitHub:

git push -u origin main

Your code now lives in the cloud, ready for continuous deployment. Every future commit to this repository can trigger automatic builds and deployments.

Cloudflare Pages Deployment

Cloudflare Pages connects directly to your GitHub repository, monitoring for changes and automatically deploying updates.

Connecting Your Repository

1. Log in to the Cloudflare Dashboard
2. Navigate to Workers & Pages in the left sidebar
3. Click Create application > Pages > Connect to Git
4. Authorize Cloudflare to access your GitHub account
5. Select your repository from the list
6. Click Begin setup

Configuring Build Settings

Cloudflare needs to know how to build your Astro site. Configure these settings:

• Project name: Choose a name (this becomes your *.pages.dev subdomain)
• Production branch: main (or your default branch)
• Build command: npm run build
• Build output directory: dist

Astro outputs static files to the dist/ directory by default. Cloudflare serves everything in this directory as your website.

Advanced Build Configuration (Optional)

For more control, add environment variables:

• NODE_VERSION: 18 (or your preferred Node version)

Click Save and Deploy. Cloudflare clones your repository, installs dependencies, runs the build command, and deploys the output. The first build takes 1-2 minutes.

Your Site is Live

Once deployment completes, Cloudflare provides a URL: https://your-project.pages.dev. Click it to see your site live on the internet, served from Cloudflare’s global network.

You can add a custom domain in the Custom domains section of your project settings. Cloudflare handles SSL certificates automatically.

Automatic Deployments: The Complete Workflow

With everything connected, you’ve established a powerful deployment pipeline:

1. Develop Locally: Make changes on your machine, test with npm run dev
2. Commit Changes: git add . and git commit -m "Add new feature"
3. Push to GitHub: git push origin main
4. Automatic Build: Cloudflare detects the push and starts building
5. Deploy: Build artifacts deploy to the global network automatically
6. Live in Seconds: Your changes appear worldwide in under a minute

Preview Deployments

Create a new branch for experimental features:

git checkout -b feature/new-design
# Make changes
git add .
git commit -m "Experiment with new design"
git push origin feature/new-design

Open a pull request on GitHub. Cloudflare automatically builds this branch and comments on the PR with a preview URL. Share this link with stakeholders to gather feedback before merging.

Rollbacks and History

If a deployment causes issues, rollback is instantaneous. In the Cloudflare dashboard, navigate to your project’s Deployments tab. Every git commit has a corresponding deployment. Click any previous deployment and select Rollback to this deployment.

Alternatively, revert the problematic commit in Git:

git revert HEAD
git push origin main

This triggers a new deployment with the reverted changes.

The Power of Simplicity

This serverless workflow eliminates entire categories of problems. No servers means no server vulnerabilities, no capacity planning mistakes, no complex deployment scripts. The platform handles everything from SSL certificates to DDoS protection to global caching.

You’re free to focus on what matters: building great web experiences. Write code, push to GitHub, and let the infrastructure work for you. This is web development as it should be—simple, fast, and globally distributed from the first commit.

Welcome to the serverless future. Your next website is just a git push away.