Deploy an Astro Blog with Cloudflare Pages and Porkbun

Avatar photoByAdil

Tired of slow, clunky blog setups that cost more than your morning coffee? The modern web offers a powerhouse trio for building and deploying content-focused websites that are ridiculously fast, globally distributed, and wonderfully free. This is the JAMstack dream, realized.

In this guide, we’ll walk through the entire process of creating a high-performance blog using Astro, managing the code in a private GitHub repository, pointing a custom domain from the affordable Porkbun, and deploying it all seamlessly with Cloudflare Pages. To top it off, we’ll explore two powerful methods for ensuring your site’s integrity before it goes live: a custom GitHub Action and Cloudflare’s own Preview Deployments.

By the end, you’ll have a fully automated, production-grade publishing workflow that turns git push into your personal “publish to the world” button.

Part 1: Your Local Foundation (Astro & Git)

First, we need something to deploy. Astro is the perfect tool for this job. It’s a web framework designed for building content-rich sites, prioritizing speed by shipping zero JavaScript by default.

Scaffolding Your Astro Site

If you have Node.js set up, getting an Astro blog running locally is a one-command affair. Open your terminal and run: 

# Make sure to replace `my-astro-blog` with your project's name
npm create astro@latest my-astro-blog

Astro’s command-line tool will guide you through the setup. You have a few choices here:

  • The default “Blog” template is a great, feature-rich starting point.
  • For an even faster, more minimal setup with no UI frameworks, consider using a community theme like Astro Micro. It’s designed for speed and comes with search and comment systems pre-configured. You can start a project with it by running npm create astro@latest -- --template trevortylerlee/astro-micro.

For this tutorial, we’ll proceed with the standard blog template. Once the setup is complete, navigate into your new project directory and start the development server: 

cd my-astro-blog
npm run dev

Visit http://localhost:4321 in your browser, and you’ll see your new blog, live and ready for local development.

Securing Your Code on GitHub

Before we think about the cloud, let’s get our code under version control. If you told the Astro CLI to initialize a Git repository, you’re all set. Now, let’s get it on GitHub.

A key advantage of this workflow is that it works perfectly with private repositories, which is ideal for projects that aren’t ready for the public eye or contain draft posts.

  1. Go to GitHub to create a new repository.
  2. Give it a name and, importantly, select Private.
  3. Back in your terminal, link your local repository to the remote one on GitHub and push your code. 
# The origin URL should match the one from your new GitHub repo
git remote add origin git@github.com:YourUsername/your-repo-name.git
git branch -M main
git push -u origin main

With your code now safely on GitHub, we’re ready to connect it to the outside world.

Part 2: The Domain & DNS Dance (Porkbun & Cloudflare)

A custom domain makes your project feel real. We’re using Porkbun for its fantastic prices and free WHOIS privacy, but this process works with any domain registrar.

Setting Up Cloudflare

First, create a free Cloudflare account. Once you’re in, Cloudflare will prompt you to add your website. Enter the domain name you purchased from Porkbun.

Cloudflare is much more than a host; it’s a massive global network that provides DNS, CDN, and security services. To unlock this power, we need to let Cloudflare manage our domain’s DNS.

The Nameserver Hand-off

  1. After adding your domain, Cloudflare will present you with two nameserver addresses. They’ll look something like dahlia.ns.cloudflare.com and zeus.ns.cloudflare.com.
  2. Copy these addresses.
  3. Log in to your Porkbun account and find your domain in the management interface.
  4. Look for the “Authoritative Nameservers” section and click “Edit.”
  5. Delete the existing Porkbun nameservers and paste in the two you got from Cloudflare. Save your changes.

Now, we wait. This change can take anywhere from a few minutes to an hour to propagate across the internet. Go stretch, grab some water—DNS is a marathon, not a sprint. Once Cloudflare detects the change, your domain will be active on its network.

Part 3: Automated Deployment with Cloudflare Pages

This is where the magic happens. We’ll tell Cloudflare Pages to watch our GitHub repository and automatically deploy any changes.

Connecting Your Private Repo

  1. In your Cloudflare dashboard, navigate to Workers & Pages from the sidebar.
  2. Click Create application > Pages > Connect to Git.
  3. A new window will pop up to authorize Cloudflare to access your GitHub account. You can choose to grant access to all repositories or, for better security, only select the private blog repository we just created.
  4. Once authorized, select your repository from the list and click Begin setup.

Configuring the Build

This is the easiest part. Cloudflare is smart.

  1. Select main as your Production branch.
  2. In the Build settings, select Astro from the Framework preset dropdown.
  3. Notice that Cloudflare automatically fills in the correct Build command (npm run build) and Build output directory (dist).

That’s it! Click Save and Deploy. Cloudflare will now pull your code from GitHub, build your Astro site, and deploy it to its global network. You’ll see the deployment logs in real-time.

Going Live with Your Custom Domain

After the first deployment finishes, your site will be live on a unique *.pages.dev URL. Let’s hook up our custom domain.

  1. In your new Pages project dashboard, go to the Custom domains tab.
  2. Click Set up a domain and enter the domain you configured earlier (e.g., your-awesome-blog.com).
  3. Since Cloudflare is already managing your DNS, it handles the rest. It will verify ownership and automatically add the necessary CNAME record. Within a minute or two, your site will be live at your custom domain, complete with free SSL.

Part 4: The Pro Move – A GitHub Actions Safety Net

Our site is live and auto-deploys on every push to main. So why do we need GitHub Actions?

This step is our quality gate. Cloudflare will try to deploy any commit you push to the main branch. If that commit has a build-breaking error, the Cloudflare deployment will fail. A GitHub Action allows us to catch that error before the code is even merged, right within GitHub. It’s a simple, professional safety net.

Creating the Workflow

In your project’s root, create a new directory structure: .github/workflows/. Inside that, create a file named ci.yml. 

# .github/workflows/ci.yml

name: CI Checks

on:
  # Run on all pushes to the main branch
  push:
    branches: [ main ]
  # Run on all pull requests
  pull_request:

jobs:
  test-and-build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20' # Use a version compatible with your project
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

How It Works: The Pull Request Flow

This simple workflow truly shines when you adopt a branch-based workflow. Instead of committing directly to main, you should:

  1. Create a new branch for your changes (e.g., git checkout -b new-blog-post).
  2. Make your changes, commit them, and push the branch to GitHub.
  3. Open a pull request from your new branch to the main branch.

When you open the pull request, our GitHub Action is automatically triggered. It runs the npm run build command in a clean environment.

  • If the build succeeds, you get a green checkmark. You can confidently merge the pull request, knowing the code is deployable.
  • If the build fails, you get a red “X.” The action will report the error directly on the pull request, preventing you from merging broken code into main and causing a failed deployment on Cloudflare.

This process ensures that your main branch is always in a healthy, deployable state, turning your automated Cloudflare deployment into a reliable and stress-free process.

Part 5: The Built-in Safety Net – Cloudflare Preview Deployments

If you don’t want to set up a separate GitHub Action, Cloudflare provides a fantastic, out-of-the-box alternative: Preview Deployments.

By default, every time you open a pull request on your GitHub repository, Cloudflare Pages automatically builds your site and deploys it to a unique preview URL (e.g., a1b2c3d4.your-project.pages.dev). This URL is then posted as a comment on your pull request.

How It Works

  1. Create a new branch and push your changes.
  2. Open a pull request to your main branch.
  3. Cloudflare automatically starts a new deployment.
  4. If the build succeeds, a link to the live preview is added to your pull request. You and your team can click this link to see exactly how the changes will look and behave in a production-like environment.
  5. If the build fails, Cloudflare reports the failure directly on the pull request, blocking you from merging broken code.

GitHub Actions vs. Preview Deployments

So, which should you use?

  • Cloudflare Preview Deployments are the simplest, most integrated solution. They require zero configuration and provide a live environment for visual testing.
  • GitHub Actions are more powerful and customizable. You can add other checks to your workflow, such as running linters, executing tests, or checking for broken links, all within the same file.

For most projects, Cloudflare’s Preview Deployments are all you need. If your testing process becomes more complex, you can graduate to a custom GitHub Actions workflow.

Part 6: The Bottom Line – Unbeatable Economics

Let’s talk about the best part: the price. The total cost for this entire professional-grade setup is just the price of your domain name.

  • GitHub Private Repositories: Free.
  • Cloudflare Pages: Free, with a generous allowance of 500 builds per month, unlimited sites, and unlimited bandwidth.
  • Cloudflare CDN & SSL: Free.

Your only recurring expense is the annual renewal of your domain from a registrar like Porkbun, which is typically around $10-$15 per year.

How Does This Compare?

  • Traditional Hosting (e.g., GoDaddy, Bluehost): To get a custom domain and remove provider branding, you’re often looking at $80-$120 per year, and that’s usually for a single site with limited performance.
  • Managed WordPress Hosting (e.g., WordPress.com): A plan that allows a custom domain starts at around $48 per year, with more feature-rich plans quickly exceeding $100 per year. These platforms are also often slower and more complex than a static Astro site.

With this modern JAMstack approach, you’re getting world-class performance, security, and a top-tier developer workflow for a fraction of the cost.

Conclusion: You’re Now a Global Publisher

Congratulations! You have successfully built a production-grade, globally-distributed, and automatically-deploying blog for the unbeatable price of a single domain name.

Your workflow is now simple, powerful, and economically sensible:

  • Write posts and make changes locally on a new branch.
  • Push your branch and open a pull request.
  • A safety net of your choice—either a GitHub Action or a Cloudflare Preview Deployment—runs a build check.
  • You get a thumbs-up and can visually inspect the changes on a preview URL.
  • Merge the pull request.
  • Cloudflare Pages sees the new commit on main, builds your site, and deploys it across its global network in seconds.

From here, the world is your oyster. Write that first post, explore Astro’s amazing View Transitions, or add a link-checker to your GitHub Action. Your new platform is ready for anything.

Similar Posts