Summary

Want to build and host a professional website without spending a cent? This guide is ideal for small businesses, freelancers, and professionals looking for a high-quality, cost-free solution. By following these step-by-step instructions, you’ll create a fast, secure, and fully optimized website using Cloudflare Pages and Astro.build—two powerful tools that make this possible at no hosting cost.

If you don’t have a domain name yet, I highly recommend Spaceship Domains for affordable pricing and excellent service.

We’ll walk you through using Cloudflare’s free plan and Astro.build (or any static site generator you prefer) to build and host your site. For additional static site generators or framework support, check out Cloudflare’s supported frameworks.

In this guide, we’ll use a Mac M3, VS Code, Cloudflare Pages, Astro.Build, and GitKraken for version control, but the process works on any platform. If you run into any issues, feel free to reach out to me at admin.sellab.dev.

Step-by-Step Guide

Step 1: Setting Up Your Environment

Start by organizing your workspace. Create a parent folder with two subfolders:

1. final – for production-ready files
2. local – for testing purposes

This structure helps you test your site locally without accidentally pushing changes to the live version. Once your folders are created, open a terminal (or cmd), and cd into the respective directories.

Step 2: Install Astro.build or Your Preferred Static Site Generator

In this guide, we’ll use Astro, but the steps can be adapted to other static site generators as well.

Step 2.1: Installing Node.js

Before we proceed with Astro, you’ll need Node.js installed. Head to Node.js Downloads to get the installer for your platform. Since I’m using a Mac, I’ll focus on the Mac-specific installation process.

To install Node.js on Mac, open Terminal and run the following commands:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

Then, close and reopen terminal, and run the following command to install Node.js version 20:

nvm install 20

To verify that both Node.js and npm have been installed correctly, use the following commands:

node -v  # This should output something like `v20.18.0`

npm -v   # This should output something like `10.8.2`

Step 2.2: Installing Astro

Once Node.js is installed, navigate to the directory you created earlier in your terminal. Now, let’s install Astro by running:

npm create astro@latest

You will be prompted to answer a few questions during the installation process:

• Project name: Choose a name for your project.
• Template: Select the sample project (recommended for beginners).
• TypeScript: Choose Yes and Strict (or adjust based on your preferences).
• Git: You can skip Git initialization for now.

Once the setup is complete, your project folder will contain all the necessary files for your Astro site.

Step 3: Running a Local Development Environment

To test your site locally, navigate to your project folder and run the following command:

npm run dev

This will start the local development server. The terminal will display a URL where you can preview your site, typically:

http://localhost:4321/

If you already have other development servers running, the port number will increment by one (e.g., http://localhost:4322/).

Note: The IP address will change if multiple environments are running simultaneously.

Step 4: Pages/Git

Inorder to get the site up and running on cloudflare pages, you are going to need to upload everything to a git repo, after that head down to cloudflare pages, and upload the project files. For enviroment Variables, on cloudflare pages, we are going to add NODE_VERSION, and value will be 20.18

Step 5: Deploy

Congratulations! You’ve reached the final step. Once you’re ready, click the Deploy button to start the process. The deployment typically takes a few minutes to complete, depending on the size and complexity of your project. On average, this can range anywhere from 1 to 6 minutes.

During this time, the system will upload your files and configurations, ensuring everything is properly set up for live operation. Once the deployment finishes, your project will be accessible and ready for use.

Feel free to monitor the progress and, if you encounter any issues, consult the documentation or reach out for support.

Contact for Assistance

Although I (Sellab) may not be available around the clock, as I manage an MSP business (details available in the footer), I will make every effort to respond to all reasonable inquiries.

For assistance, feel free to reach out via email at admin@sellab.dev.

If you’re a business seeking MSP services, please refer to the footer for more information.