Blogs typicall fall into two categories which are either static or dynamic. With static, you will probably have to learn how to write within the walls of code (like HTML, CSS… etc) while dynamic requires a bit more effort in terms of setting up framework (like WordPress, Drupal) with a hosting, database… etc. As the technology domain keeps improving, solutions to your requirement is endless.
What is Astro?#
Astro is a web framework built for content-driven websites. With Astro, you can simply run a personal portfolio + blog (like Azker.Me) for almost free. And the framework is so independant, you can use UI components like React, Vue… etc. Unlike the WordPress blogs, Astro fuels with a framework and a bund of .md (markdown) files as if you’re writing a blog on a notepad. While there are many technical and interesting aspects to it, let’s deep dive to Astro in another post and focus on How to run your read-to-go Astro site on Cloudflare for FREE.
Prerequisites before we begin#
- An active domain name (ideal if Cloudflare is handling DNS queries).
- A GitHub account (connected with your local repo).
- An active Cloudflare accout.
- Local repo fully committed and pushed to GitHub account.
Deploying Astro on Cloudflare#
- Login to your Cloudflare account and Navigate to Compute —> Workers & Pages. And then Select Creat Application.
- You will then be prompted to create a worker. Select Get started as outlined below. Next choose Import an existing Git repository by clicking on the Get started button.
- Proceed to select Connect GitHub and then login with your GitHub account that you intend to connect. In my case, I have signed in already there, I’m prompted to select my repo. For safer side, its ideal you choose Only select repositories, choose the intended repo and proceed to Install & Authorize. Once completed, reconfirm the GitHub Account, choose the repo and click on Begin Setup to proceed.
Important
Before you proceed, ensure your repo is committed, pushed and up-to-date.
- Upon ensuring that, you’ll already are in the configuration page to deploy the app. Ensure you have below values set before proceeding to deploy.
| Field | Value | Remarks |
|---|---|---|
| Project Name | Leave Default (or choose one) | This name will become the sub-domain to access pages via Cloudflare |
| Production Branch | main | Typically the branch will always be main |
| Framework preset | Astro | Our intended framework |
| Build command | pnpm build | Ensure to change to this from “npm run build” |
| Build output directory | /dist | Just type “dist” without / |
| NODE_VERSION | 22 | Expand the **Environment variables (advance) and add this |
| PNPM_VERSION | 11 | Continue to add one more **Environment variables (advance) |
- Once all the value listed above are properly added (as per the image snapshot below), proceed to Save and Deploy and watch the deployment status until it completes.
- Upon completion is successful, you can either Add a custom domain appearing on the completion page, or if you have navigated to home, choose Compute —> Workers & Pages and then select your project. At the top of the project page, you will notice the Custom Domains tab where the Setup a custom domain button is visible. Type the intended domain name you want the page to go to and Continue. If your domain is bought in Cloudflare, the system itself will add the domain to the respective DNS entries, if not you have to manually add the given entry (as seen on the third image below) and click on Activate Domain.
- You will see the status of custom domain switching between Initializing, Verifying and finally Active. This is where you can confirm that the setup is complete.
CONGRATULATIONS! YOU FINALLY HAVE A WORKING ASTRO FRAMEWORK RUNNING SUCCESSFULLY WITH CLOUDFLARE PAGES.
EACH UPDATE, POSTS OR ANY CHANGES YOU NOW TO AND COMMIT IS AUTOMATICALLY PUSHED TO THE CLOUDFLARE PAGES LIKE THIS POST!