How I deployed ScriptApex using Cloudflare and Netlify

In my previous post, I wrote about how I built my blog site using Astro. Really good stuff, but the blog was only accessible from my computer.

In this post I will cover how I transitioned from localhost to deploying it on the internet.

TL;DR: Deploy to Netlify, connect a custom domain via Cloudflare, set up email forwarding, submit a sitemap to Google Search Console. Total cost: ~£10/year for the domain. Everything else is free.

Site Deployment

Netlify is the simplest way to deploy a static Astro site. It connects directly to my GitHub repo and rebuilds it automatically every time I push to main.

Here is how I set it up:

1. I went to netlify.com and signed in with GitHub
2. Clicked Add new site → Import an existing project → GitHub
3. Find and select your repo
4. Verified the build settings (Netlify should auto-detect Astro):
   • Build command: npm run build
   • Publish directory: dist
5. Clicked Deploy site

The steps above might change as Netlify improves its UI, but Netlify really holds your hand through the process.

After deploying, Netlify gave me a random URL like random-123.netlify.app to access the site.

I don’t know about you, but I find effortless auto deployments super cool. What’s not so cool is the random URL Netlify gave me. I can’t share that with friends and family, it’s not professional, and besides, I already bought my scriptapex.com domain from Cloudflare.

So here is how I fixed that.

Connecting Your Custom Domain via Cloudflare

Rather than pointing DNS directly at Netlify, I routed traffic through Cloudflare first. This gives me DDoS protection, global edge caching, and email routing. All this is free by the way, you can’t beat that.

In Netlify

From the left panel, I navigated to Site configuration → Domain management → Add a domain, typed scriptapex.com and hit confirm. Netlify then gave me the values to configure my Cloudflare DNS records with.

In Cloudflare

From the left panel, I navigated to Cloudflare → your domain → DNS → Records and added two records:

Cloudflare automatically flattens the CNAME at the root (@), which is what Netlify recommends. The orange proxy cloud means all traffic passes through Cloudflare first.

I then went back to Netlify and hit Verify DNS configuration. Netlify provisioned a free SSL certificate automatically via Let’s Encrypt and that was pretty much it.

The site is accessible at scriptapex.com, HTTPS is working, no warnings, job done.

Setting Up Email Forwarding

On my contact page I let friends know they can reach me at [email protected]. The only problem is that at the time, if someone sent an email to this address they would get ghosted as I wouldn’t receive anything.

To fix that, I had three options:

1. Replace [email protected] with my personal email
2. Pay for and configure an email service like Google Workspace
3. Set up Cloudflare to forward emails sent to [email protected] to my personal email

I am on a budget and let’s be honest, it’s unlikely a lot of people will use this email address right now, so I went with option 3 which is completely free. If the blog grows and people start reaching out regularly, I’ll switch to option 2. You can bet I’ll write about it too, stay tuned.

Here is how I set it up:

1. I navigated to Cloudflare → Email → Email Routing and hit Enable
2. Cloudflare added the required MX and TXT records to my DNS automatically
3. I navigated to Routing Rules → Create address
4. Custom address: [email protected]
5. Action: Send to → my personal email
6. Finally I performed an email verification: For me this was done automatically because I had logged into Cloudflare with my email. If that’s not the case, Cloudflare will send a verification email.

I then tested email forwarding by sending an email to [email protected]. Initially I used the same email address I had set as the redirect destination and couldn’t receive anything, so I tried sending from a different email address and everything worked. It seems my email provider didn’t like the self-email-through-a-proxy situation I was trying to test.

Key takeaway: test email forwarding with a different email to the one you redirect emails to.

Telling Google the Site Exists

It would be a shame if after going through all this trouble writing blog posts and setting up the site, people didn’t find it soon after I publish something new. To fix that I need to tell Google about my site and its contents. If I don’t, Google will eventually find it by following links, but submitting a sitemap speeds things up considerably.

Setting Up Google Search Console

1. I visited search.google.com/search-console
2. Clicked Add property → Domain
3. I entered scriptapex.com and followed the verification wizard
4. In Cloudflare DNS settings I added the TXT record from the previous step and verification was done

Submitting a Sitemap

The most important part is providing Google with the sitemap of the site, which lists all active pages in XML format. I use AstroWind which conveniently generates and updates a sitemap index automatically.

In my case, the sitemap index was at scriptapex.com/sitemap-index.xml but on other platforms or Astro themes, the sitemap may be at scriptapex.com/sitemap.xml. If you are following along, make sure you can reach it in your browser before continuing.

To submit it in Search Console:

1. Go to Sitemaps in the left menu
2. Type sitemap-index.xml
3. Click Submit

Don’t panic if Google shows a warning after submitting. New domains get lower crawl priority. Google gets to it in its own time and then hopefully pages start appearing in search results, after sponsored links off course.

(Bonus) Branch Deployments and Preview URLs

While I was at it, I thought I would try one of Netlify’s best features: branch deploys.

Every branch I push to GitHub gets its own unique preview URL automatically, so I can make sure everything renders as it should before making changes to the main site.

To enable it, I navigated to Netlify → Site configuration → Build & deploy → Continuous deployment → Branch deploys and set:

• Branch deploys: All
• Deploy previews: Any pull request

Every time I need to make a change, I do the following:

# Create a new branch for my changes
git switch -c new-component

# Commit as I go
git add .
git commit -m "feat: implement new component"
git push -u origin new-component

Netlify builds a preview URL automatically that looks like the following:

https://deploy-preview-n--scriptapex.netlify.app

Once everything looks right, I merge to main so the main site updates, then delete the branch in GitHub and any preview deployments on Netlify.

What’s Next

The site is live at scriptapex.com, the domain is connected, emails work, and Google knows ScriptApex exists.

Next up: I am curious to see whether the posts are interesting to people, so I will set up analytics.